如何通过Angular2中的sharedModule在多个位置使用组件

有经验的Angular 1家伙在这里，但只是不能得到一个概念，因为我移动到Angular 2这个周末。花了一天的时间在这件事上，最后陷入了困境，也许有人能帮上忙

我正在尝试将ui组件包含到多个路由（模块？）中。从我一直阅读的内容来看，最干净的方法是创建一个共享模块，将我想要的组件导出到多个其他组件

考虑到这一点，我创建了一个直接从angular cli剥离的项目，以尝试将MainNavComponent引入AppModule以及单独路由的模块（大约）

它在主应用程序组件html中按预期显示，但如果尝试将其包含在关于组件html中，则会抛出以下错误：

Unhandled Promise rejection: Template parse errors:
'app-main-nav' is not a known element:
1. If 'app-main-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-main-nav' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-main-nav></app-main-nav>

未处理的承诺拒绝：模板分析错误：
“应用程序主导航”不是已知元素：
1.如果“应用程序主导航”是一个角度组件，则确认它是该模块的一部分。
2.如果“app main nav”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“[错误->]

如果您在上述回购协议上执行
ng服务
并转到，您可以看到错误。非常感谢。
在完成了一些Angular2项目后，我已经稳定了
SharedModule
和
AppModule
的以下格式，并且它始终对我有效

在所有其他模块中，只需导入
SharedModule

共享模块：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

// **import all angular modules that will be shared**
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

// **import all shared third-party modules**
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { ResponsiveModule } from 'ng2-responsive';

// **import all shared services of your app**
import { MyServiceA, MyServiceB, MyServiceC } from './services';

// **import all shared components, directives & pipes of your app**
import { MyComponentA, MyComponentB, MyComponentC } from './components';
import { MyDirectiveA, MyDirectiveB, MyDirectiveC } from './directives';
import { MyPipeA, MyPipeB } from '../pipes';

// **import any other shared sub-module**
import { MyOtherSharedSubModule } from './shared-sub.module';

@NgModule({
    imports: [
        // import all modules to share
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        FlexLayoutModule,
        TranslateModule,
        ResponsiveModule,
        MyOtherSharedSubModule
    ],
    declarations: [
        // Declare all shared components/pipes/directives
        MyComponentA,
        MyComponentB,
        MyComponentC,
        MyDirectiveA,
        MyDirectiveB,
        MyDirectiveC,
        MyPipeA,
        MyPipeB
    ],
    exports: [
        // export all shared modules/components/pipes/dirctives
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        FlexLayoutModule,
        TranslateModule,
        ResponsiveModule,
        MyOtherSharedSubModule,
        MyComponentA,
        MyComponentB,
        MyComponentC,
        MyDirectiveA,
        MyDirectiveB,
        MyDirectiveC,
        MyPipeA,
        MyPipeB
    ]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                // Add all shared services
                MyServiceA,
                MyServiceB,
                MyServiceC
            ]
        };
    }
}

// ** import all angular modules**
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpModule, Http } from '@angular/http';

// **import other modules that require .forRoot()**
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

// **import third-party modules that require .forRoot()**
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';

// **import AppComponent, AppRoutesModule etc**
import { AppComponent } from './app.component';
import { AppRoutesModule } from './app-routes.module';

// **import SharedModules
import { SharedModule } from './shared';

// **import other root-level components
import { LoginComponent, ForgotPasswordComponent } from './components';

// **create loader/config factories for third party modules if required
export function translateLoaderFactory(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

export function translateLoader(): any {
    return {
        provide: TranslateLoader,
        useFactory: translateLoaderFactory,
        deps: [Http]
    };
}

@NgModule({
    declarations: [
        // **declare only root level components here
        AppComponent,
        LoginComponent,
        ForgotPasswordComponent
    ],
    imports: [
        BrowserModule, // <=== Must import
        HttpModule,    // <=== Must import

        // **import other modules that require .forRoot()**
        MaterialModule.forRoot(),
        FlexLayoutModule.forRoot(),
        TranslateModule.forRoot(translateLoader()),

        // **import the SharedModule**
        SharedModule.forRoot(),

        // **import AppRoutesModule**
        AppRoutesModule
    ],
    providers: [
        // **specify root level services (if any)**
        // **specify service for APP_INITIALIZER (if any)**
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppModule：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

// **import all angular modules that will be shared**
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

// **import all shared third-party modules**
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { ResponsiveModule } from 'ng2-responsive';

// **import all shared services of your app**
import { MyServiceA, MyServiceB, MyServiceC } from './services';

// **import all shared components, directives & pipes of your app**
import { MyComponentA, MyComponentB, MyComponentC } from './components';
import { MyDirectiveA, MyDirectiveB, MyDirectiveC } from './directives';
import { MyPipeA, MyPipeB } from '../pipes';

// **import any other shared sub-module**
import { MyOtherSharedSubModule } from './shared-sub.module';

@NgModule({
    imports: [
        // import all modules to share
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        FlexLayoutModule,
        TranslateModule,
        ResponsiveModule,
        MyOtherSharedSubModule
    ],
    declarations: [
        // Declare all shared components/pipes/directives
        MyComponentA,
        MyComponentB,
        MyComponentC,
        MyDirectiveA,
        MyDirectiveB,
        MyDirectiveC,
        MyPipeA,
        MyPipeB
    ],
    exports: [
        // export all shared modules/components/pipes/dirctives
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        FlexLayoutModule,
        TranslateModule,
        ResponsiveModule,
        MyOtherSharedSubModule,
        MyComponentA,
        MyComponentB,
        MyComponentC,
        MyDirectiveA,
        MyDirectiveB,
        MyDirectiveC,
        MyPipeA,
        MyPipeB
    ]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                // Add all shared services
                MyServiceA,
                MyServiceB,
                MyServiceC
            ]
        };
    }
}

// ** import all angular modules**
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpModule, Http } from '@angular/http';

// **import other modules that require .forRoot()**
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

// **import third-party modules that require .forRoot()**
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';

// **import AppComponent, AppRoutesModule etc**
import { AppComponent } from './app.component';
import { AppRoutesModule } from './app-routes.module';

// **import SharedModules
import { SharedModule } from './shared';

// **import other root-level components
import { LoginComponent, ForgotPasswordComponent } from './components';

// **create loader/config factories for third party modules if required
export function translateLoaderFactory(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

export function translateLoader(): any {
    return {
        provide: TranslateLoader,
        useFactory: translateLoaderFactory,
        deps: [Http]
    };
}

@NgModule({
    declarations: [
        // **declare only root level components here
        AppComponent,
        LoginComponent,
        ForgotPasswordComponent
    ],
    imports: [
        BrowserModule, // <=== Must import
        HttpModule,    // <=== Must import

        // **import other modules that require .forRoot()**
        MaterialModule.forRoot(),
        FlexLayoutModule.forRoot(),
        TranslateModule.forRoot(translateLoader()),

        // **import the SharedModule**
        SharedModule.forRoot(),

        // **import AppRoutesModule**
        AppRoutesModule
    ],
    providers: [
        // **specify root level services (if any)**
        // **specify service for APP_INITIALIZER (if any)**
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

//**导入所有角度模块**
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule，APP_初始值设定项}；
从'@angular/Http'导入{HttpModule，Http}；
//**导入需要.forRoot（）的其他模块**
从“@angular/material”导入{MaterialModule}；
从“@angular/flex布局”导入{FlexLayoutModule}；
//**导入需要.forRoot（）的第三方模块**
从“ng2 translate/ng2 translate”导入{TranslateModule、TranslateLoader、TranslateStaticLoader}；
//**导入应用组件、批准模块等**
从“./app.component”导入{AppComponent}；
从“./app routes.module”导入{AppRoutesModule}；
//**导入共享模块
从“./shared”导入{SharedModule}；
//**导入其他根级组件
从“./components”导入{LoginComponent，ForgotPasswordComponent}；
//**如果需要，为第三方模块创建加载程序/配置工厂
导出函数translateLoaderFactory（http:http）{
返回新的TranslateStaticLoader（http，'./assets/i18n'，'.json'）；
}
导出函数translateLoader（）：任意{
返回{
提供：TranslateLoader，
useFactory:translateLoaderFactory，
副署长：[Http]
};
}
@NGD模块({
声明：[
//**此处仅声明根级组件
应用组件，
LoginComponent，
放弃密码组件
],
进口：[
BrowserModule，//因此，最终的解决方案是，因为我使用了一个专用的路由模块，所以我也需要将SharedModule引入该路由模块，以便路由可以使用它（将其引入AppModule是不够的）。感谢@yurzui的刺激，让我走上了正确的道路

我已使用此更改更新了测试报告，以防有人好奇或在使用--routing with the angular cli后出现相同问题。
尝试将组件从AppRoutingModule移动到AppModule。AppRoutingModule不会导入共享模块。组件始终获取模块内可用的指令。AppRoutingModule不具有e尽管有路由指令和AboutComponent，但它并没有直接工作，因为如果删除AboutComponent，它会破坏路由，这确实促使我将SharedModule包括到路由模块中，从而解决了问题。不确定这是否是最佳做法，但它可以工作。感谢您的提醒：）感谢您的详细解释，我将把它保存起来以备将来参考。不幸的是，没有解决这个问题，因为除了使用路由模块之外，它几乎反映了我的结构。似乎我还需要将SharedModule引入路由模块以使其工作。