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

Issue

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.)

Solution

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

Answered By – Adam Butler

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.