Angular 12 post-upgrade styling issue

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

Solution

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