Question

我正在尝试运行示例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没有处理延迟加载。我已经尝试了＆＃34; loadChildren＆＃34;的各种路径变体。电话包括：

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.我确定那里有一个线索，但我对网络包装并不是很了解，以及它在找到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环境下失败。

Answer 1

更改你的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的延迟加载应该有效。

Answer 2

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

以下是我们工作的示例（我们所有的懒惰组件都位于+ lazy文件夹中）：

<?php

try
{

    $input=$_POST['txtInput'];
    $wsdl='http://localhost/Search.wsdl';
    $options=array('cache_wsdl'=>WSDL_CACHE_NONE,'features'=>SOAP_SINGLE_ELEMENT_ARRAYS);


    echo "hi1";

    $client=new SoapClient($wsdl,$options);
    echo "hi2";

    $response=$client->viewHealth($input);
    echo "hi3";
    if(isset($response->Health))
    {

        $HTMLDocument="<!Doctype html>
        <html>
         <head>
          <title>Health</title>
          <link rel='stylesheet' type='text/css' href='style.css'/>
         </head>
         <body>

           <table border='2'>
            <thead>
             <tr id='tabs'>
              <th>Title</th>
              <th>Description</th>
              <th>Symptoms</th>
              <th>Treatments</th>
             </tr>
            </thead>
            <tbody>";
        foreach($response->Health as $record)
        {
            $HTMLDocument.="<tr><td>".$record->Title."</td>";
            $HTMLDocument.="<td>".$record->Description."</td>";
            $HTMLDocument.="<td>".$record->Symptoms."</td>";
            $HTMLDocument.="<td>".$record->Treatments."</td></tr>";
        }
        $HTMLDocument.="</tbody></table></body></html>";
        echo $HTMLDocument;
    }
    else
    { }

}

我们使用angular cli w / webpack。

此外 - 您的懒人页面的routerLink是什么样的？

我们的：

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

请注意＆＃34;懒惰＆＃34;标签是什么击中主路由器。 App.router然后查找惰性模块的路径，然后传入＆＃34; page32＆＃34;部分到懒惰的路由器。

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

routerLink: ['omfpages/lazy/page32']

Answer 3

使用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);

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

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


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

Answer 4

尝试更改您的路线 const路线：路线= [

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
}, 
{    
        path: 'home',
    component: HomeComponent
},

 {
    path: 'job-details/:id',
    component: JobDetailsComponent
},

];

angular-cli路由器延迟加载

4 个答案: