Angular 2 routing mit Webpack

Question

Es ist mir nicht gelungen, Angular 2 Routing zu erhalten, um ein Submodul mit einem von Webpack erzeugten Bundle zu laden.

Es wird ein einzelnes Anwendungspaket (bundle.js) generiert, das bei main.ts beginnt und über ein Skript-Tag in meine Haupt-HTML-Datei geladen wird. Die Angular-App startet bei AppModule, die eine Home-Route hat, die versucht, ein untergeordnetes Modul (HomeModule) zu laden. Wenn das Ziel dieser Home-Route eine Komponente ist, gibt es kein Problem und die Komponente wird korrekt angezeigt. Ich kann jedoch nicht herausfinden, wie man das Routenziel als Modul korrekt spezifiziert. Mit der Route im Code unten (in app.routes.ts), bekomme ich den folgenden Fehler.

Kann mir bitte jemand sagen, was ich falsch hier?

Unten ist der entsprechende Code.

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var webpackMerge = require('webpack-merge'); 

var webpackConfig = { 
    entry: { 
     bundle: "./app/main.ts", 
     vendor: "./app/vendor.ts", 
     polyfills: "./app/polyfills.ts", 
     styles: "./css/app.less.css" 
    }, 

    output: { 
     publicPath: '/app/dist/bundles/', 
     path: path.resolve(__dirname, './dist/bundles'), 
    }, 

    plugins: [ 
     new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows 
      /angular(\\|\/)core(\\|\/)@angular/, 
      path.resolve(__dirname, './app'), // location of your src 
      { 
       // your Angular Async Route paths relative to this root directory 
      } 
     ), 
    ], 

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
        'awesome-typescript-loader', 
        'angular2-template-loader', 
        'angular-router-loader' 
       ] 
      }, 
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, 
      { test: /\.htm(l)*$/, loader: 'raw-loader' }, 
      { test: /\.(eot|svg|cur)$/, loader: "file-loader?name=[name].[hash:20].[ext]" }, 
      { 
       test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, 
       loader: "url-loader?name=[name].[hash:20].[ext]&limit=10000" 
      }, 
     ] 
    } 

}; 

var defaultConfig = { 
    devtool: 'source-map', 

    output: { 
     filename: '[name].js', 
     sourceMapFilename: '[name].map', 
     chunkFilename: '[id].chunk.js' 
    }, 

    resolve: { 
     extensions: [ '.ts', '.js' ], 
     modules: [ 
      path.resolve(__dirname, 'node_modules'), 
     ], 
    }, 
}; 

module.exports = webpackMerge(defaultConfig, webpackConfig); 

app.module.ts

import {NgModule} from "@angular/core"; 
import {LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from "@angular/common"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {RouterModule} from "@angular/router"; 
import {HttpModule} from "@angular/http"; 
import {AppRoutesModule} from './app.routes.module'; 
import {AppComponent} from "./app.component"; 
import HomeModule from "./home/home.module"; 

@NgModule({ 

    imports: [ 
     BrowserModule, 
     HttpModule, 
     RouterModule, 
     AppRoutesModule, 
     HomeModule 
    ], 

    declarations: [ 
     AppComponent, 
    ], 

    providers: [ 
     {provide: APP_BASE_HREF, useValue: '/'}, 
     {provide: LocationStrategy, useClass: HashLocationStrategy}, 
    ], 

    bootstrap: [ 
     AppComponent 
    ], 
}) 
export class AppModule { 
} 

app.routes.ts

import {NgModule} from "@angular/core"; 
import {Routes, RouterModule} from "@angular/router"; 
import {AppComponent} from "./app.component"; 

const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'home', loadChildren: './home/home.module.js#HomeModule'}, 
]; 

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

app.component.ts

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

@Component({ 
    selector: 'app', 
    template: ` 
     <div> 
      App Component 
      <router-outlet></router-outlet> 
     </div>`, 
}) 
export class App2Component {} 

home.module.ts

import {NgModule} from "@angular/core"; 
import {CommonModule} from "@angular/common"; 
import {routing} from './home.routes'; 
import {HomeViewComponent} from "./home-view.component"; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     routing 
    ], 
    declarations: [HomeViewComponent], 
    exports: [], 
    providers: [] 
}) 
export default class HomeModule {} 

home.routes.ts

import {ModuleWithProviders} from "@angular/core"; 
import {RouterModule} from "@angular/router"; 
import {HomeViewComponent} from "./home-view.component"; 

export const routing: ModuleWithProviders = RouterModule.forChild([ 
    {path: '', component: HomeViewComponent}, 
]); 

home.component.ts

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

@Component({ 
    selector: 'home-view', 
    template: `<div>Home View</div>` 
}) 
export class HomeViewComponent {} 

Answer 1

Versuchen Entfernen Erweiterung {path: 'home', loadChildren: './home/home.module#HomeModule'}

Und scheint auch kein <router-outlet> ist Kind Routen zu laden. Stellen Sie eine Komponente dafür her.

wie

export const routing: ModuleWithProviders = RouterModule.forChild([ 
{path: '', redirectTo: 'home', pathMatch: 'full'} 
{ 
    path: '', 
    component: HomeComponent 
    children: [ 
    {path: 'home', component: HomeViewComponent} 
] 
}, 

]);

HomeComponent wird die router-outlet für Kinder Routen haben