懒加载不编译Angular2 Webpack

Question

我试图使我的组件，以懒惰加载点击网址，但我得到一个错误的编译时间，并不能得到它是什么，请帮助。

我正在使用webpack捆绑这个应用程序。

我的AppModule

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
  NgModule,
  ApplicationRef
} from '@angular/core';

import {
  RouterModule,
  PreloadAllModules
} from '@angular/router';
import {CountDown} from "../../node_modules/angular2-simple-countdown/countdown";

/*
 * Platform and Environment providers/directives/pipes
 */
import { ENV_PROVIDERS } from './environment';

import { AppComponent } from './app.component';
import { CompetitionComponent } from './competition/competition.component';
import { CompetitionService } from './shared/competition.service';

import { routing } from './app.routing';
import { TeamComponent } from "./team/team.component";
import { TeamResolve } from "./team/team.resolve";
import { TableModule } from './table/table.module';


@NgModule({
  bootstrap: [ AppComponent],
  declarations: [
    AppComponent,CompetitionComponent,TeamComponent,CountDown
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    routing,
    TableModule
  ],
  providers:[CompetitionService,TeamResolve]
})
export class AppModule {

}

我的应用路由文件

import { Routes,RouterModule } from '@angular/router';

import { CompetitionComponent } from './competition/competition.component';
import { TeamComponent } from "./team/team.component";
import { TeamResolve } from "./team/team.resolve";


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component:  CompetitionComponent},
  { path: 'table', loadChildren:'app/table/table.module#TableModule'},
  { path: 'team', component: TeamComponent,resolve: {team: TeamResolve}  }
];

export const routing = RouterModule.forRoot(routes);

我的表模块

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

import { TableComponent } from './table.component';
import { KeysPipe } from "../shared/keys.pipe";
import { TableResolve } from "./table.resolve";
import { tableRouting } from "./table.routing";

@NgModule({
    declarations: [
    TableComponent,KeysPipe
  ],
  imports:[CommonModule,tableRouting],
  providers:[TableResolve]
})

export class TableModule{

}

我的表路由

import { Routes,RouterModule } from '@angular/router';

import { TableComponent } from './table.component';
import { TableResolve } from "./table.resolve";


const routes: Routes = [
  { path: '', component: TableComponent,resolve: {table: TableResolve} }
    ];

export const tableRouting = RouterModule.forChild(routes);

浏览器控制台上的StackTrace

Uncaught Error: Module build failed: Error: ng-router-loader - Invalid code generator "async-import"
    at Loader.replaceSource (D:\Angular2\Football\node_modules\src\Loader.ts:104:29)
    at Loader.replace (D:\Angular2\Football\node_modules\src\Loader.ts:66:22)
    at Object.loader (D:\Angular2\Football\node_modules\index.ts:1

Answer 1

好的，经过一番思考。我认为ng-router-loader中的问题可能与版本/破坏性更改有关。我建议做的是尝试在package.json中为所有的angular模块改变包版本。例如v2.4.0或v2.3.1。可能是个bug。

根据您当前的代码，这个问题无从谈起。除了错误消息之外，没有任何东西看起来是错误的。

PS:您没有使用angular-cli，您正在为您的angular应用程序使用哪些初学者工具包或项目？是你自己配置的吗？

Answer 2

有一个明显的错误：

ng-router-loader -无效的代码生成器"async-import“

您没有包含您的webpack配置，但是在它的TS加载器配置中，您需要为ng-router-loader设置代码生成器。

您设置为async-import，这仅在最新版本的ng-router-loader中受支持，因此请更新它或将其设置为async-require

以下是为TS文件设置加载器的方式：

        {
      test: /\.ts$/,
      use: [
        {
          loader: '@angularclass/hmr-loader',
          options: {
            pretty: !isProd,
            prod: isProd
          }
        },
        { // MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT.
          loader: 'ng-router-loader',
          options: {
            loader: 'async-import',
            genDir: 'compiled',
            aot: AOT
          }
        },
        {
          loader: 'awesome-typescript-loader',
          options: {
            configFileName: 'tsconfig.webpack.json'
          }
        },
        {
          loader: 'angular2-template-loader'
        }
      ],
      exclude: [/\.(spec|e2e)\.ts$/]
    },