"Importing Styles and Modules" Section in Guide not up to date (?)

[Jan-PeterRichterCG]

Category: enhancement

Severity: Medium

Description of issue / expected enhacement /Comments
The guide "Client GUI Angular Create New devon4ng Application" mentions in Section "Importing Styles and Modules": "Now we have to add these styles in angular/CLI config. Go to .angular-cli.json to "styles" array and add theme and Covalent platform.css to make it look like this:"

• there is apparently no file ".angular-cli.json". There is a file "angular.json" with two entrys that look like
  "styles": [
  "src/styles.scss"
  ]
  However, making them look like
  "styles": [
  "src/styles.css",
  "src/theme.scss",
  "node_modules/@covalent/core/common/platform.css"
  ],
  leads to an error message:
  ERROR in ./src/theme.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme.scss)
  Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
Wrong number of arguments (3 for 1) for `mat-elevation'
in C:\Mirror\JumpTheQueue\node_modules@angular\material_theming.scss (line 447, column 12)

See also https://stackoverflow.com/questions/42395200/where-is-the-file-angular-cli-json-in-the-new-angular-cli-version

Your environment - windows/Linux, Devonfw version , component
Angular CLI: 7.2.1
Node: 10.15.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.12.1
@angular-devkit/build-angular 0.12.1
@angular-devkit/build-optimizer 0.12.1
@angular-devkit/build-webpack 0.12.1
@angular-devkit/core 7.2.1
@angular-devkit/schematics 7.2.1
@angular/cdk 7.2.1
@angular/cli 7.2.1
@angular/material 7.2.1
@ngtools/webpack 7.2.1
@schematics/angular 7.2.1
@schematics/update 0.12.1
rxjs 6.3.3
typescript 3.2.2
webpack 4.23.1

[Jan-PeterRichterCG]

The error message "wrong number of arguments" appears to be related to a bug that was introduced by a new version of angilar material - see https://stackoverflow.com/questions/53969745/wrong-number-of-arguments-3-for-1-for-mat-elevation
I suggest to re-write the guide so that directives like "First, we are going to add Google Material to project dependencies running the following commands [...] yarn add @angular/material @angular/cdk [...]" add dependencies to specific versions that have been tested to work together.

[Jan-PeterRichterCG]

Using explicit version numbers on every command (where possible) removes the error message "wrong number of arguments [...]":
npm install -g @angular/cli@6.0.7

ng config -g cli.packageManager yarn

ng new JumpTheQueue

yarn add @angular/material@6.2.1 @angular/cdk@6.2.1

yarn add @angular/animations@6.0.3

yarn add hammerjs@2.0.8

yarn add @covalent/core@2.0.0-beta.1

These command yield a package.json that is similar (but not %100 identical) to the package.json snipped in the guide:
"dependencies": {
"@angular/animations": "6.0.3",
"@angular/cdk": "6.2.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "6.2.1",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@covalent/core": "2.0.0-beta.1",
"core-js": "^2.5.4",
"hammerjs": "2.0.8",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},

Still, a file .angular-cli.json or angular-cli.json doesn't exist. As pointed out in https://stackoverflow.com/questions/42395200/where-is-the-file-angular-cli-json-in-the-new-angular-cli-version this file has apparently been renamed to angular.json and has changed its syntax. I have changed the styles array to "styles": [
"src/styles.css",
"src/theme.scss",
"node_modules/@covalent/core/common/platform.css"
],
in two locations in this file: one under "build" and one under "test".

The GUI app now starts without errors but ist is not obvious whether all the steps for importing stysles and modules actually take effect - at least the font appears to have changed from times new roman to arial or something else sans-serif.

==> Baseline: when writing guides and tutorials, there should always be explicit version numbers to avoid incompatibilities