错误：模块“ SharedModule”导入了意外的指令“ DashboardPage”。 请添加@NgModule批注

Question

I am trying to use DashboardPage in app.module.ts file as shared module, In that I am facing error like "Error: Unexpected directive 'DashboardPage' imported by the module 'SharedModule'. Please add a @NgModule annotation."

Give some suggestions to resolve this issue. Thanks in advance.

Below the codes,

app.module.ts

import {NgModule, ErrorHandler} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {IonicApp, IonicModule, IonicErrorHandler, IonicPageModule} from 'ionic-angular';
import {MyApp} from './app.component';
import {DatePickerModule} from 'datepicker-ionic2';
import {IonicStorageModule} from '@ionic/storage';
import {PreloadImageModule} from '../components/preload-image/preload-image.module';
import {ShowHidePasswordModule} from "../components/show-hide-password/show-hide-password.module";
import {Login} from '../pages/login/login';
import {DashboardPage} from '../pages/dashboard/dashboard';
import {SharedModule} from '../app/shared/shared-module';
import {PROVIDERS} from '../app/shared/dashboard';
@NgModule({
    declarations: [
        MyApp,
        Login,
    ],
    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
            platforms: {
                ios: {
                    autoFocusAssist: 'instant'
                }
            }
        }),
        IonicStorageModule.forRoot(),
        DatePickerModule,
        SharedModule,
        IonicPageModule.forChild(Login), PreloadImageModule, ShowHidePasswordModule,
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        Login,
    ],
    providers: [
        PROVIDERS,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
    ]
})
export class AppModule {
}

shared-module.ts file

import {NgModule} from '@angular/core';
import {CommonModule} from "@angular/common";
import {PROVIDERS} from "../shared/dashboard";
import {DashboardPage} from "../../pages/dashboard/dashboard";

@NgModule({
    declarations: [
        PROVIDERS
    ],
    imports: [
        CommonModule,
        DashboardPage,
    ],
    exports: [
        DashboardPage,
    ]
})

export class SharedModule {
}

Answer 1

You mixed up all the attributes:

declarations: [
    PROVIDERS
],
imports: [
    CommonModule,
    DashboardPage,
],
exports: [
    DashboardPage,
]

PROVIDERS should be declared in... providers (although it seems you're redeclaring those that are already declared in the app module, which is not a good idea). imports is supposed to contain modules, not directives. DashboardPage is a directive, so it should go in declarations , not in imports .