After update from Angular 8 to Angular 9, 'ng generate component' generates a .css file instead of .scss - TagMerge
4After update from Angular 8 to Angular 9, 'ng generate component' generates a .css file instead of .scssAfter update from Angular 8 to Angular 9, 'ng generate component' generates a .css file instead of .scss

After update from Angular 8 to Angular 9, 'ng generate component' generates a .css file instead of .scss

Asked 1 years ago
12
4 answers

To fix it, open angular.json and search for styleext (it's in the schematics section). Rename styleext to style.

Explanation: This name has changed from styleext in version 8 to style in version 9 of Angular. However the ng update command did not take account of this. They have fixed it in the meantime so future ng updates will work properly:

https://github.com/angular/angular-cli/issues/16949

Source: link

0

Just to clarify the already accepted answer: As of Angular 9+ , I've fixed it in 'angular.json' file as follows: I've added/updated 'schematics' option as shown below

  "projects": {...},
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },

Source: link

0

Open a new command-line interface and run the following command:
$ git clone https://github.com/techiediaries/angular-portfolio
Next, navigate to your project's folder and install the project's dependencies using the following commands:
$ cd angular-portfolio
$ npm install
Head back to your command-line interface and run the following command:
$ ng version
You'll get the following output:
Your global Angular CLI version (9.0.0-rc.2) is greater than your local
version (7.1.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Angular CLI: 7.1.4
Node: 10.16.3
OS: win32 ia32
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1
In you command-line interface run the following command:
$ ng update

Source: link

0

package.json
"root": "apps/client",
      "sourceRoot": "apps/client/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "indexTransform": "apps/client/index-html-transform.js",
            "outputPath": "dist/apps/client",
            "index": "apps/client/src/index.html",
            "main": "apps/client/src/main.ts",
            "polyfills": "apps/client/src/polyfills.ts",
            "tsConfig": "apps/client/tsconfig.app.json",
...
            "default": {
              "fileReplacements": [
                {
                  "replace": "apps/client/src/environments/environment.ts",
                  "with": "apps/client/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "i18nFile": "i18n/default.xliff",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "warning"
            },
...
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build",
            "i18nFormat": "xlf",
            "outputPath": "../../i18n",
            "outFile": "messages.xliff"
          }
        },
...
Update: Working without IVY, but I want IVY for ng build --configuration=default but ng serve entryComponents error with;
"angularCompilerOptions": {
    "enableIvy": false
  }
Please, can you help me with a more complete example of angular.json file? (According with the documentation https://angular.io/guide/i18n#localize-config for Angular 9).
"projects": {
  ...
  "projectName": {
    "i18n": {
      "sourceLocale": "en",
      "locales": {
        "en": "src/locale/default.xlf"
      }
    }
   "configurations": {
      "default": {
          "localize": ["en"],
      }
    }
}
A minimal XLIFF document with one entry looks something like this:
<?xml version="1.0"?>
<xliff version="1.2">
<file source-language="EN" datatype="plaintext" original="file.ext">
<body>
<trans-unit id="1">
<source>Hello World!</source>
</trans-unit>
</body>
</file>
I still have this problem using angular 9.06 and using this angular.json file:
{
  ...
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": "src/locale/messages.fr.xlf"
        }
      },
      "architect": {
        "build": {
          "configurations": {
            ...
            "fr": {
              "localize": ["fr"]
            }
          }
        }
}

Source: link

Recent Questions on css

    Programming Languages