如何正確導入模塊以在動態加載的模塊中使用它們？

我有一個大項目，它將所有組件，管道等捆綁到一個文件中。目前，我正在嘗試將它拆分成不同的包。如何正確導入模塊以在動態加載的模塊中使用它們？

app.module.ts

import { AppComponent } from './app.component'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
// some other imports 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ... 
    ], 
    providers: [...], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule

app.routes.js

... 
export const routes: Routes = [ 
    ... 
    { 
     path: 'explore', 
     component: ExploreComponent, 
     loadChildren: './explore.module#ExploreModule 
    }, 
    ... 
];

explore.module.ts

// some imports 
const routes: Routes = [ ... ]; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     RouterModule.forChild(routes) 
    ], 
    declaration: [ 
     ExploreInfoComponent, 
     ExploreFormComponent 
    ] 
}) 
export class ExploreModule {}

在ExploreFormComponent我使用ngModel，當我加入FormsModule到ExploreModule進口陣列然後我收到

Error: BrowserModule has already been loaded. ...

有什麼事，我錯過了？因爲在共享的所有模塊共享和應用程序模塊似乎隱藏在explore.module.ts。

來源

2017-08-29 Александр Буклей

讀取[避免常見的混亂與Angular模塊]（https://blog.angularindepth.com/avoiding-common-confusions-with-modules-in-angular-ada070e6891f） –

完成。如果我錯了，請糾正我，就我從文章中瞭解的情況來看，在延遲加載的模塊中，每個導入都會創建一個副本，並且在文章中描述瞭如何爲您自己編寫的模塊解決此問題的方法。你可以建議角度或第三方模塊的情況嗎？ @ maxim-koretskyi –

_in懶惰加載模塊爲每個導入都會創建一個copy_--抱歉，我不明白你的意思 –

You should only import BrowserModule once. Other modules you import should be importing CommonModules instead.

另外，通過作爲@Maxim指出應該通過將部件的exports陣列模塊的模塊中的導出共享模塊，以通過應用中的所有模塊使用

來源

2017-08-29 10:41:40

* BrowserModule *在**應用中導入一次.module.ts ** –

你有沒有爲其餘的進口通用模塊@АлександрБуклей –

是的，我有。根據你的筆記編輯問題 –

如何正確導入模塊以在動態加載的模塊中使用它們？

回答

相關問題