加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular-cli路由器延迟加载

发布时间:2020-12-17 17:27:53 所属栏目:安全 来源:网络整理
导读:我正在尝试运行一个示例Web应用程序来了解Angular模块的延迟加载是如何工作的.我通过使用角度2.4.1的angular-cli 1.0.0-beta.24生成了应用程序.我生成了核心应用程序,然后是3个组件.然后我在应用程序级别添加了路由,并通过将组件导入app模块直接引用前两个组
我正在尝试运行一个示例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环境下失败.

解决方法

更改你的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的延迟加载应该工作.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读