В версии Angular 7 Lazy Loading не работает

Question

Я обновил свою версию Angular 6 до версии Angular 7. Теперь я получаю сообщение об ошибке, когда пытаюсь перейти к 'http://localhost:4200/pages'.. Я использую концепцию ленивого маршрута загрузки в своем приложении.

Ошибка: -

core.js: 12584 ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается найти модуль './Pages/Test/Test.module' Ошибка: не удается найти модуль "./Pages/Test/Test.module" в ленивом объекте пространства имен $ _lazy_route_resource: 5 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 388) в Object.onInvoke (core.js: 14143) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 387) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run (zone.js: 138) at zone.js: 872 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (core.js: 14134) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 420) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188) в ленивом объекте пространства имен $ _lazy_route_resource: 5 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 388) в Object.onInvoke (core.js: 14143) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 387) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run (zone.js: 138)

приложение-routing.ts

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

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
]

Подскажите, как решить эту ошибку.

Answer 1

Чтобы активно загружать модули со ссылкой на функцию, когда AOT включен для Angular 7, вам нужно создать модуль NgFactory, как вы можете видеть из этого PR - https://github.com/angular/angular/pull/13909.

Рабочим решением для меня было создание клона моего модуля и добавление .ngfactory постфикса к имени файла, а также добавление NgFactory постфикса к имени класса модуля.

import { FirstPageModuleNgFactory } from '../pages/first-page.module.ngfactory';
import { SecondPageModuleNgFactory } from '../pages/second-page.module.ngfactory';

export function loadFirstPageModule() {
    return FirstPageModuleNgFactory;
}

export function loadSecondPageModule() {
    return SecondPageModuleNgFactory;
}

const routes: Routes = [
    {
        path: '',
        component: HomePageComponent,
        children: [
            {
                path: '',
                redirectTo: 'first',
                pathMatch: 'full',
            },
            {
                path: 'first',
                loadChildren: loadFirstPageModule,
            },
            {
                path: 'second',
                loadChildren: loadSecondPageModule,
            },
        ],
    },
];

Answer 2

Я использую https://stackoverflow.com/a/53128336/5360463 но в режиме Prod я получаю эту ошибку

Рассмотрите возможность изменения выражения функции в экспортируемую функцию.

и я меняю код на

import { TestModule } from './Pages/test/test.module';

export function getTestModule() {
  return TestModule;
}

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 },
 {
  path: 'test',
  loadChildren: getTestModule
 }      
]

Answer 3

Для запусков вы должны всегда ставить пути, начинающиеся с самых ограничительных, сначала и, в конечном итоге, пути по умолчанию ... Тогда вы не поделились кодом модуля, мы можно только предполагать, что у вас есть готовый файл test-routing.module.ts , в котором правильно определяются компоненты, загружаемые при вызове / сопоставлении путей в этом модуле.

приложение-routing.module.ts

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

export const AppRoutes : Routes = [
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }, {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }      
]

тест-routing.module.ts

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

import { TestComponent } from "./test/test.component";

const routes: Routes = [
  {
    path: "",
    component: TestComponent
  }
];

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

Answer 4

Попробовав много изменений, я обнаружил, что мой app.routing.ts должен выглядеть так: -

import { TestModule } from './Pages/test/test.module';

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () =>  TestModule
 }      
]

После изменений это прекрасно работает для меня.