APP-module.ts

Question

我正在尝试将Lazy Loading实现到我的应用程序中，但似乎遇到了一个问题，我收到了错误消息：

错误：RouterModule.forRoot（）调用两次。延迟加载的模块应该改为使用RouterModule.forChild（）。

所以我有我的主 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,
    MaterialModule,
    RoutingModule,
    FormsModule,
    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，那么应用程序将在问题的顶部引起错误。

有人可以帮我解决这个问题。

Answer 1

出现此错误是因为我不知何故将根AppModule导入了我的延迟加载模块。这导致在加载延迟加载的模块时再次调用根AppRoutingModule，因此RouterModule.forRoot被调用了两次。

如果确定您没有两次致电RouterModule.forRoot，则可能是造成此问题的原因。检查是否没有在延迟加载的模块中导入直接调用RouterModule.forRoot的模块或导入RouterModule.forRoot的模块。

Answer 2

代替

  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
     ],

使用

 imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
     ],

Answer 3

我也面对过这个问题，对于未来的人们，这是我的解决方案。

请勿在其他模块中导入 AppRoutingModule ，请导入 RoutingModule

将解决。这是一个例子。

import { RouterModule } from '@angular/router';

在导入数组中

  @NgModule({

 declaration: [], // your contents
 imports: [
  RouterModule,
  // Other modules
 ]
  })

Answer 4

在单独的延迟加载模块中，OverviewModule，SearchModule，PolicyModule，ClaimModule和SettingsModule是否在其中声明了路由？如果是这样，在每个的@NgModule中你有一个RouterModule.forRoot（）吗？它们应该是RouterModule.forChild（...）。听起来这可能是个问题。

Answer 5

我一直为此苦苦挣扎。终于找到了问题。

我正在使用延迟加载。即使我只在应用程序中的一个地方使用了.forRoot，该错误也表明我使用了两次。

事实证明，我是从懒加载的功能模块之一中的app.routing.ts文件导入AppRoutingModule的。我之所以这样做是因为它一直说它无法识别我在该功能模块的组件之一中使用过的routerLink。

解决方案是将功能模块中的AppRoutingModule导入替换为从“ @ angular / router”导入的RouterModule。现在一切正常。

PS-当我说功能模块时，是指我正在延迟加载的子模块。

Answer 6

当我错误地命名我的延迟加载模块的路由模块时出现此错误 AppRoutingModule。

我重命名以匹配模块名称，例如 StockRoutingModule 并已修复。

Answer 7

在子模块中使用RouterModule.forChild(routes)。喜欢这个文件../../application/overview/overview.module。

如果您有更多子模块，请使用RouterModule.forChild(yourarray)代替RouterModule.forRoot(yourarray)

Answer 8

我遇到了这个问题，因为我在懒加载的子模块中使用了RouterModule.forRoot(myRoutes)。应该是

@NgModule({
  imports: [ RouterModule.forChild(myRoutes) ], // changed forRoot with forChild
  exports: [ RouterModule ]
})

Answer 9

从

转换路由模块

$(function LoadData() {
            $("#LansingTable tbody tr").remove();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetResult")',
                dataType: 'json',
                data: JSON,
                success: function (data) {
                    $.each(data, function (item) {
                        var rows = "<tr><td>" + item.TravelDate + "</td><td>" + item.TripType + "</td></tr>";
                        $("#LansingTable tbody").append(rows);
                    });
                },
                error: function (ex) {
                    var r = jQuery.parseJSON(response.resonseText);
                    alert("Message: " + r.Message);
                }
            })
        });

到

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })

将解决错误

Answer 10

您不会将RouterModule导入到SharedModule中。您在那里导入RoutingModule。并且此模块使用RouterModule导入forRoot，这在延迟加载时被第二次调用。这会导致错误。

相反，如果需要重定向，则应直接导入RouterModule。

shared.module.ts

@NgModule({
  imports: [
  CommonModule,
  MaterialModule,
  RouterModule, /* NOT RoutingModule */
  FormsModule,
  CalendarModule,
  AgmCoreModule,
  FroalaEditorModule,
  FroalaViewModule,
  PdfViewerModule
],

Answer 11

在使用延迟加载时，我也面临着同样的情况。终于我找到了解决方法。

我从sharedModule中删除了“ routingModule”和“ routerModule”，并仅在相应的routing.module.ts文件中使用了routerModule。

Answer 12

在我的情况下，问题是我在功能模块中声明路由数组时忘记了添加类型，如果您确保未两次调用forRoot且两次都未导入AppRoutingModule，则可以检查基本像我犯的那样的错误。

它的定义是：

const feature_routes = [.....];

而不是：

const feature_routes : Routes = [.....];

RouterModule.forRoot调用了两次

APP-module.ts

APP-routing.ts

shared.module.ts

12 个答案: