typescript - Pemuatan malas di Angular2 RC7 dan angular-cli webpack

Saya telah membuat aplikasi baru menggunakan ng new tetapi ketika saya mencoba mengonfigurasi modul untuk dimuat menggunakan lazy loading, saya terus mendapatkan kesalahan bahwa modul tersebut tidak dapat ditemukan.

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.9-4",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
  • angular2 RC7
  • angular-cli: 1.0.0-beta.11-webpack.9-4
  • node: 6.5.0
  • os: win32 x64

app.routing.ts:

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

const appRoutes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
{
    path: `home`,
    loadChildren: `app/home/home.module`
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

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

import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
     AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.html

<router-outlet></router-outlet>

Saya yakin saya melewatkan sesuatu yang konyol tetapi saya telah mencoba berbagai opsi dan sejauh ini tidak ada yang berhasil. Mengingat konfigurasi saya, apakah saya melewatkan sesuatu?

Terima kasih sebelumnya, Stephen

Jawaban #1

Dengan RC7, Anda dapat melakukan sebagai berikut:

const appRoutes: Routes = [
  {
    path: 'home',
    loadChildren: 'app/home/home.module#HomeModule',
  }
];

Jangan lupa "#"

Lalu hentikan ng serve dan jalankan lagi

Ini akan bekerja dengan angular-cli@webpack

P.S: Konvensi Angular adalah memberi awalan (+) pada folder yang dimuat secara malas misalnya +home/

Jawaban #2

Masalah ini tidak ada lagi di RC7.

{path:"lazy", loadChildren: 'app/path/to/module#Class'}

akan bekerja.

Mekanisme yang Anda gunakan masih berbasis systemjs. Saya tidak bisa membuatnya bekerja dengan webpack menggunakan sintaks "path#class". Jadi kita require modulnya secara langsung:

Pertama kita akan membutuhkan es6-promise-loader:

npm i --save-dev es6-promise-loader

Kemudian definisikan rute Anda seperti ini:

{path:"lazy", loadChildren: () => require('es6-promise!./path/to/module')('ClassName')}

es6-promise-loader menggantikan yang di atas dengan ini:

loadChildren: () => new Promise(function (resolve) {
        require.ensure([], function (require) {
          resolve(require('./path/to/module')['ClassName']));
        });
      });

yang merupakan cara yang tepat untuk memuat modul dengan webpack, tetapi merepotkan untuk dimasukkan ke setiap rute.

Artikel terkait