"fallbackLoader 选项已被弃用 - 替换为 "fallback""答案

【问题标题】："fallbackLoader option has been deprecated - replace with "fallback"""fallbackLoader 选项已被弃用 - 替换为 "fallback""
【发布时间】：2023-03-18 03:51:01
【问题描述】：

将我的 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"

作为构建的一部分。

【问题讨论】：

标签： webpack angular-cli

【解决方案1】：

Angular CLI PR has been committed 用于解决这些警告，因此this issue 应在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: ''

【讨论】：

确保使用 @angular/cli 而不是 angular-cli，他们停止更新后者。
我认为这仍然无效，请检查此错误：Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module.rules[1] has an unknown property 'fallback'.
可能是，@Lofus——考虑打开一个包含所有细节的新问题，以便共享更多最新信息...
@Jan Nielsen，进一步调试，我发现后备属性只是configuration.plugins 的成员，而不是configuration.module.rules。您是否仍然能够像发布的答案一样在 use 语句旁边运行您的后备？

【解决方案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: ''
            })
        });
    }));
}

将 loader 更改为 use，将 fallbackLoader 更改为 fallback
另请注意，此问题已在最新版本中得到修复。

【讨论】：

看来您指向的路径是 pre-.30 -- 与我在 详细信息 的第二部分中提到的路径相同...
当然，没有区别，也没有什么新东西，只是为了帮助人们确定在访问特定的 style.js 文件时会看到什么。
我已经对其进行了相应的修改。谢谢