Angular application start with "ng serve" returning error

Question

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Error: Error on worker #1: TypeError: compiler_1.createR3ProviderExpression is not a function
    at extractInjectableMetadata (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:140:40)
    at InjectableDecoratorHandler.analyze (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:70:24)
    at NgccTraitCompiler.TraitCompiler.analyzeTrait (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:421:40)
    at analyze (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:371:58)
    at _loop_1 (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:393:21)
    at NgccTraitCompiler.TraitCompiler.analyzeClass (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:399:35)
    at NgccTraitCompiler.analyzeFile (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/analysis/ngcc_trait_compiler.js:49:26)
    at DecorationAnalyzer.analyzeProgram (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:150:39)
    at Transformer.analyzeProgram (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:135:57)
    at Transformer.transform (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:77:27)
    at ClusterMaster.onWorkerMessage (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:195:27)
    at /home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:55:95
    at ClusterMaster.<anonymous> (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:293:57)
    at step (/home/mycode/halfgenie/node_modules/tslib/tslib.js:143:27)
    at Object.next (/home/mycode/halfgenie/node_modules/tslib/tslib.js:124:57)
    at /home/mycode/halfgenie/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/home/mycode/halfgenie/node_modules/tslib/tslib.js:113:16)
    at EventEmitter.<anonymous> (/home/mycode/halfgenie/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:287:32)
    at EventEmitter.emit (events.js:400:28)
/home/mycode/halfgenie/node_modules/@ngtools/webpack/src/ngcc_processor.js:139
            throw new Error(errorMessage + `NGCC failed${errorMessage ? ', see above' : ''}.`);
            ^

Error: NGCC failed.
    at NgccProcessor.process (/home/mycode/halfgenie/node_modules/@ngtools/webpack/src/ngcc_processor.js:139:19)
    at /home/mycode/halfgenie/node_modules/@ngtools/webpack/src/ivy/plugin.js:129:27
    at Hook.eval [as call] (eval at create (/home/mycode/halfgenie/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:32:1)
    at Hook.CALL_DELEGATE [as _call] (/home/mycode/halfgenie/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/mycode/halfgenie/node_modules/webpack/lib/Compiler.js:1043:30)
    at /home/mycode/halfgenie/node_modules/webpack/lib/Compiler.js:1088:29
    at Hook.eval [as callAsync] (eval at create (/home/mycode/halfgenie/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/mycode/halfgenie/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/mycode/halfgenie/node_modules/webpack/lib/Compiler.js:1083:28)
    at /home/mycode/halfgenie/node_modules/webpack/lib/Watching.js:200:19
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! halfgenie start: `ng serve --host=0.0.0.0`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the halfgenie start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/hb/.npm/_logs/2022-01-04T11_54_20_063Z-debug.log

ng --version returning below response

Angular CLI: 12.2.14

Node: 14.18.2

Package Manager: npm 6.14.15

OS:linux x64

Angular: ...

@angular-devkit/architect 0.1202.14

@angular-devkit/core 12.2.14

@angular-devkit/schematics 12.2.14

@schematics/angular 12.2.14

I am trying to start the server, but its returning above error. can anyone please help me to get rid of this?

Answer 1

From the last warning I think you did not install npm packages try running npm install to install npm packages

Answer 2

DONE...

This is most likely caused by the version mismatch between the @angular/compiler-cli and @angular/compiler

So, I have updated exactly same for these 2 packages in package.json and running npm update worked for me.

Answer 3

Had the very same error appearing after I messed around with my dependencies. The problem was indeed a version mismatch between @angular/compiler-cli and @angular/compiler - both had the same version set in my package.json, however with the subtle difference that @angular/compiler had its semver specifier to ^ whereas @angular/compiler was ~. So what do we learn? The source of truth is as always package-lock.json.

Answer 4

Remove tilde and caret (~,^) signs if you have used in package.json file. This was causing this issue for me.

Answer 5

First, delete the node_module folder.

Then install Yarn Instal or NPM Instal.

Then npm uninstall angular-font-awesome.

Finally, add the add @fortawesome/[email protected]