Question

我正在尝试让我的组件在点击Url时懒得加载但我在编译时遇到错误而无法获得它的帮助。

我使用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中为所有角度模块改变包版本。例如。 v 2.4.0或v2.3.1。这可能是一个错误。

根据您当前的代码，没有任何关于此问题的说法。除了错误消息之外什么都看错了。

PS：您没有使用angular-cli，您使用的角度应用程序是什么入门套件或项目？你自己配置了webpack吗？

Answer 2

有一个明显的错误：

ng-router-loader - 无效的代码生成器＆＃34; async-import＆＃34;

您没有包含您的webpack配置，但在其中，在TS loader配置所在的位置，您需要为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$/]
    },

延迟加载不编译Angular2 Webpack

2 个答案: