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

Question

After upgrading my Angular CLI 1.0.0-beta.26 project to Angular CLI 1.0.0-beta.30, I get the following two warning:

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

as part of the build.

Answer 1

An Angular CLI PR has been committed to address these warnings, so this issue should be addressed in 1.0.0-beta.31 and up.

To address these warnings now, you can make the following changes to the webpack configuration:

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

Note: if you re-install node_modules you'll need to re-do these changes.

Details

For Angular CLI 1.0.0-beta.30, in node_modules/@angular/cli/models/webpack-configs/styles.js find the global style path section and change it from:

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

    fallbackLoader: 'style-loader',

    publicPath: ''

to:

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

    fallback: 'style-loader',

    publicPath: ''

For Angular CLI 1.0.0-beta.26, in ./node_modules/angular-cli/models/webpack-build-styles.js find the global style path section and change it from:

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

    fallbackLoader: 'style-loader',

    publicPath: ''

to:

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

    fallback: 'style-loader',

    publicPath: ''