路由不工作捆绑（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项目

回答

相关问题