Jhipster Angular 2 Lazy Loading Module Not found E

问题:

I created the Jhipster application and try to add the lazy loading module, which give the module not found exception.

I follow the "https://jaseb.github.io/angular2-example/" article but still the same exception. I try myself. Please help me us to proceed further.Please find the code snippets as follows.

app.route.ts

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {NavbarComponent} from "./layouts/navbar/navbar.component";

export const routes: Routes = [
    { path: '', component: NavbarComponent, outlet: 'navbar'},
    { path: 'lazy', loadChildren: 'app/modules/lazy/lazy.module#LazyModule' }
];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {
}

回答1:

First you must install webpack plugin angular-router-loader

npm install angular-router-loader --save-dev

then in your project directory open webpack/webpack.common.js and add angular-router-loader after awesome-typescript-loader like below

loaders: [
'angular2-template-loader',
'awesome-typescript-loader',
'angular-router-loader' // here
]

path should be without app prefix

{ path: 'lazy', loadChildren: './modules/lazy/lazy.module#LazyModule' }

回答2:

I was having a similar issue with lazy loading working in a straight angular app. I compared a working app with mine and noticed that I did not have "baseUrl": "./" in my tsconfig.spec.json nor my tsconfig.app.json. Once I added it it started working.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",  **<-- this was missing**
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Hope this helps