webpackとのバンドル後のルーティングの問題

Question

私はangular2アプリケーションをバンドルしています。ルーティングはdev-serverモードで非常にうまく動作しています。ただし、次のwebpack configを使用してアプリケーションをTomcatサーバーにデプロイすると、ルーティングが機能しません。 私は直接URLでページにアクセスできません。たとえば、http://localhost:8080/test/searchで特定のページにアクセスしたいとします（app.routing.tsを見るとAppComponentが検索にマップされ、生成された.jsファイルはwebappsのテストディレクトリに置かれます）。HTTPステータス404が表示されます。ウェルカムページのリンクを使用して検索ページにアクセスしてください。誰かがこれについて知っているなら、いくつかアドバイスをしてください。

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

これはウェブパックや梱包の問題ではありません。これはTomcat（または他のWebサーバー）の設定上の問題です。

/test/searchは実際の既存のページではないため、Angularアプリケーションのすべての要求を角度インデックスページにルーティングするようにWebサーバーを設定する必要があります。これは、ApacheまたはURL書き換えモジュール（ApacheまたはIISの両方）の.htaccessファイルで実行できます。 Tomcatにも同様のモジュールがあるようです。ここではそのドキュメントをチェックアウト：https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html

Answer 2

をするだけの思考

あなたのpackage.jsonで または devdependencies

のみDevのために働いて、それを説明し、PRODことができませんでした 依存関係の下であなたのWebPACKと角度です