angular-cli路由器延迟加载-Java 学习之路

我正在尝试运行一个示例Web应用程序来了解Angular模块的延迟加载是如何工作的 . 我通过使用角度2.4.1的angular-cli 1.0.0-beta.24生成了应用程序 . 我生成了核心应用程序，然后是3个组件 . 然后我在应用程序级别添加了路由，并通过将组件导入app模块直接引用前两个组件 . 对于第三个组件，我只是使用Angular routing docs中指定的loadChildren方法添加路由 . 我对主应用程序的路由配置如下：

const appRoutes: Routes  = [
    { path: 'comp1', component: Comp1Component},
    { path: 'comp2', component: Comp2Component},
    { path: 'comp3', loadChildren: 'app/comp3/comp3.module'}
];

export default RouterModule.forRoot(appRoutes);

我将第三个组件的代码转换为模块，并将所有从应用程序导入到第三个组件 . 该模块的路由配置如下：

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

export default RouterModule.forChild(routes);

当我运行应用程序时，Comp1和Comp2的路由工作正常，当我单击Comp3的链接（模块路由）时，我将以下错误记录到控制台：

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'.
Error: Cannot find module './comp3/comp3.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular]

似乎webpack没有处理延迟加载 . 我已尝试过“loadChildren”调用的各种路径变体，包括：

loadChildren: 'app/comp3/comp3.module#Comp3Module'

没有改变行为（仍然得到上面的错误） . angular2的新功能可能是我的代码中的内容，但我看到其他人得到了相同的错误 . 我的google / stackoverflow foo没有引导我找到解决方案 . 我添加了sample app to my Github account here .

I saw this issue logged by another developer with the Angular team but they kicked it as a support issue to StackOverflow because the sample worked on plunkr.我真的非常了解webpack以及它正在做些什么来找到应用程序的plunkr与ng服务运行之间的差异 .

添加其他信息 . 该应用程序的html模板如下所示(also available on github repo)：

<h1>
    {{title}}
 </h1>
 <ul>
    <li><a class="nav-link" routerLink="/comp1" routerLinkActive="active">Component 1</a></li>
    <li><a class="nav-link" routerLink="/comp2" routerLinkActive="active">Component 2</a></li>
    <li><a class="nav-link" routerLink="/comp3" routerLinkActive="active">Component 3</a></li>
  </ul>
  <p></p>
  <router-outlet></router-outlet>

我复制了这个应用程序的源代码树（从src / app下来）到angular2 seed project，并且有一些小的预期tweek，它在那里运行正常并且在angular-cli设置的环境中继续失败 . 我对TS源的唯一更改是使用相对路径：

{ path: 'comp3', loadChildren: './comp3/comp3.module#Comp3Module'}

对于loadChildren调用 . 我更改了我的Github示例代码以反映此更新，但它仍然在angular-cli环境下失败 .

3 回答

您是否尝试过为延迟加载的组件指定完整路径？

下面是我们工作的一个例子（我们所有的懒惰组件都放在懒惰的文件夹中）：

{ path: 'lazy', loadChildren: './omfpages/+lazy/lazy.module#LazyModule' }], canActivate: [AuthGuard] }

我们使用angular cli w / webpack .

此外 - 您的路由器链接到懒惰页面是什么样的？

OURS：

routerLink: ['omfpages/lazy/page32']

请注意，“懒惰”标签是主要路由器的标签 . App.router然后查找延迟模块的路径，然后将“page32”部分传递给惰性路由器 .

下面是我们的懒惰路由器：

...
const routes: Routes = [
  { path: 'page30', component: Page30Component, data: { title: 'Fun     Page'} },
  { path: 'page31/:id', component: Page31Component, data: { title:     'Another Page'} },     // <-- this route requires a param to be passed.
  { path: 'page32', component: Page32Component, data: { title: 'Some Page'} }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

回复于 2024-04-19T01:45:35+08:00

使用loadChildren路由的另一种方法如下：

在你的 app.route.ts 使用

// have to be export modules to handle the lazy loading routing
export function loadExampleModuleOne() {  return ExampleModuleOne } 
export function loadExampleModuleTwo() { return ExampleModuleTwo }

然后在你的路由后你需要使用如下：

const APP_ROUTE: Routes = [
  {
    path: '',
    redirectTo: 'example-one',
    pathMatch: 'full'
  },
  {
    path: 'example-one',
    loadChildren: loadExampleModuleOne
  },
  {
    path: 'example-two',
    loadChildren: loadExampleModuleTwo
  }
];

export const AppRouting = RouterModule.forRoot(APP_ROUTE);

然后在 app.module.ts 中使用 AppRouting 常量，如：

import {AppRouting} from './app.routing';


@NgModule({
   import: [
     AppRouting
   ]
})
export class AppModule() {
}

回复于 2024-04-19T01:45:35+08:00

更改你的comp3.routes.ts：

export default RouterModule.forChild(routes);

至：

export const comp3Routing = RouterModule.forChild(routes);

在你的comp3.module.ts替换：

import comp3Routes from "./comp3.routes";

至：

import { comp3Routing } from "./comp3.routes";

最后导入comp3Routing，所以看起来应该是这样的：

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        comp3Routing,
    ],
    declarations: [
        Comp3Component
    ],
    exports: [
        Comp3Component
    ],

    providers: [],
})
export class Comp3Module { }

你的comp3的延迟加载应该工作 .

回复于 2024-04-19T01:45:35+08:00

angular-cli路由器延迟加载

3 回答

相关问题