Angular 12 post-upgrade styling issue

Question

We upgraded angular version from 11 to 12 and the stylings are not applied in production build.

If I run the application in dev build I dont see the styling issues but this occurs only when we do the prod build.

I see in angular 12 ng build --prod is deprecated so used new command recommended by Angular ng build --configuration production. Adding the screen shot below: [Package.json showing the version difference][1] [Package.json showing the version difference][2]

When I inspect the styles, the custom style we applied in respective component.scss are not applied.

So am I missing some configuration?

Below is the tsconfig.json -

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "target": "es2015",
    "downlevelIteration": true,
    "declaration": false,
    "importHelpers": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "watch": false
  },
  "exclude": [
    "node_modules"
  ],
  "angularCompilerOptions": {
    "strictInjectionParameters": true
  }
}

` [1]: https://i.sstatic.net/zBq0B.png [2]: https://i.sstatic.net/2cy0W.png

so you mean the css was modified by the build process?

Davis Jahn
– Davis Jahn

2021-06-17 08:26:08 +00:00
Commented Jun 17, 2021 at 8:26 — Davis Jahn
– Davis Jahn, Commented Jun 17, 2021 at 8:26

Davis Jahn · Accepted Answer · 2021-06-17 08:30:22Z

2

This seems to be still an open issue with angular that still exists:

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

you could try doing a possible workaround:

ng build --prod -extract-css false

answered Jun 17, 2021 at 8:30

Davis Jahn

6076 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mahesh Dharwad Over a year ago

I am facing the issue again when I upgraded to Angular 13. Any possible solutions from you? I tried to use -extract-css false but its deprecated.

Davis Jahn Over a year ago

@MaheshDharwad try to use styleUrlss:['style.css'] instead of styles in your angular components. otherwise try adding this in front of your css-classes :host ::ng-deep .yourCssClass { }

Mahesh Dharwad Over a year ago

@Devis Jahn I use SCSS and in component used style urls styleUrls: ['./app.component.scss'] but no luck

Collectives™ on Stack Overflow

Angular 12 post-upgrade styling issue

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related