升级 NG13 -> NG14 错误：已加载"浏览器模块"中的提供程序

Question

我5年前用Angular 2+开始了这个项目，直到NG 13版本，一切都迁移得很好。不，我想升级到NG 14，但现在当我导航到任何懒惰加载的模块时，都会弹出这个错误！

错误：BrowserModule中的提供程序已加载。如果需要访问常见指令(如NgIf和NgFor(，请改为导入CommonModule。错误：BrowserModule中的提供程序已加载。如果您需要访问常见指令，如NgIf和NgFor，请导入CommonModule而不是

所以在我的shared.module.ts中要明确的是，我只导入了CommonModule！在app.module.ts中，只有1个Browser和BrowserAnimationsModule被导入，共享模块也在导入中导入：[]！

我真的不知道这里出了什么问题！

这是app-routing.module.ts:

/* eslint-disable max-len */
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouteConfigLoadEnd, Router, RouterModule, Routes } from '@angular/router';
import { addDynamicPath } from './softpak/classes/dynamic-path';
import { LandingPageComponent } from './softpak/components/landing-page/landing-page.component';
import { MainComponent } from './softpak/components/main/main.component';
import { NotfoundComponent } from './softpak/components/notfound/notfound.component';
import { AuthGuard } from './softpak/guards/auth.guard';
import { DynamicPathGuard } from './softpak/guards/dynamic-path.guard';
import { LicenseGuard } from './softpak/guards/license.guard';
import { SecurityGuard } from './softpak/guards/security.guard';
const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{ path: '', component: LandingPageComponent, canActivate: [AuthGuard] },
// Lazy loaded modules here!
{
path: 'accounting',
canActivate: [AuthGuard, LicenseGuard],
canActivateChild: [SecurityGuard],
loadChildren: () => import('./applications/accounting/accounting.module').then(m => m.AccountingModule)
},
{
path: 'general',
canActivate: [AuthGuard, LicenseGuard],
canActivateChild: [SecurityGuard],
loadChildren: () => import('./applications/general/general.module').then(m => m.GeneralModule)
},
// etc.
]
},
{ path: '404', component: NotfoundComponent },
{ path: '**', canActivate: [DynamicPathGuard], component: NotfoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
paramsInheritanceStrategy: 'always'
})
],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(private router: Router) {
this.router.events.subscribe(routerEvent => {
if (routerEvent instanceof RouteConfigLoadEnd) {
addDynamicPath(this.router.config, routerEvent.route.path || '');
}
});
}
}

这是app.module.ts:

// imports here
// some of my components etc.
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
MainComponent,
ErrorComponent,
LandingPageComponent,
NavigationItemComponent,    
NotfoundComponent,
LogComponent,
AttachmentsComponent,
UpdateNotificationComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
IntlModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
}),
ThemeModule.forRoot({
themes: [defaultTheme, lightTheme, darkTheme, customTheme],
active: 'default'
}),
SharedModule
],
providers: [
// my services comes here
]
})
export class AppModule {}

这是共享的.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
// all my shared components here, some Kendo Components and other third party stuff

@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
],
declarations: [
// my shared components here
],
providers: [],
exports: [
RouterModule,
ReactiveFormsModule,
// my shared components here
]
})
export class SharedModule {}

这是Accounting.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared.module';
import { AccountingRoutingModule } from './accounting-routing.module';
import { AccountingComponent } from './accounting.component';
@NgModule({
imports: [CommonModule, SharedModule, AccountingRoutingModule],
declarations: [AccountingComponent]
})
export class AccountingModule {}

这就是通用模块：

// imports here
@NgModule({
imports: [CommonModule, SharedModule, GeneralRoutingModule],
declarations: [
GeneralComponent,
// the rest of my custom components here
]
})
export class GeneralModule {}

Answer 1

我使用"angular2通知"包。

我在AppModule和SharedModule中导入了SimpleNotificationsModule。我在子组件中使用了<simple-notifications [options]="options"></simple-notifications>。

在更新Angular版本从12到13之后，我出现了"BrowserModule已经加载"错误。

我从SharedModule中删除了SimpleNotificationsModule，错误消失了。我不得不将<simple-notifications [options]="options"></simple-notifications>移动到AppComponent

import { SimpleNotificationsModule } from 'angular2-notifications';
@NgModule({
imports: [
...,
SimpleNotificationsModule // removed this line
],
exports: [
...,
SimpleNotificationsModule // removed this line
],
})
export class SharedModule { }

import { SimpleNotificationsModule } from 'angular2-notifications';
@NgModule({
imports: [
SimpleNotificationsModule.forRoot() // left this line
]
})
export class AppModule { }