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

【问题标题】：Error: Unexpected directive 'DashboardPage' imported by the module 'SharedModule'. Please add a @NgModule annotation错误：模块“SharedModule”导入了意外的指令“DashboardPage”。请添加@NgModule 注释
【发布时间】：2017-12-27 01:01:15
【问题描述】：

我正在尝试将 app.module.ts 文件中的 DashboardPage 用作共享模块，因为我遇到了类似“错误：模块‘SharedModule’导入的意外指令‘DashboardPage’。请添加@NgModule 注释。 "

给出一些解决这个问题的建议。提前致谢。

代码下方，

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 {
}

共享模块.ts 文件

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 {
}

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案1】：

你混淆了所有属性：

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

PROVIDERS 应该在... providers 中声明（尽管您似乎正在重新声明那些已经在 app 模块中声明的内容，这不是一个好主意）。 imports 应该包含模块，而不是指令。 DashboardPage 是一个指令，所以它应该进入declarations，而不是imports。

【讨论】：