延迟加载未编译Angular2网页包

我试图让我的组件在点击Url时惰性地加载，但是我在编译时遇到了一个错误，无法得到它是什么，请帮助

我正在使用webpack捆绑此应用程序

我的应用程序模块

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

---

好吧，想了想。我认为ng router loader中的问题可能与版本/中断更改有关。我建议您尝试在package.json中为所有angular模块更改包版本。例如v 2.4.0或v2.3.1。这可能是一只虫子

根据您当前的代码，无法对问题进行说明。除了错误消息外，没有其他错误

---

PS：您没有使用angular cli，您正在为angular应用程序使用什么初学者工具包或项目？您自己配置了webpack吗？

好的，想一想。我认为ng router loader中的问题可能与版本/中断更改有关。我建议您尝试在package.json中为所有angular模块更改包版本。例如v 2.4.0或v2.3.1。这可能是一只虫子

根据您当前的代码，无法对问题进行说明。除了错误消息外，没有其他错误

---

PS：您没有使用angular cli，您正在为angular应用程序使用什么初学者工具包或项目？您自己配置了webpack吗？

有一个明显的错误：

ng路由器加载程序-无效的代码生成器“异步导入”

您没有包括您的网页包配置，但在其中，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$/]
    },

---

有一个明显的错误：

ng路由器加载程序-无效的代码生成器“异步导入”

您没有包括您的网页包配置，但在其中，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$/]
    },

---

你能提供plunker的工作示例吗？对不起，我的公司网络中禁用了plunker这样的伙伴吗？你能提供plunker这样的伙伴吗？对不起，我的公司网络中禁用了plunker这样的伙伴吗？不，我正在使用git的angular 2 starter pack使其工作，更改为starter pack的最新版本，谢谢我用的是git的angular 2入门包，我已经开始使用了，改成了入门包的最新版本，谢谢