"fallbackLoader option has been deprecated - replace with "后备" "

Question

将我的 Angular CLI 1.0.0-beta.26

项目升级到 Angular CLI 1.0.0-beta.30 后，我收到以下两个警告：

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"

作为构建的一部分。

Answer 1

已提交 Angular CLI PR 来解决这些警告，因此此问题应在 1.0.0-beta.31 及更高版本中解决。

要立即解决这些警告，您可以对 webpack 配置进行以下更改：

loader:          -->  use:
fallbackLoader:  -->  fallback:

注意：如果您重新安装node_modules则需要重新执行这些更改。

详

对于 Angular CLI 1.0.0-beta.30 ，在 node_modules/@angular/cli/models/webpack-configs/styles.js 中找到全局样式路径部分并将其从：

    loader: [
      ("css-loader?" + JSON.stringify({ sourceMap: cssSourceMap })),
    ].concat(commonLoaders, loaders),
    fallbackLoader: 'style-loader',
    publicPath: ''

自：

    use: [
      ("css-loader?" + JSON.stringify({ sourceMap: cssSourceMap })),
    ].concat(commonLoaders, loaders),
    fallback: 'style-loader',
    publicPath: ''

对于 Angular CLI 1.0.0-beta.26 ，在./node_modules/angular-cli/models/webpack-build-styles.js中找到全局样式路径部分并将其从：

    loader: ['css-loader'].concat(commonLoaders, loaders),
    fallbackLoader: 'style-loader',
    publicPath: ''

自：

    use: ['css-loader'].concat(commonLoaders, loaders),
    fallback: 'style-loader',
    publicPath: ''

Answer 2

对于那些使用 Angular CLI 1.0.0-beta.26 的用户，识别和解决此问题的正确路径是：

node_modules/angular-cli/models/webpack-configs/styles.js

您应该看到以下内容：

// load global css as css files
if (globalStylePaths.length > 0) {
    rules.push.apply(rules, baseRules.map(function (_a) {
        var test = _a.test, loaders = _a.loaders;
        return ({
            include: globalStylePaths, test: test, loaders: ExtractTextPlugin.extract({
                loader: [
                    // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
                    // so we need to add options in its query
                    ("css-loader?" + JSON.stringify({ sourceMap: cssSourceMap }))
                ].concat(commonLoaders, loaders),
                fallbackLoader: 'style-loader',
                // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
                publicPath: ''
            })
        });
    }));
}

• 将加载程序更改为 use ，将回退加载程序更改为 fallback

• 另请注意，此问题已在最新版本中修复。