Question

我已将我的angular 6版本更新为angular 7版本。现在，当我尝试导航到“ http://localhost:4200/pages”时遇到错误。我在应用程序中使用了延迟加载路由概念。

错误：-

core.js：12584错误错误：未捕获（承诺）：错误：找不到模块'./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）在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）

app-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

尝试了许多更改之后，我发现我的app.routing.ts应该是这样的：-

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

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

更改后，此设置非常适合我。

Answer 2

我使用https://stackoverflow.com/a/53128336/5360463 但在生产模式下会出现此错误

考虑将函数表达式更改为导出的函数。

然后我将代码更改为此

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 文件，该文件正确定义了当该模块中的路径被调用/匹配时要加载的组件。

app-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',
 }      
]

test-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

为了在为Angular 7启用AOT时急切地加载带有功能引用的模块，您需要创建一个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 5

已接受的答案是错误的，应该将其删除，因为它具有误导性，并且在采用时可能导致意外的行为和性能问题。问题在于，一旦您像import { TestModule } from './Pages/test/test.module';一样导入模块（代码中的第一行），该模块将直接（急切地）加载。不管您提供给loadChildren的是什么。

请在下面查看正确的方法：

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: '/test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () => import('./Pages/test/test.module').then(mod => mod.TestModule)
  }      
]

像这样，仅当调用loadChildren中提供的函数时才导入（加载）模块，只有在导航到/test时才会发生。如您所见，我从代码开头删除了初始导入import { TestModule } from './Pages/test/test.module';。

希望这会有所帮助！

-伊万

在Angular 7版本中，延迟加载不起作用

app-routing.ts

5 个答案: