Angular application upon using npm start not working despite packages installed correctly

Question

I am having a very strange experience with Angular application. What i did is i have recently checked out my code in my new machine and started running my existing Angular 12 project but unfortunately its not working and giving the below screen despite the application running in the command prompt properly.

I have installed the app properly using npm install then its installed perfectly but giving some deprecated warnings as below:

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated @types/html2canvas@1.0.0: This is a stub types definition. html2canvas provides its own type definitions, so you do not need this installed.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated angular-animate@1.8.3: For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward.
npm WARN deprecated @types/jspdf@2.0.0: This is a stub types definition. jspdf provides its own type definitions, so you do not need this installed.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated core-js@3.12.0: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

> core-js@3.12.0 postinstall D:\workspace\Fxt\Web\src\main\ui\material\node_modules\@angular-devkit\build-angular\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@3.23.4 postinstall D:\workspace\Fxt\Web\src\main\ui\material\node_modules\canvg\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@3.23.4 postinstall D:\workspace\Fxt\Web\src\main\ui\material\node_modules\jspdf\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/cli@12.2.17 postinstall D:\workspace\Fxt\Web\src\main\ui\material\node_modules\@angular\cli
> node ./bin/postinstall/script.js


> core-js@2.6.12 postinstall D:\workspace\Fxt\Web\src\main\ui\material\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@angular-devkit\build-angular\node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/animations@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/common@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/compiler@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/core@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/platform-browser@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-server@12.0.3 requires a peer of @angular/platform-browser-dynamic@12.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ncstate/sat-popover@7.1.0 requires a peer of @angular/common@^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ncstate/sat-popover@7.1.0 requires a peer of @angular/core@^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ncstate/sat-popover@7.1.0 requires a peer of @angular/cdk@^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@10.0.0 requires a peer of @angular/localize@^12.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-ace-editor@0.3.9 requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-shimmer-loading@0.0.5 requires a peer of @angular/common@^8.2.14 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-shimmer-loading@0.0.5 requires a peer of @angular/core@^8.2.14 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.6.1 requires a peer of popper.js@^1.16.1 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@1.1.11 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

added 1839 packages from 843 contributors and audited 1849 packages in 125.856s

111 packages are looking for funding
  run `npm fund` for details

found 42 vulnerabilities (4 low, 25 moderate, 13 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Later once this app installed properly i have started running my app using npm start but the strange thing is the app is running in the command prompt properly but not in the browser. See below:

But in browser i am getting like below as a plain blank page with some breakage errors in the console:

I am using these angular versions below:

Can anybody help me in this regard. As i am trying very hard to come out this problem but not able to solve.

Thanks.

Answer 1

If you check the error message it says:

[ERROR ->]

That is where the error is. You have to escape the all {}.

Change this:

X-API-KEY: <span>{{</span>@Cmd | Step-2-content <span>}}</span>

To:

X-API-KEY: <span>{{ '{{' }}</span>@Cmd | Step-2-content <span>{{ '}}' }}</span>

There may be more places with this error, but the concept is the same.