Ответ 1

loadChildren должен ссылаться на модуль с маршрутизацией

Назначив значение свойства loadChildren внутри маршрута, вам необходимо обратиться к модулю, в котором реализована система маршрутизации. Другими словами, ссылайтесь только на модуль, который импортирует RoutingModule и настраивает его с помощью метода forChild (routes).

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// import { CommonModule } from '@angular/common';
/* ---------------  !System modules  --------------- */

import { SharedModule } from 'sharedModule';   //There is  a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it
/* ---------------  !App outer modules  --------------- */


import { EncountersComponent } from './encounters.component';
// import { PassCodeComponent } from '../../shared/components/passcode/passcode.component';

export const encountersModuleRoutes: Routes = [
  /* configure routes here */
];


@NgModule({
  imports: [ SharedModule, RouterModule.forChild(encountersModuleRoutes) ],
  declarations: [ EncountersComponent],
  exports: [ EncountersComponent ],
})


export class EncountersModule {  }

Ответ 2

Я не уверен, потому что это явно не упомянуто в документации (2.4.2), но из примеров в руководствах "Угловые модули" и "Маршрутизация и навигация" я привел следующую схему:

• Ленивый модуль должен иметь свой собственный модуль маршрутизации.
• Массив маршрутов, определенный в "lazy-routing.module", должен иметь один элемент; свойство path этого элемента должно быть пустой строкой; свойство component должно быть определено (необходимо, когда ленивый модуль предоставляет какую-либо услугу, чтобы инъекция работала хорошо), и шаблон ссылочного компонента должен иметь элемент с директивой <router-outlet>. Этот маршрут обычно имеет свойство children.
• Значение свойства path ленивого маршрута, определенного в "app-routing.module" (в моем примере "lazyModulePrefix"), будет префиксом всех путей, определенных в ".lazy-routing.module".

Например:

///////////// app-routing.module.ts /////////////////////
import { NgModule  } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found.component';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'lazyModulePrefix', loadChildren: 'app/lazyModulePath/lazy.module#LazyModule' }, // 
  { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent },
];

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

,

///////////// lazy-routing.module.ts /////////////////////
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyModuleRootComponent } from './lazy-module-root.component';
import { LazyModuleHomeComponent } from './lazy-module-home.component';
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';

const lazyModuleRoutes: Routes = [ // IMPORTANT: this array should contain a single route element with an empty path. And optionally, as many children as desired.
    { path: '',
      component: LazyModuleRootComponent, // the 'component' property is necessary when the lazy module provides some service in order to injection work well. If defined, the referenced component template should have an element with the '<router-outlet>' directive.
      children: [ 
        { path: '', component: LazyModuleHomeComponent }, // this component has no diference with the other children except for the shorter route.
        { path: 'somePath1', component: AComponentDeclaredInTheLazyModule1 },
        { path: 'somePath2', component: AComponentDeclaredInTheLazyModule2 },
    ] } 
];

@NgModule({
    imports: [RouterModule.forChild(lazyModuleRoutes)],
    exports: [RouterModule]
})
export class LazyRoutingModule { }

,

//////////////////// lazy.module.ts ////////////////////
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedModule } from '../shared/shared.module';
import { LazyRoutingModule } from './lazy-routing.module';
import { LazyModuleRootComponent } from './lazy-module-root.component';
import { LazyModuleHomeComponent } from './lazy-module-home.component';
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        LazyRoutingModule,
    ],
    declarations: [
        LazyModuleRootComponent,
        LazyModuleHomeComponent,
        AComponentDeclaredInTheLazyModule1,
        AComponentDeclaredInTheLazyModule2,
    ]
})
export class LazyModule { }

,

//////////////// lazy-module-root.component.ts //////////////////
import { Component } from '@angular/core';

@Component({
    template: '<router-outlet></router-outlet>'
})
export class LazyModueRootComponent { }

С помощью приведенного выше кода отображение маршрутов будет:

http://host/login → LoginComponent

http://host/lazyModulePrefix → LazyModuleHomeComponent

http://host/lazyModulePrefix/somePath1 → AComponentDeclaredInTheLazyModule1

http://host/lazyModulePrefix/somePath2 → AComponentDeclaredInTheLazyModule2

http://host/ everythingElse → PageNotFoundComponent

Ответ 3

Попробуйте удалить комментарии. Когда я обновил свой маршрутизатор до текущего в приложении, над которым я работал, я прокомментировал кучу вещей из старого маршрутизатора, потому что я не хотел его потерять. После удаления комментариев некоторые странные ошибки исчезли.

Ответ 4

Я столкнулся с той же проблемой, и у меня все было правильно. Следующее сработало для меня

1. Остановить угловой сервер
2. Запустите сервер снова с помощью ng serve

Он снова начал работать спонтанно. Сначала убедитесь, что у вас все правильно, как указано в других ответах, а затем попробуйте это.

Ответ 5

один из глупых случаев, с которыми я столкнулся, - перезапустить проект 🤦‍♂️

Ответ 6

Выше ответы хороши. Проверьте ваш импорт - возможно, вы забыли импортировать модуль. Вы также можете проверить версию своего пакета машинописного текста. В моем случае в Angular 5 у меня было предупреждение в CLI:

@angular/compiler-cli @5.2.11 требует машинописного текста @'> = 2.4.2 <2.5.0', но вместо него был найден 2.5.3. Использование этой версии может привести к неопределенному поведению и затруднить отладку. Пожалуйста, выполните следующую команду, чтобы установить совместимую версию TypeScript.

npm install [email protected]'>=2.4.2 <2.5.0' --save

Это также может сделать ошибки.