typescript - Laiska lataaminen Angular2 RC7:ssä ja angular-cli webpackissa

Olen luonut uuden sovelluksen käyttäen ng new, mutta kun yritän määrittää moduulin latautumaan laiskasti, saan jatkuvasti virheilmoituksen, että moduulia ei voida löytää.

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
  • solmu: 6.5.0
  • käyttöjärjestelmä: win32 x64

app.reititys.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>

Olen varma, että olen unohtanut jotain tyhmää, mutta olen kokeillut erilaisia vaihtoehtoja eikä mikään ole toiminut tähän mennessä. Ottaen huomioon kokoonpanoni, olenko unohtanut jotain?

Kiitos etukäteen, Stephen

Vastaus #1

RC7:n avulla voit tehdä seuraavasti:

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

Älä unohda "#"

Sitten lopeta ng serve ja käynnistä se uudelleen

Se toimii angular-cli@webpackin kanssa

P.S: Angularin käytäntönä on lisätä laiskaan ladattaviin kansioihin etuliite (+), esimerkiksi +home/

Vastaus #2

Ongelmaa ei enää esiinny RC7:ssä.

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

toimii.

Käyttämäsi mekanismi perustuu edelleen systemjs:ään. En saanut sitä toimimaan webpackin kanssa käyttäen "path#class"-syntaksia. Joten requiremme moduulin suoraan:

Ensiksi tarvitsemme es6-promise-loaderin:

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

Sitten määrittele reittisi näin:

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

es6-promise-loader korvaa yllä olevan tällä:

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

mikä on oikea tapa ladata moduuli webpackilla, mutta työlästä laittaa jokaiselle reitille.

Aiheeseen liittyviä artikkeleita