Routing-Problem nach der Bündelung mit Webpack

Question

Ich bündle angular2 Anwendung. Das Routing funktioniert im Dev-Server-Modus sehr gut. Wenn ich die Anwendung jedoch mithilfe der folgenden Webpack-Konfiguration auf dem Tomcat-Server bereitstellen möchte, funktioniert das Routing nicht. Auch ich kann nicht über direkte URL auf die Seite zugreifen. Zum Beispiel wollte ich über http://localhost:8080/test/search auf eine bestimmte Seite zugreifen (wenn Sie sich app.routing.ts ansehen, AppComponent-Maps durchsuchen und die generierten .js-Dateien im Testverzeichnis in Webapps ablegen), aber es zeigt den HTTP-Status 404 an Zugriff auf die Suchseite nur über den Link auf der Willkommensseite. Wenn jemand davon weiß, bitte geben Sie einen Rat.

webpack.common.js

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

webpack.prod.js

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
    path: helpers.root('dist'), 
    publicPath: './', 
    filename: '[name].[hash].js', 
    chunkFilename: '[id].[hash].chunk.js' 
    }, 

    htmlLoader: { 
    minimize: false // workaround for ng2 
    }, 

    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
     mangle: { 
     keep_fnames: true 
     } 
    }), 
    new ExtractTextPlugin('[name].[hash].css'), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'ENV': JSON.stringify(ENV) 
     } 
    }) 
    ] 
}); 

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { MainComponent } from './main.component'; 
import { LoginComponent } from './login.component'; 
import { LogoutComponent } from './logout.component'; 
import { AppComponent } from './app.component'; 
import { WelcomeComponent } from './welcome.component'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'logout', component: LogoutComponent }, 
    { path: '', component: WelcomeComponent }, 
    { path: 'search', component: AppComponent }, 
    { path: '**', redirectTo: '' } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

welcome.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'welcome-app', 
    template: ` 
    <hr> 
    <nav class="navbar navbar-light bg-faded"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
    <a class="nav-link" [routerLink]="['login']" routerLinkActive="active">Sign In </a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" [routerLink]="['search']" routerLinkActive="active">Search</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" [routerLink]="['logout']" routerLinkActive="active">Sign Out</a> 
    </li> 
    </ul> 
    </nav> 
    <hr> 
    ` 
}) 

export class WelcomeComponent { } 

Answer 1

Dies ist kein Webpack oder ein Verpackungsproblem. Es ist ein Konfigurationsproblem in Tomcat (oder einem anderen Webserver).

Weil/test/Suche nicht aktuell ist, vorhandene Seite, haben Sie die Einrichtung Ihres Web-Server zu routen, alle Anfragen unter Ihrer Angular App auf die Winkelindexseite. Dies kann mit der .htaccess-Datei im Apache- oder URL-Rewrite-Modul (sowohl auf Apache als auch auf IIS) erreicht werden. Es sieht so aus, als ob Tomcat ein ähnliches Modul hat. Sehen Sie sich ihre docs hier: https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html

Answer 2

Nur ein Gedanke

In Ihrem package.json sind Ihre webpack und Winkel unter Abhängigkeiten oder devdependencies

könnte erklären, es nur für Dev arbeiten und nicht Prod