Question

我正在捆绑angular2应用程序。路由在开发服务器模式下运行良好。但是，当我使用以下webpack配置将应用程序部署到Tomcat服务器上时，路由不起作用。即使我无法通过直接网址访问该网页。例如，我想通过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不是实际的现有页面，所以您必须设置Web服务器以将Angular应用程序下的任何请求路由到角度索引页面。这可以通过Apache上的.htaccess文件或URL重写模块（在Apache或IIS上）完成。看起来Tomcat有一个类似的模块。在这里查看他们的文档：https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html

Answer 2

只是一个想法

在你的package.json中是你的webpack和angular under 依赖要么 devdependencies

可以解释它只适用于Dev而不是Prod

捆绑webpack后的路由问题

2 个答案: