使用Webpack進行Angular 2路由

我一直未能成功使Angular 2使用webpack生成的bundle加載子模塊。使用Webpack進行Angular 2路由

從main.ts開始生成一個應用程序包（bundle.js），該應用程序包通過我的主HTML文件中的腳本標記加載。 Angular應用程序開始於具有嘗試加載子模塊（HomeModule）的「主」路線的AppModule。當「家」路線的目標是組件時，沒有問題並且組件正確顯示。然而，我不知道如何正確指定路由目標作爲模塊。在下面的代碼中使用路由（在app.routes.ts中），我得到以下錯誤。

有人可以告訴我，我做錯了什麼嗎？

下面是相關的代碼。

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 {}

來源

2017-08-22 user3481798

嘗試刪除擴展 {path: 'home', loadChildren: './home/home.module#HomeModule'}

而且似乎也沒有<router-outlet>加載子路由。爲此製作一個組件。

像

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

]）;

HomeComponent將有router-outlet子路線

來源

2017-08-22 17:27:42 Rajez

使用Webpack進行Angular 2路由

回答

相關問題