捆綁webpack後的路由問題

我正在捆綁angular2應用程序。路由在開發 - 服務器模式下工作得非常好。但是，當我使用以下webpack配置將應用程序部署到Tomcat服務器時，路由不起作用。即使我無法通過直接url訪問該頁面。例如，我想通過http://localhost:8080/test/search訪問某個頁面（如果您查看app.routing.ts，AppComponent映射到搜索並將生成的.js文件放在webapps中的測試目錄中），但它顯示HTTP Status 404。只能通過歡迎頁面中的鏈接訪問搜索頁面。如果有人知道這一點，請提供一些建議。捆綁webpack後的路由問題

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 { }

來源

2016-12-13 Anna Lee

這不是一個webpack或包裝問題。這是Tomcat（或任何其他Web服務器）中的配置問題。

因爲/ test/search不是一個實際的現有頁面，所以您必須設置您的Web服務器以將您的Angular應用程序下的任何請求路由到角度索引頁面。這可以通過Apache或URL重寫模塊上的.htaccess文件（在Apache或IIS上）來完成。它看起來像Tomcat有一個類似的模塊。點擊這裏，查看他們的文檔：https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html

來源

2016-12-13 21:12:23

只是一個想法

在你的package.json正在依賴或 devdependencies您的WebPack和角度

可以解釋它僅僅工作了開發，而不是正式版

來源

2017-01-06 16:49:52

應該是一個評論。 –

捆綁webpack後的路由問題

回答

相關問題