javascript - 'Uncaught Error: Can't resolve all parameters for' runtime error when upgrading from Angular 4 to 5.0.1

Question

This is fine in Angular 4.x, just not Angular 5.0.1. This project was generated with Angular CLI.

compiler.js:466 Uncaught Error: Can't resolve all parameters for RegistrationService: (?).
    at syntaxError (compiler.js:466)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15546)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15381)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15361)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15721)
    at eval (compiler.js:15632)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15592)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15160)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:14998)
syntaxError @ compiler.js:466
CompileMetadataResolver._getDependenciesMetadata @ compiler.js:15546
CompileMetadataResolver._getTypeMetadata @ compiler.js:15381
CompileMetadataResolver._getInjectableMetadata @ compiler.js:15361
CompileMetadataResolver.getProviderMetadata @ compiler.js:15721
(anonymous) @ compiler.js:15632
CompileMetadataResolver._getProvidersMetadata @ compiler.js:15592
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15160
CompileMetadataResolver.getNgModuleSummary @ compiler.js:14998
(anonymous) @ compiler.js:15086
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15071
JitCompiler._loadModules @ compiler.js:33486
JitCompiler._compileModuleAndComponents @ compiler.js:33447
JitCompiler.compileModuleAsync @ compiler.js:33363
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:230
PlatformRef.bootstrapModule @ core.js:5446
(anonymous) @ main.ts:12
../../../../../src/main.ts @ main.bundle.js:640
__webpack_require__ @ inline.bundle.js:55
1 @ main.bundle.js:670
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

This is what the constructor looks like:

     constructor(
    private apiHelperService: ApiHelperService
  ) {
  }

The class has @Injectable()

    @Injectable()
export class ApiHelperService {

It has also properly imported into the module providers.

providers: [
    AuthGuard,
    ApiHelperService,

If I change it to this, then the error goes away and it works, but then it wants you to change every constructor in the entire solution to this syntax, which I don't believe to be correct.

@Inject(ApiHelperService) private apiHelperService: ApiHelperService

Here is my tsconfig.json, which does have emitDecoratorMetadata properly set to true

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Answer 1

In Angular 5 Update blog post the author mentions that they are using a static injector instead of a reflection based one and mentions that the reflection polyfills are no longer needed but in my case it was.

If you removed the polyfills for reflections try adding them again:

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

I hope it woks for you as well.