Getting a "Can't resolve all parameters" error when setting up a hybrid AngularJS / Angular app

Question

I want to upgrade my traditional Angular JS app and I have been following the documentation on angular.io to setup a hybrid app.

Now my bootstrapping process in app.ts looks like:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

My new app.module.ts looks like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
  BrowserModule,
  UpgradeModule
]})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
  }
}

However, when I run the application I get the following error:

compiler.es5.js:1503 Uncaught Error: Can't resolve all parameters for AppModule: (?).
at syntaxError (compiler.es5.js:1503)
at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:14780)
at CompileMetadataResolver._getTypeMetadata (compiler.es5.js:14648)
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:14489)
at JitCompiler._loadModules (compiler.es5.js:25561)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:25520)
at JitCompiler.compileModuleAsync (compiler.es5.js:25482)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4786)
at PlatformRef_.bootstrapModule (core.es5.js:4772)
at Object.map../af (app.ts:487)

It seems to me that Angular is unable to find the UpgradeModule in order to resolve the dependencies in AppModule.

My question is: Am I missing something from my bootstrap process in order to fix this?

(Note: It may or may not be relevant but I am using webpack as my module loader.)

Answer 1

I just had this same issue and after a long while of trying things out (and looking at your repo) I think it was due to my emitDecoratorMetadata not being set in tsconfig

Answer 2

I finally got this working and created an example GitHub repository showing a basic solution using webpack to bundle a hybrid app:

https://github.com/robinho81/angularjs-webpack-upgrade

Answer 3

The accepted answer didn't work for me as I already had that set up. I personally had to add this mapping to my webpack aliases

    {
      resolve: {
        alias: {
          "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
        }
      }
    }

Answer 4

For me the error is caused by angular is not support typescript v3. Decorators which angular use is still experimental in typescript and it seems changed over by versions...

also the official guide not mention two needed package: reflect-metadata, zone.js but the following tutorial mention it: https://scotch.io/tutorials/get-started-with-ngupgrade-going-from-angularjs-to-angular

Answer 5

I had this problem also even with the emitDecoratorMetadata flag set to true. Thanks to this answer I finally discovered that I had to also import reflect-metadata. I'm answering here as it was a higher search result and maybe it will make it easier for someone else to resolve in the future!