RouterModule.forRoot () вызывается дважды - PullRequest
Новая
       11

RouterModule.forRoot () вызывается дважды

0 голосов
/ 21 мая 2018

Я пытаюсь внедрить lazyloading в мое приложение angular 5, но получаю ошибку:

Uncaught (в обещании): Ошибка: RouterModule.forRoot () вызывается дважды.Вместо этого загруженные модули должны использовать RouterModule.forChild ().

Там мои модули маршрутизации: app-routing.module.ts 

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

// import Commponents for router

import { MainPageComponent } from "../pages/main/main-page.component";
import { AboutCompanyPageComponent } from "../pages/about-company/about-company-page.component";
import { MediaPageComponent } from "../pages/media/media-page.component";
import { ChangePasswordComponent } from "../components/change-password/change-password.component";
import { ConfirmOrderComponent } from "../pages/confirm-order/confirm-order.component";
import { NoConnectionComponent } from "../pages/no-connection/no-connection.component";
import { NotFoundComponent } from "../pages/not-found/not-found.component";
import { SearchComponent } from "../pages/search/search.component";
import { PaymentComponent } from "../pages/payment/payment.component";
import { WorkersGeoLocationComponent } from "../pages/workers-geo-location/workers-geo-location.component";
import { AdminProfileModule } from "../modules/admin-profile/admin-profile.module";

const routes: Routes = [
    {
        path: "",
        component: MainPageComponent
    },
    {
        path: "about",
        component: AboutCompanyPageComponent
    },
    {
        path: "payment",
        component: PaymentComponent
    },
    {
        path: "media",
        component: MediaPageComponent
    }, {
        path: "profile/workersGeoLocation",
        component: WorkersGeoLocationComponent
    },
    {
        path: "admin",
        loadChildren: '../modules/admin-profile/admin-profile.module#AdminProfileModule'
        // loadChildren: () => AdminProfileModule
    },
    {
        path: "password/recovery",
        component: ChangePasswordComponent
    },
    {
        path: "search",
        component: SearchComponent
    },
    {
        path: "confirm",
        component: ConfirmOrderComponent
    },
    {
        path: "no-connection",
        component: NoConnectionComponent
    },
    {
        path: "**",
        component: NotFoundComponent
    }
];

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

Там я использую forRoot () метод для RouterModule.

Во втором модуле, который должен быть загружен с отложенным доступом, я использую метод forChild (),

Там есть некоторый код: 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { OrdersTabComponent } from "../../components/tabs/orders-tab/orders-tab.component";

const routes: Routes = [
    {
        path: '',
        component: OrdersTabComponent
    }
];

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

export class AdminRoutingModule { }

И, как вы можете видеть, есть толькодва модуля с отдельными методами для RouterModule, и я не могу понять, где ошибка.

Кто-нибудь может мне помочь с этим?

1 Ответ

0 голосов
/ 21 мая 2018

// вы должны использовать, как показано ниже, используя правильный путь дочернего модуля 

          import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy ,LocationStrategy } from '@angular/common';

import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import { NotFoundComponent } from './not-found/not-found.component';
import { IndexComponent } from './index/index.component';

const routes: Routes = [
{ path: "",    component: IndexComponent},
{ path: "admin", loadChildren: "app/admin/admin-layout/admin-layout.module#AdminLayoutModule" },
{ path: "**",    component: NotFoundComponent }
];
@NgModule({
  imports: [ RouterModule.forRoot(
      routes,
      { preloadingStrategy: SelectivePreloadingStrategy }
  )],
  exports: [ RouterModule ],
  providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy },
  ]
})
export class AppRoutingModule {}
...