路由不工作捆綁（webpack）Angular 2項目

我有一個簡單的角度應用程序與2個組件（AppComponent和測試器），這是webpacked到一個app.bundle.js文件。我的問題是，一旦應用程序捆綁在一起，路由不再起作用。我嘗試了幾種不同的方法在網上看到這個工作沒有運氣，任何人都可以幫忙嗎？我已經看到了捆綁，並通過路由模塊提及，但我寧願保持整個項目的角度作爲一個單一的文件，如果可能的路由不工作捆綁（webpack）Angular 2項目

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Routing webpack test</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="slate.css"> 
    </head> 
    <my-app>Loading...</my-app> 
    <body> 
    <script type="text/javascript" src="app.bundle.js"></script> 
    </body> 
</html>

app.component.ts

import { Component, Input, Output } from '@angular/core'; 
import { Route } from "@angular/router"; 
@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello world</h1>` 
}) 
export class AppComponent {}

app.module。 TS：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule, Routes } from '@angular/router'; 
import { AppComponent } from './app/app.component' 
import { tester } from './app/test.component'; 

const appRoutes: Routes = [ 
    { 
    path: '', 
    component: AppComponent 
    }, 
    { 
    path: 'test', 
    component: tester 
    }, 
    { 
    path: 'myapp', 
    component: AppComponent 
    }, 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes,{ enableTracing: true }), 
    BrowserModule, FormsModule], 
    exports: [RouterModule], 
    declarations: [AppComponent, tester ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

webpack.config.js：

var webpack = require('webpack'); 
var HtmlWebpack = require('html-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var CompressionPlugin = require('compression-webpack-plugin'); 

module.exports = { 

    entry: [ 
    __dirname + '/src/main.ts' 
    ], 
    output: { 
    path: __dirname + '/src/dist', 
    filename: 'app.bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['ts-loader', 'angular2-template-loader', 'angular2-router- loader'] 
     }, 

    ] 
    }, 
    resolve: { 
    extensions: ['.js', '.ts'] 
    }, 
    plugins: [ 
    new HtmlWebpack({ 
     template: './src/index.html' 
    }), 
    new CopyWebpackPlugin([ 
     { from: './src/slate.css' } 
    ]), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify('') 
    } 
    }), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new CompressionPlugin({ 
    asset: "[path].gz[query]", 
    algorithm: "gzip", 
    test: /\.js$|\.css$|\.html$/, 
    threshold: 10240, 
    minRatio: 0.8 
    }), 
    new webpack.ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)@angular/, 
    './src', 
    {} 
), 
    ], 
};

來源

2017-08-14 Welsh Watson

該模板需要佔位符（routeroutlet）用於裝載路由器組件。我想你是缺少

<router-outlet> </router-outlet>

來源

2017-08-14 17:31:37 Jay

所以我應該有一個引導組件，並在其中加載其他路由組件？ –

除此之外'AppComponent'會通過'bootstrap'函數加載。您不應該考慮基於路由加載AppComponent，因爲它的模板將具有'router-outlet'佔位符 –

路由不工作捆綁（webpack）Angular 2項目

回答

相關問題