インポートされたモジュールが定義されていませんAngular4

Question

Angularにはまったく新しいので、おそらくセットアップ上の問題です。しかし、私は別のモジュールにインポートしようとすると定義されていないモジュールを持っています。私はそれを交換すると他のモジュールをインポートすることができないので、注文と関係していると思います。

私の木は、私は私のナビゲーションバーに

navigation.component.html

<nav> 
    .... 
    <mylogin></mylogin> 
</nav> 

しかし、私は追加のログインのコンパクトバージョンを追加しようとしていたこの

|-- src/ 
| |-- app/ 
| | |-- components/ 
| | | |-- login/ 
| | | | |-- login.compact.component.html 
| | | | |-- login.component.html 
| | | | |-- login.component.ts 
| | | | |-- login.service.ts 
| | | | |-- login.module.ts 
| | | |-- ... 
| | | |-- components.module.ts 
| | |-- shared/ 
| | | |-- header/ 
| | | |-- footer/ 
| | | |-- navigation/ 
| | | |-- shared.module.ts 
| | |-- app.component.html 
| | |-- app.component.ts 
| | |-- app.module.ts 
| | |-- app.routes.ts 

のように見えますLoginModule〜importsのSharedModuleこのエラーが発生するUnexpected value 'undefined' imported by the module 'LoginModule'

私は

import {SharedModule} from './shared/shared.module'; 

import {ComponentsModule} from './components/components.module'; 
.... 
@NgModule({ 
declarations: [ 
    AppComponent, 
], 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpClientModule, 
    SharedModule, 
    ComponentsModule, 
    BsDropdownModule.forRoot(), 
    RouterModule.forRoot(
     APP_ROUTES, 
     {enableTracing: true}) 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

を持っている私のapp.module.tsで

これはアプリを構築するための悪い方法ですか？または、ナビゲーションで使用するためにログインを共有モジュールにインポートしようとするのは間違っていますか？

Answer 1

最初に、SharedModuleを提供していないため、をSharedModuleにどのようにインポートしたのかわかりません。

第2に、あるモジュールを別のモジュールにインポートする場合。 exports: []に、他のモジュールにインポートするすべてのdeclarationsを追加する必要があります。

モジュールAモジュールAがインポートされてからモジュールA

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    PipesModule, 
    NgbModule, 
    RouterModule, 
    AppRoutingModule 
    ], 
    declarations: [], 
    providers: [] 
}) 
export class HomeModule { 
} 

あなたが見ることができるように、PipesModuleをインポート

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ 
    CapitalizePipe, 
    SentenceCasePipe, 
    FirstNamePipe, 
    ], 
    exports: [ 
    CapitalizePipe, 
    SentenceCasePipe, 
    FirstNamePipe, 
    ] 
}) 
export class PipesModule { 
} 

モジュールB：ここでは例ですにすべてdeclarationsを追加してモジュールBに追加します;要求に応じて異なるモジュールにロードすることができます。

FYI

AppModuleに物事を追加すると、アプリケーションの負荷のブラウザDOMにロードされるそれらのものがすべてになります。つまり、1つのコンポーネントでのみ使用されるmoduleを追加すると、これにより、すべてのモジュールに必要なアプリケーションのロード時間を延長することができます。

インクリメンタルモジュールを読み込んで、できるだけ多くのネストされたスタイルをアプリに計画し、アプリの読み込みをより速く滑らかにしてください。例は次のようになります。

AppModule 
AppComponent 
    | PublicModule 
    | PublicComponent 
     | LoginModule 
     | LoginComponnet 
       | HomeModule 
       | HomeComponent