Getting the "Cannot resolve all settings" error when configuring an AngularJS / Angular hybrid application

Question

I want to upgrade a traditional Angular JS application, and I followed the angular.io documentation to set up a hybrid application.

Now my boot process in app.ts looks like this:

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

My new app.module.ts looks like this:

 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 cannot find the UpgradeModule for resolving dependencies in the AppModule.

My question is: Am I missing something from my boot process to fix this?

(Note. This may or may not be relevant, but I use webpack as my module loader.)

Answer 1

I had the same problem, and after a long time I tried (and looked at your repo), I think this was because my emitDecoratorMetadata was not installed in tsconfig

Answer 2

I finally got this working and created an example of a GitHub repository that shows a basic solution that uses webpack to combine a hybrid application:

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