Question

我正在努力让Angular 2 + Webpack工作 - 而我几乎就在那里：）

我需要解决的最后一个问题是：

当浏览子路线（例如/ childroute / main）时，只要我使用路由器链接，一切都按预期工作。
手动输入地址或进行重新加载时，我会收到404错误的捆绑路径。它应该是localhost：5001 / dist / bundle.js，但是webpack尝试获取localhost：5001 / childroute / dist / bundle.js。在webpack中更改我的publicPath不起作用：（

这是我的webpack配置：

"use strict";
var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: {
    "app": "./wwwroot/app/base/boot",
    "vendor": "./wwwroot/app/base/vendors"      
},
devtool: 'source-map',

output: {
    filename: "bundle.js",
    chunkFilename: "[id]chunk.js",
    path: "./wwwroot/dist/",
    publicPath: "./dist/"
},
//devServer: {
//    contentBase: "./wwwroot/",
//    host: "localhost",
//    port: 50001,
//    inline:true
//},
resolve: {

    extensions: ['','.js','.ts']
},
module: {
    loaders: [
        //Typescript
        {
            test: /\.ts$/,
            loader: 'ts-loader',
            exclude: '/node_modules/'
        },
        // SASS
        {
            test: /\.scss$/,
            loaders: ['style','css','sass'],
            exclude: '/node_modules/'
        },
        // Fonts & Files
        {
            test:  /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'file-loader' ,
            exclude: '/node_modules/'
        }
    ]
},
plugins: [
    //new webpack.optimize.UglifyJsPlugin({
    //    compressor: {
    //        warnings: false
    //    }
    //}),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
     new webpack.optimize.CommonsChunkPlugin("vendor","vendor_bundle.js")
]
};

我希望有人能给我一个提示:) 谢谢你们！

编辑：如果我将index.html中的脚本路径从“dist / bundle.js”更改为“/dist/bundle.js”，我会加载脚本，但angular找不到我的模板然后...相同模板路径中有一个额外的“/ childroute /”错误。

Answer 1

如果您向index.html添加base标记，则所有资源都是相对于基本路径加载的，而不是相对于当前路径加载的。

<head>
<base href="/">
</head>

Answer 2

这是一个常见问题，因为这些请求首先在您的后端（apache，nginx ..）处理，并且您的后端服务器可能未配置为处理此类请求。解决方案是将后端配置为对/ childroute / main的请求提供index.html，或者更好的是，在所有请求上返回index.html。

这样，当访问/ childroute / main时，你的后端仍将为你的反应应用程序提供服务，然后负责路由。

Answer 3

或者您可以使用HashLocationStrategy

 bootstrap(MyApp,[..., provide(LocationStrategy, {useClass: HashLocationStrategy})])

与PathLocationStrategy不太相似，但您不需要服务器支持。

Webpack + Angular2错误的publicPath？

3 个答案: