Issues when resolving angular package.json dependencies for a production build

Question

I have been trying to get npm run build:production to work for a few ours now. It's provided as one of my build steps when a branch is pushed. In doing so I have located a problem with my package.json file that I have not been able to resolve. I would also like to point out, ng build works fine. It's only this production build that doesn't.

Steps to reproduce.

rm -rf node_modules\
npm install
npm run build:production

Here is my package.json file below

{
  "name": "royal_competition",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:production": "ng build --prod",
    "build:ssr": "ng run royal_competition:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "12.0.4",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "12.0.3",
    "@angular/compiler-cli": "12.0.3",
    "@angular/core": "^12.0.3",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^12.0.0",
    "@angular/material": "12.0.4",
    "@angular/platform-browser": "12.0.3",
    "@angular/platform-browser-dynamic": "12.0.3",
    "@angular/platform-server": "12.0.3",
    "@angular/router": "11.0.9",
    "@nguniversal/module-map-ngfactory-loader": "8.2.6",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^3.14.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.3",
    "@angular/cli": "12.0.3",
    "@angular/language-service": "11.0.9",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "^4.3.2"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

Below is my output when running production build:

...
Compiling @angular/platform-server : es2015 as esm2015
Compiling @nguniversal/module-map-ngfactory-loader : es2015 as esm2015

An error occurred during the build:
Error: The Angular Compiler requires TypeScript >=4.2.3 and <4.3.0 but 4.3.2 was found instead.
    at checkVersion (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\@angular\compiler-cli\src\typescript_support.js:65:19)
    at Object.verifySupportedTypeScriptVersion (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\@angular\compiler-cli\src\typescript_support.js:70:9)
    at new NgtscProgram (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\@angular\compiler-cli\src\ngtsc\program.js:44:38)
    at AngularWebpackPlugin.updateAotProgram (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:278:32)
    at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:167:24
    at Hook.eval [as call] (eval at create (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:13:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\Compiler.js:1033:30)
    at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\Compiler.js:1076:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
An unhandled exception occurred: The Angular Compiler requires TypeScript >=4.2.3 and <4.3.0 but 4.3.2 was found instead.

I have tried changing the typescript version to v4.0, but it just reverts it back to ^4.3.2

Any and all help is vastly appreciated. Thank you!

EDIT: Prakash's suggested answer npm i typescript@4.2.5 --save-dev --save-exact works for me. I am now presented with a new error.

ModuleBuildError: Module build failed (from./node_modules/sass-loader/dist/cjs.js): SassError: no mixin named mat-core on line 10 of src/custom-theme.scss

Answer 1

run this command & then try.

npm i typescript@4.2.5 --save-dev --save-exact