Angular-cli: 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:
```"architect": {
"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[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._}