加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – RouterModule.forRoot调用两次

发布时间:2020-12-17 18:01:43 所属栏目:安全 来源:网络整理
导读:我正在尝试将Lazy Loading实现到我的应用程序中,但似乎遇到了一个问题,我收到错误消息: Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead. 所以我有我的主app-routing.module.ts以及app-modul
我正在尝试将Lazy Loading实现到我的应用程序中,但似乎遇到了一个问题,我收到错误消息:

Error: RouterModule.forRoot() called twice. Lazy loaded modules should
use RouterModule.forChild() instead.

所以我有我的主app-routing.module.ts以及app-module.ts,如下所示:

APP-module.ts

// External Dependencies
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Internal Dependencies
import { MaterialModule } from '../app/configuration/material/material.module';
import { SharedModule } from '../app/application/shared/shared.module';
import { RoutingModule } from '../app/configuration/routing/routing.module';
import { SettingsModule } from '../app/application/settings/settings.module';

import { AppComponent } from './app.component';

import { SearchService } from './application/shared/services/search.service';

@NgModule({
  declarations: [AppComponent],imports: [
    BrowserAnimationsModule,BrowserModule,SharedModule,RoutingModule,MaterialModule,HttpClientModule,FormsModule,],providers: [ ],bootstrap: [AppComponent]
})

export class AppModule { }

APP-routing.ts

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule,Routes } from '@angular/router';
import { HttpModule } from '@angular/http';

const appRoutes: Routes = [
  { path: '',redirectTo: 'overview',pathMatch: 'full' },{ path: 'overview',loadChildren: '../../application/overview/overview.module#OverviewModule' },{ path: 'search',loadChildren: '../../application/search/search.module#SearchModule' },{ path: 'policy/:id',loadChildren: '../../application/policy/policy.module#PolicyModule' },{ path: 'claim/:id',loadChildren: '../../application/claim/claim.module#ClaimModule' },{ path: 'settings',loadChildren: '../../application/settings/settings.module#SettingsModule' }
];

@NgModule({
  imports: [
    CommonModule,RouterModule.forRoot(appRoutes)
  ],exports: [
    RouterModule
  ],declarations: []
})

export class RoutingModule { }

这工作正常,应用程序正确加载.这里的问题是,在SharedModule中,组件将使用routerLink将用户重定向到新页面.

shared.module.ts

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { CalendarModule } from 'primeng/calendar';
import { AgmCoreModule } from '@agm/core';
import { FroalaEditorModule,FroalaViewModule } from 'angular-froala-wysiwyg';
import { PdfViewerModule } from 'ng2-pdf-viewer';

// Internal Dependencies
import { MaterialModule } from '../../configuration/material/material.module';
import { RoutingModule } from '../../configuration/routing/routing.module';

import { NavbarTopComponent } from '../../application/shared/components/navbar-top/navbar-top.component';
import { NavbarSideComponent } from './components/navbar-side/navbar-side.component';
import { TemplateCardWComponent } from './components/template-card-w/template-card-w.component';
import { FilterPipe } from './pipes/filter.pipe';
import { StandardTableComponent } from './components/standard-table/standard-table.component';
import { OrderPipe } from '../shared/pipes/order.pipe';
import { ActionComponent } from './components/action/action.component';
import { GoogleMapComponent } from './components/google-map/google-map.component';
import { HtmlEditorComponent } from './components/html-editor/html-editor.component';
import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
import { KeyBindingPipe } from './pipes/key-binding.pipe';
import { StandardEditTableComponent } from './components/standard-edit-table/standard-edit-table.component';

@NgModule({
  imports: [
    CommonModule,CalendarModule,AgmCoreModule,FroalaEditorModule,FroalaViewModule,PdfViewerModule
  ],declarations: [
    NavbarTopComponent,NavbarSideComponent,TemplateCardWComponent,FilterPipe,StandardTableComponent,OrderPipe,ActionComponent,GoogleMapComponent,HtmlEditorComponent,PdfViewerComponent,KeyBindingPipe,StandardEditTableComponent
  ],exports: [
  ]
})

export class SharedModule { }

如您所见,我必须导入RouterModule.如果我删除了RouterModule,应用程序将加载但不重定向.如果我保留RouterModule,应用程序将导致问题顶部的错误.

任何人都可以帮我这个.

解决方法

我收到此错误是因为我不小心意外地将根AppModule导入了我的延迟加载模块.这导致在加载延迟加载的模块时再次调用根AppRoutingModule,因此两次调用RouterModule.forRoot.

如果您确定您没有两次调用RouterModule.forRoot,那么这可能是问题的原因.检查您是否未导入延迟加载模块中任何模块,该模块可直接调用RouterModule.forRoot或导入调用RouterModule.forRoot的模块.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读