バンドルされた（webpack）Angular 2プロジェクトのルーティングが機能しません

私は、単一のapp.bundle.jsファイルにwebpackされた2つのコンポーネント（AppComponentとテスター）を持つ簡単な角度アプリケーションを持っています。私の問題は、アプリケーションがバンドルされるとルーティングが機能しなくなることです。私はいくつかの異なる方法を試してみましたが、これは運がうまくいかないために助けてくれますか？私は束ねるとモジュールを経由してルーティングの言及を見てきましたが、私はむしろ、バンドルされた（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プロジェクトのルーティングが機能しません

答えて

関連する問題