问题描述
我的 Angular 应用程序在大多数情况下运行顺利,但有时在启动时会失败并显示诸如
无法绑定到“ngIf”,因为它不是“ng-container”的已知属性。
如 Can't bind to 'ngIf' since it isn't a known property of 'div' 所述,问题在于未导入 CommonModule
。我可能做错了什么,但似乎 CommonModule
是导入的(如果不是,它永远不会工作,否则它在 90% 的时间都在工作)。
这是我的配置:
app.module.ts
@NgModule({
declarations: [AppComponent],imports: [
CommonModule,AppRoutingModule,NavigationModule,HttpClientModule,browserModule,browserAnimationsModule,TranslateModule.forRoot({
loader: {
provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]
}
}),AngularsvgIconModule.forRoot()
],providers: [
{
// tslint:disable-next-line: max-line-length
// Inspired by https://www.mokkapps.de/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments/#solution-3-mount-configuration-files-from-environment
// Load configuration file.
provide: APP_INITIALIZER,useFactory: (envConfigService: EnvironmentService) => async () => envConfigService.loadConfiguration(),deps: [EnvironmentService],multi: true
},CookieService,{
provide: HTTP_INTERCEPTORS,useClass: CacheInterceptor,useClass: MyHttpInterceptor,I18n,Xliff,{ provide: TRANSLATIONS,useValue: translationsEn },{ provide: TRANSLATIONS_FORMAT,useValue: 'xlf' },{ provide: MatPaginatorIntl,useClass: CustomMatPaginatorIntl },OverlayModule,DeviceDetectorUtils,MatDatepickerModule,MatNativeDateModule,{ provide: LOCALE_ID,useValue: 'fr-FR' },{ provide: DateAdapter,useClass: MomentDateAdapter },{ provide: MAT_DATE_FORMATS,useValue: CUSTOM_DATE_FORMAT },{ provide: MAT_DATE_LOCALE,useValue: 'fr-FR' }
],bootstrap: [AppComponent]
})
export class AppModule {
}
app-routing-module.ts
所有应用程序都在一个动态更新组件的单一路径 (/home
) 上。
const routes: Routes = [
{ path: 'home',component: HomeComponent,loadChildren: () => {
return import('./features/feature1/feature1.module').then(m => m.Feature1Module),import('./features/feature2/feature2.module').then(m => m.Feature2Module),//...
import('./navigation/navigation.module').then(m => m.NavigationModule),import('./features/home/home.module').then(m => m.HomeModule);
}},{ path: 'password-creation/:m/:p',component: PasswordCreationComponent,loadChildren: () => {
return import('./features/user-management/user-management.module').then(m => m.UserManagementModule);
}},{ path: '**',redirectTo: 'home',pathMatch: 'prefix' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
home.module.ts
@NgModule({
declarations: [HomeComponent],SharedModule,HomeRoutingModule
]
})
export class HomeModule { }
home-routing-module.ts
const routes: Routes = [
{
path: '',component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class HomeRoutingModule {}
shared.module.ts
const PIPES = [
// All my shared pipes
];
const COMPONENTS = [
// All my shared components
];
const DIRECTIVES = [
// All my shared directives
];
const MODULES = [
CommonModule,PortalModule,ReactiveFormsModule,FormsModule,LayoutModule,RouterModule,// All my shared modules
];
const PROVIDERS = [
// All my shared providers
];
@NgModule({
declarations: [...PIPES,...COMPONENTS,...DIRECTIVES],imports: [...MODULES],exports: [...PIPES,...DIRECTIVES,...MODULES],providers: [...PROVIDERS]
})
export class SharedModule { }
每个功能模块都导入 sharedModule
。
我猜这是由于延迟加载造成的,但是 CommonModule
和 browserModule
是在 AppModule
中导入的,所以它们不应该被延迟加载,对吧?
ng 版本
Angular CLI: 9.1.15
Node: 14.16.1
OS: win32 x64
Angular: 9.1.13
... animations,common,compiler,compiler-cli,core,forms
... language-service,localize,platform-browser
... platform-browser-dynamic,router
Ivy Workspace: Yes
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.901.15
@angular-devkit/build-angular 0.901.15
@angular-devkit/build-optimizer 0.901.15
@angular-devkit/build-webpack 0.901.15
@angular-devkit/core 9.1.15
@angular-devkit/schematics 9.1.15
@angular/cdk 9.2.4
@angular/cli 9.1.15
@angular/material 9.2.4
@angular/material-moment-adapter 11.2.13
@ngtools/webpack 9.1.15
@schematics/angular 9.1.15
@schematics/update 0.901.15
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
感谢您的见解。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)