Angular-cli: [6.0.0-rc7] "ng serve --extract-css" does not work anymore
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.
stefan-schweiger
All 16 comments
im curious why you need extract css when serving ?
elvisbegovic
on 30 Apr 2018
@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?
filipesilva
on 1 May 2018
@filipesilva How to configure sass source map with angular/cli 6.0? :)
1-WEEK
on 5 May 2018
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"
}
}
markhot
on 6 May 2018
@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
Boboss74
on 8 May 2018
just add "extractCss": true at projects > SPA6 > architect > build > options
gdespres
on 11 May 2018
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
Most helpful comment
You missed the whole point of this an similar issues: that angular.json is a bewildering, confusing an poorly documented (especially in terms of annotated examples) subtitute for the old, relibable ng serve and ng build command-line options.
You also ignore the need for separate production vs. development/debug sets of options in a quick, painless manner. This is easy to do via package.json by adding/removing simple, well-documented (at least it was in 1.7) options such as -extract-css on ng serve (which performs a build). Try doing that via multiple configurations in less than 60 seconds via the confusing "JSON blizzard" known as angular.json.
Please reconsider this poor decision to close this issue.