[6.0.0-rc7] "ng serve --extract-css" does not work anymore

[stefan-schweiger]

ng serve --extract-css seems to be not working anymore with the new version 6 of angular-cli.

ng build--extract-css works without a problem, so why isn't the option available with serve as well?

Versions

Angular CLI: 6.0.0-rc.7
Node: 10.0.0
OS: win32 x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.10
@angular-devkit/build-angular     0.5.10
@angular-devkit/build-optimizer   0.5.10
@angular-devkit/core              0.5.10
@angular-devkit/schematics        0.5.10
@angular/cli                      6.0.0-rc.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.8
@schematics/angular               0.5.10
@schematics/update                0.5.10
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

simply run ng serve --extract-css and it does not work.

Observed behavior

> ng serve --extract-css
Unknown option: '--extractCss'

Desired behavior

ng serve should accept the --extract-css option as it did back with 1.7.4.

[elvisbegovic]

im curious why you need extract css when serving ?

[filipesilva]

@stefan-schweiger the --extract-css option is not available on ng serve because it is an option related to build, not to serving. There are some build options we provided overrides for in ng serve but overall we try to keep the distinction.

You can set the extraction option in your angular.json file in a build configuration and point to that from the serve target. Does that work for you?

[1-WEEK]

@filipesilva How to configure sass source map with angular/cli 6.0? :)

[markhot]

It defined but not work:
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"SPA6": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/SPA6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"prod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "SPA6:build"
},
"configurations": {
"production": {
"browserTarget": "SPA6:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "SPA6:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
},
"SPA6-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "SPA6:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"/node_modules/"
]
}
}
}
}
},
"defaultProject": "SPA6"
}
package.json:
{
"name": "SPA6",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --extract-css",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.6.0",
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.1.1",
"core-js": "^2.5.5",
"jquery": "^1.9.1",
"popper.js": "^1.14.3",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.3.0",
"css-loader": "^0.28.11",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "^2.7.2"
}
}

[Boboss74]

@stefan-schweiger the --extract-css option is not available on ng serve because it is an option related to build, not to serving.

in dev, it sounds easier to me to debug with css extracted

[gdespres]

just add "extractCss": true at projects > SPA6 > architect > build > options

[ermcgrat]

In previous versions on the cli, I always had to specify --extract-css and --source-map both in order to see source maps for scss files. Without --extract-css option passed to ng server, all of your style is in inline <style> tags instead of pointing to the scss files.

[Khaos66]

just add "extractCss": true at projects > SPA6 > architect > build > options

Thank you for that!
When using Visual Studio 2017 and .NET Core 2.1 you need the extractCss option.
The Angular template of .NET CORE still uses Angular 5 and there "ng serve --extract-css" was working

[abritabroad]

@Boboss74 after reading the solution by @gdespres, I also found out you can add the "extractCss" option under each configuration e.g. projects > #projectname# > architect > build > configuration > #configname#. That way you only need to turn it on under your dev configuration :)

[seemaumesh]

I just added it to my configuration

"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"serviceWorker": true,
"extractCss": true
}
}
But I still do not see one for the scss styles included in the components

Time: 26079ms
chunk {scripts} scripts.69a77c5d3879daa3cecf.js (scripts) 7.12 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} vendor.cbf2809ef4ceea6faeff.js (vendor) 470 kB [initial] [rendered]
chunk {2} assets/themes/deeppurple-amber.99c21d8d54d4ec5d2744.css (assets/themes/deeppurple-amber) 0 bytes [initial] [rendered]
chunk {3} styles.8034221f0bc3efc04a63.css (styles) 509 kB [initial] [rendered]
chunk {4} polyfills.0db0ece1e52478581c1e.js (polyfills) 59.6 kB [initial] [rendered]
chunk {5} main.893f7b34f4d75a110d83.js (main) 599 kB [initial] [rendered]

the files included in angular json
"styles": [
"src/styles.scss",
"src/assets/font/_font-metric.scss",
"src/assets/sass/core_templ.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
{
"input": "node_modules/au-ui-design-system/src/framework/styles/settings/_colors.scss",
"bundleName": "assets/themes/deeppurple-amber",
"lazy": true
}
],
have there own chunk

[uaKorona]

We found a trick with sourceURL.
You can add next line to your component style file (trimmer.component in the example)
/*# sourceURL=trimmer.component.scss */

and in a browser you will see that component style classes are linked to this reference, so it will be little easier to understand where to find styles. Nevertheless this approach gets an approximately path to styles and demands manually adding reference.

[tkumark]

just add "extractCss": true at projects > SPA6 > architect > build > options

Thank you for that!
When using Visual Studio 2017 and .NET Core 2.1 you need the extractCss option.
The Angular template of .NET CORE still uses Angular 5 and there "ng serve --extract-css" was working

@Khaos66 I am trying to do a similar thing but still getting stuck If you got it working in VS2017 .netcore angular could you share a sample project. When I run the css is completely off it is not loading

[julkue]

@istiti

im curious why you need extract css when serving ?

Because you can lazy load CSS files and you'd need to handle two completly different approaches in DEV vs PROD. You will also have a different CSS order, because if you insert the JS file that includes styles in DEV, it will actually create another <style> at the end of <head>. This is different in PROD.