search

devonfw-forge / devon4j-legacy-modules

Server reference implementation (integrates components on devon4j)
Apache License 2.0
13 stars 11 forks source link

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

Open Jan-PeterRichterCG opened 5 years ago

Jan-PeterRichterCG commented 5 years ago

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:"

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 commented 5 years ago

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 commented 5 years ago

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