Routing funktioniert nicht für gebündelt (Webpack) Angular 2 Projekt

Ich habe eine einfache eckige Anwendung mit 2 Komponenten (AppComponent und Tester), die in einer einzigen app.bundle.js Datei webpacked sind. Mein Problem ist, dass sobald die App gebündelt ist, das Routing nicht mehr funktioniert. Ich habe ein paar verschiedene Methoden ausprobiert, die ich online gesehen habe, um das ohne Erfolg zu schaffen. Kann mir jemand helfen? Ich habe erwähnt, Bündelung und Routing über Module zu sehen, aber ich würde lieber das gesamte Winkel Projekt als eine einzige Datei halten, wenn möglichRouting funktioniert nicht für gebündelt (Webpack) Angular 2 Projekt

<!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', 
    {} 
), 
    ], 
};

Quelle

2017-08-14 Welsh Watson

Die Vorlage benötigt einen Platzhalter (Routeroutlet) für zu ladende Router-Komponenten. Ich glaube, Sie vermissen

<router-outlet> </router-outlet>

Quelle

2017-08-14 17:31:37 Jay

Also sollte ich eine Komponente für Bootstrap haben, und laden Sie andere geroutete Komponenten innerhalb dieser? –

Zusätzlich würde 'AppComponent' bereits über' bootstrap' Funktion geladen werden. Sie sollten nicht daran denken, 'AppComponent' basierend auf der Route zu laden, da die Vorlage einen' Router-outlet' Platzhalter hat –

Routing funktioniert nicht für gebündelt (Webpack) Angular 2 Projekt

Antwort

Verwandte Themen