javascript - 升级到 Webpack 2 后出错。请求的路径在索引 0 处包含未定义的段

Question

从Webpack 1升级到2后出现错误，配置没改，之前没有错误。请帮忙!谢谢!

网络包配置:

const path = require('path');
const root = path.resolve(__dirname);
const webpack = require('webpack');
const merge = require('webpack-merge');
const ArchivePlugin = require('webpack-archive-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
    cache: true,
    devtool: 'cheap-module-source-map',
    entry: {
        polyfills: './src/polyfills.browser.ts',
        vendor: './src/vendor.browser.ts',
        main: './src/main.browser.ts'
    },
    output: {
        path: path.join(__dirname, 'dist/output'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {jquery: 'jquery/dist/jquery'}
    },
    devServer: {
        inline: true,
        contentBase: 'src',
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000}
    },
    node: {
        net: 'empty',
        global: true,
        crypto: 'empty',
        module: false,
        Buffer: false,
        clearImmediate: false,
        setImmediate: false
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['main', 'vendor', 'polyfills'],
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.DefinePlugin({
            "require.specified": "require.resolve"
        })
    ],
    module: {
        exprContextCritical: false,
        rules: [{
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        }, {
            test: /\.css$/,
            loaders: ['to-string-loader', 'style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
        }, {
            test: /\.json$/,
            loader: 'raw-loader'
        }, {
            test: /\.html$/,
            loader: 'raw-loader'
        }, {
            test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url-loader?limit=100000'
        }, {
            test: /\.(eot|com|json|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url-loader?limit=10000&mimetype=application/octet-stream"
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
        }]
    },
};

if (process.argv[1].indexOf('webpack-dev-server') === -1) {
    module.exports = merge(config, {
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new ArchivePlugin(),
            new webpack.optimize.UglifyJsPlugin({output: {comments: false}})
        ]
    });
} else {
    module.exports = config;
}

这些是控制台中显示的错误。

vendor.bundle.js:57220 

EXCEPTION: Uncaught (in promise): Error: The requested path contains undefined segment at index 0
Error: The requested path contains undefined segment at index 0
    at validateCommands (http://localhost:3000/vendor.bundle.js:23790:19) [angular]
    at Router.navigate (http://localhost:3000/vendor.bundle.js:22872:9) [angular]
    at http://localhost:3000/main.bundle.js:15346:30 [angular]
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:29990:37) [angular]
    at Zone.run (http://localhost:3000/polyfills.bundle.js:17067:43) [angular => angular]
    at http://localhost:3000/polyfills.bundle.js:17474:57 [angular]
    at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:29981:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:17228:40) [angular]
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:17105:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:17372:35) [<root>]
    at HTMLButtonElement.ZoneTask.invoke (http://localhost:3000/polyfills.bundle.js:17303:25) [<root>]
ErrorHandler.handleError @ vendor.bundle.js:57225

vendor.bundle.js:57225 

ORIGINAL STACKTRACE:
ErrorHandler.handleError @ vendor.bundle.js:57225

vendor.bundle.js:57226 

Error: Uncaught (in promise): Error: The requested path contains undefined segment at index 0
Error: The requested path contains undefined segment at index 0
    at validateCommands (vendor.bundle.js:23790) [angular]
    at Router.navigate (vendor.bundle.js:22872) [angular]
    at :3000/main.bundle.js:15346:30 [angular]
    at Object.onInvoke (vendor.bundle.js:29990) [angular]
    at Zone.run (polyfills.bundle.js:17067) [angular => angular]
    at :3000/polyfills.bundle.js:17474:57 [angular]
    at Object.onInvokeTask (vendor.bundle.js:29981) [angular]
    at ZoneDelegate.invokeTask (polyfills.bundle.js:17228) [angular]
    at Zone.runTask (polyfills.bundle.js:17105) [<root> => angular]
    at drainMicroTaskQueue (polyfills.bundle.js:17372) [<root>]
    at HTMLButtonElement.ZoneTask.invoke (polyfills.bundle.js:17303) [<root>]
    at resolvePromise (polyfills.bundle.js:17440) [angular]
    at :3000/polyfills.bundle.js:17477:17 [angular]
    at Object.onInvokeTask (vendor.bundle.js:29981) [angular]
    at ZoneDelegate.invokeTask (polyfills.bundle.js:17228) [angular]
    at Zone.runTask (polyfills.bundle.js:17105) [<root> => angular]
    at drainMicroTaskQueue (polyfills.bundle.js:17372) [<root>]
    at HTMLButtonElement.ZoneTask.invoke (polyfills.bundle.js:17303) [<root>]
ErrorHandler.handleError @ vendor.bundle.js:57226

***** 我必须添加这些行才能发布这个问题，涉及的代码太多了 *****

Answer 1

我发现发生了什么事。不是webpack，而是Angular2的变化

我正在尝试运行 this.router.navigate([redirectUrl]); 而 redirectUrl 是 undefined。它导致了错误。