Question

我有一个大项目，它将所有组件，管道等捆绑到一个文件中。目前，我试图将其拆分为单独的捆绑包。

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 的导入数组时，我会收到< / p>

错误：已加载BrowserModule。 ...

我错过了什么吗？因为共享和应用模块中导入的所有模块在 explore.module.ts 中似乎不可见。

Answer 1

您只应导入BrowserModule一次。您导入的其他模块应改为导入CommonModules。

同样如@Maxim所指出的那样，您应该将组件放在共享模块中以供应用程序中的所有模块使用，方法是将组件放在模块的exports数组中

如何正确导入模块以在动态加载的模块中使用它们？

1 个答案: