UnhandledPromiseRejectionWarning when compiling broken SCSS with aot=true

[devoto13]

🐞 Bug report

Command (mark with an x)

- [x] build
- [x] serve

Is this a regression?

Not sure.

Description

ng serve does not handle invalid SCSS gracefully in AOT mode. See minimal reproduction for more details.

🔬 Minimal Reproduction

$ ng new --style scss test-app
$ ng serve --aot

Wait until it completes, then open src/app/app.component.scss and add any invalid code, like .rule (note missing brackets).

Observe UnhandledPromiseRejectionWarning in the terminal.

In JIT mode it gives a helpful error message instead:

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

.rule
    ^
      Expected "{".
  ╷
1 │ .rule
  │      ^
  ╵

🔥 Exception or Error

(node:43977) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property `warnings` of 'undefined' or 'null'.
    at /Users/devoto13/Projects/trash/test-app/node_modules/@ngtools/webpack/src/resource_loader.js:81:23
    at /Users/devoto13/Projects/trash/test-app/node_modules/webpack/lib/Compiler.js:659:23
    at /Users/devoto13/Projects/trash/test-app/node_modules/webpack/lib/Compilation.js:1379:13
    at eval (eval at create (/Users/devoto13/Projects/trash/test-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at /Users/devoto13/Projects/trash/test-app/node_modules/@ngtools/webpack/src/resource_loader.js:70:39
    at processTicksAndRejections (internal/process/task_queues.js:85:5)

🌍 Your Environment

Angular CLI: 8.2.0
Node: 12.7.0
OS: darwin x64
Angular: 8.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.0
@angular-devkit/build-angular     0.802.0
@angular-devkit/build-optimizer   0.802.0
@angular-devkit/build-webpack     0.802.0
@angular-devkit/core              8.2.0
@angular-devkit/schematics        8.2.0
@ngtools/webpack                  8.2.0
@schematics/angular               8.2.0
@schematics/update                0.802.0
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

Anything else relevant?

[jcox86]

+1 Also getting this on valid scss (as far as I can tell) when upgrading an existing, working project from 7.1.4 to 8.2.0. ng build works fine. --aot flag breaks with the aforementioned error.

Additional error message below:
(node:6128) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2) (node:6128) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.

[akopchinskiy]

Same error

[WebKieth]

Still getting this error with custom webpack config with tailwind custom css directives into component scss files like:

@import "tailwinds";
.app {
  @apply w-full;
  @apply flex;
  @apply flex-col;
  @apply items-center;
}

angular.json:

        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "outputPath": "dist/severwind",
            "index": "src/index.html",
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "severwind:build",
            "aot": false,
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          },
          "configurations": {
            "production": {
              "browserTarget": "severwind:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "severwind:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }

custom-webpack.config:

// NPM plugins
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
  resolve: {
    alias: {
      tailwinds: path.resolve(__dirname, 'src/styles/tailwind.css')
    }
  },
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://localhost:4200/'
    },
    {
      reload: false
    }),

    // Extract any CSS from any javascript file to process it as LESS/SASS using a loader
    new MiniCssExtractPlugin({
      fileame: "[name].bundle.css"
    }),

    // Minify CSS assets
    new OptimizeCSSAssetsPlugin({}),
  ],
  module: {
    rules: [
      {
        // Extract any SCSS content and minimize
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              ident  : 'postcss',
              syntax: 'postcss-scss',
              plugins: () => [
                require('postcss-import'),
                require('tailwindcss'),
                autoprefixer
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          }
        ]
      },
      {
        // Extract any CSS content and minimize
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader' }
        ]
      }
    ]
  }
};

[JonWallsten]

@WebKieth: The fix is just merged, not released. Look out for next release.

[WebKieth]

@JonWallsten It's not the last problem with AOT compiling.
I dont know which repo this issue - error occured on minicss webpack plugin side, so i wrote it to him. But maybe you can advice something what to do. I dont know how to compile my current angular cli stack for production. --prod option is deprecated and --aot, as I understand, now is only one way for prod compiling

[mistic100]

@WebKieth: The fix is just merged, not released. Look out for next release.

Is 8.2.1 planned ? I am currently blocked to release all my apps.

[WebKieth]

@mistic100б hi, mb you know which version of cli I should install to bootstrap angular boilerplate without AOT feature?

[WebKieth]

I tried to install my configuration with tailwind on angular-cli v7.
I get same error issue, which url i bound on prev comment. So I think this is a new issue about capability with miniCssExtractPlugin

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}