这是我的代码:
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
import { HeaderComponent } from './layout/components/header/header.component';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
HttpClientModule,
LanguageTranslationModule,
AppRoutingModule
],
declarations: [AppComponent,HeaderComponent,SidebarComponent],
providers: [AuthGuard],
bootstrap: [AppComponent],
exports: [
HeaderComponent,
SidebarComponent
],
})
export class AppModule {}
我不知道为什么会出现此异常:
错误:BrowserModule 已加载。如果您需要访问 来自延迟加载模块的常见指令,例如 NgIf 和 NgFor, 改为导入 CommonModule。错误:BrowserModule 已经 已加载。如果您需要访问常见指令,例如 NgIf 和 NgFor 从延迟加载的模块导入
在未来的模块中,我导入
CommonModule
而不是 BrowerModule
。有人可以帮助我吗?
仅导入
BrowserAnimationsModule
和 HttpModule
一次(在根模块或核心模块中)。
仅导入这些提到的模块一次(仅在应用程序模块中):
BrowserModule
、BrowserAnimationsModule
、LazyLoadImageModule
(如果使用)、CarouselModule
(如果使用)、InfiniteScrollModule
(如果使用)、HttpModule
(如果使用)
仅在AppModule中导入BrowserAnimationsModule,因为BrowserAnimationsModule默认导入BrowserModule,不需要在app.module.ts中定义BrowserModule,然后在您的子/特色模块中导入CommonModule。
@NgModule({
imports: [
BrowserAnimationsModule
]
})
export class ParentModule {}
精选/子模块
@NgModule({
imports: [ CommonModule ]
})
export class FeaturedModule {}
希望这能解决您的问题
在 AppModule 中将 CommonModule 替换为 BrowserModule。
import { BrowserModule} from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
import { HeaderComponent } from './layout/components/header/header.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
LanguageTranslationModule,
AppRoutingModule
],
declarations: [AppComponent,HeaderComponent,SidebarComponent],
providers: [AuthGuard],
bootstrap: [AppComponent],
exports: [
HeaderComponent,
SidebarComponent
],
})
export class AppModule {}
我的问题是我在我的根
BrowserModule
和功能模块使用的AppModule
中导入了SharedModule
。我将其从 SharedModule
中删除,然后一切又恢复正常了。
就我而言,我必须从子模块的导入中删除 NoopAnimationsModule。在 APPModule 中,我从 Angular 导入它,但从未在导入中使用过。 在 app.module.ts 中
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
],
imports: [
AppRoutingModule,
BrowserAnimationsModule,
...
],
providers: [
],
bootstrap: [AppComponent]
})