Angular 7延迟加载

时间:2019-04-15 15:17:13

标签: javascript angular lazy-loading angular7

我从项目中删除了所有BrowserModuleBrowserAnimationsModule,但仍然出现此错误

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded.
If you need access to common directives such as NgIf and NgFor
 from a lazy loaded module, import CommonModule instead

我在我的项目和Angular 7中使用Material UI

我正在使用此软件包

    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "^7.2.0",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngrx/effects": "^7.2.0",
    "@ngrx/store": "^7.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@types/echarts": "^4.1.8",
    "angular-font-awesome": "^3.1.2",
    "angular-gridster2": "^7.1.0",
    "ant-design-palettes": "^1.1.3",
    "bootstrap": "^4.2.1",
    "chart.js": "^2.7.3",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "echarts": "^4.2.1",
    "echarts-wordcloud": "^1.1.3",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "mitra-packages": "^0.2.5",
    "ng-pick-datetime": "^7.0.0",
    "ng2-dragula": "^2.1.1",
    "ngx-avatar": "^3.2.0",
    "ngx-clipboard": "^11.1.9",
    "ngx-color-picker": "^7.3.0",
    "ngx-echarts": "^4.1.0",
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-infinite-scroll": "^7.1.0",
    "ngx-masonry": "^1.1.2",
    "ngx-quill": "^4.5.1",
    "pusher-js": "^4.3.1",
    "quill": "^1.3.6",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

该错误该怎么办?

预先感谢

1 个答案:

答案 0 :(得分:-1)

您应该只 将BrowserModuleBrowserAnimationsModule导入AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

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

您应该仅导入CommonModule

的所有子模块
import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import { FormsModule } from '@angular/forms'; 
import { ChildComponent } from './child.component'; 

@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ChildComponent ]
})
export class ChildModule { }