Invalid providers for "AppComponent" - only instances of Provider and Type are allowed

Hi Guys,

You might have faced the issue "Invalid providers for "AppComponent" - only instances of Provider and Type are allowed" .

The full stack trace is as below:

Uncaught Error: Invalid providers for "AppComponent" - only instances of Provider and Type are allowed, got: [?./user.service.ts?]
    at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:706)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15963)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15931)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15215)
    at CompileMetadataResolver._getEntryComponentMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:16033)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at JitCompiler._loadModules (webpack-internal:///../../../compiler/esm5/compiler.js:34447)



To find the root cause of the issue first check the providers attribute of @Component decorator in the component.ts file.

If the value is anything other than a valid Typescript type you will get the above error.