Question

尝试访问延迟加载的模块时出现错误。该错误表明我两次导入了BrowserModule，但仅在AppModule中将其导入。这些是我的模块：

app.module：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { MDBBootstrapModule } from "angular-bootstrap-md";
import {ComponentsModule} from "./components/components.module";

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

app.routing

import { NgModule } from '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    path: 'common-views',
    loadChildren: './common-views/common-views.module#CommonViewsModule'
  },
  {
    path: 'employee',
    loadChildren: './employee/employee.module#EmployeeModule'
  },
  {
    path: 'owner',
    loadChildren: './owner/owner.module#OwnerModule'
  },
  {
    path: 'seller',
    loadChildren: './seller/seller.module#SellerModule'
  },
  {
    path: 'auth',
    loadChildren: './auth/auth.module#AuthModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

components.module：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ComponentsRoutingModule } from './components-routing.module';
import {SideNavbarComponent} from "./side-navbar/side-navbar.component";
import {NavbarComponent} from "./navbar/navbar.component";
import {LogoDigiposComponent} from "./logo-digipos/logo-digipos.component";
import {HeaderComponent} from "./header/header.component";
import { ModalAlertComponent } from './modal-alert/modal-alert.component';

// For MDB Angular Free
import { MDBBootstrapModule} from 'angular-bootstrap-md';

@NgModule({
  declarations: [
    SideNavbarComponent,
    NavbarComponent,
    SideNavbarComponent,
    LogoDigiposComponent,
    HeaderComponent,
    ModalAlertComponent
  ],
  imports: [
    CommonModule,
    ComponentsRoutingModule,
    MDBBootstrapModule.forRoot()
  ],
  exports: [
    SideNavbarComponent,
    NavbarComponent,
    SideNavbarComponent,
    LogoDigiposComponent,
    HeaderComponent,
    ModalAlertComponent
  ]
})
export class ComponentsModule { }

和auth模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AuthRoutingModule } from './auth-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';

import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from "@angular/material";

import {AuthService} from "./services/auth.service";
import {AuthGuardService} from "./services/guards/auth-guard.service";
import {RoleGuardService} from "./services/guards/role-guard.service";
import {ComponentsModule} from "../components/components.module";

@NgModule({
  declarations: [
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    ComponentsModule
  ],
  providers: [
    AuthService,
    AuthGuardService,
    RoleGuardService
  ]
})
export class AuthModule { }

我得到的错误是：

“ ERROR错误：未捕获（承诺）：错误：BrowserModule已存在已加载。如果您需要访问常用指令，例如NgIf和从延迟加载的模块中获取NgFor，请改为导入CommonModule。错误： BrowserModule已加载。如果您需要访问通用延迟加载模块中的NgIf和NgFor等指令，请导入改为使用CommonModule。“

我不知道如何解决它。我正在阅读，到处都说我正在将懒惰的模块导入BrowserModule，但是我没有这样做。

有人可以帮我吗？

谢谢

Answer 1

您要导入的 app.module.ts 中

valuePath

T在内部导入public static void SetStringValue(IValidate data, string propertyName, string valuePath, Func<string> value, bool required) { if(data == null) throw new ArgumentNullException(nameof(data)); var property = data.GetType().GetProperty(propertyName); if(property == null) throw new ArgumentException($"In {data.GetType()} => SetStringValue. " + $"Passed property {propertyName}, but property doesn't exist."); var unwrapped = value(); try { if (string.IsNullOrEmpty(unwrapped)) { if (required) data.DataValidationErrors.Add($"{valuePath} can't be empty"); unwrapped = null; // this might be unecessary. } property.SetValue(data, unwrapped); } catch(Exception e) { // This is probably a bad idea. property.SetValue(data, null); if (required) data.DataValidationErrors.Add(Atleast put a better message here. e.Message ...); } }。所以你需要删除 import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from "@angular/platform-browser/animations";来自您的 app.module.ts ，这应该可以解决您的问题。

延迟加载的模块中的BrowserModule错误

1 个答案: