Error when using UpgradeModule upgrading from AngularJS 1.5 to Angular 5

Question

I've been following the Angular upgrade guide to create a hybrid AngularJS/Angular app, but I'm falling at the first hurdle.

I get the following error:

Uncaught Error: Can't resolve all parameters for AppModule: (?).

Here's my app.module.ts file:

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

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})

export class AppModule {
    constructor(private upgrade: UpgradeModule) {}

    ngDoBootstrap() {
        this.upgrade.bootstrap(document.body, ['MyApp'], { strictDi: true });
    }
}

platformBrowserDynamic().bootstrapModule(AppModule);

It's worth pointing out that I'm using webpack, and I've tried aliasing the @angular/upgrade/static package as follows:

resolve: {
    extensions: ['.ts', '.js'],
    alias: {
        "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
    }
},

But this doesn't seem to help at all.

Any ideas what's going on here?

Answer 1

For me, the specific part of the article How To Upgrade from AngularJS to Angular with ngUpgrade which helped was to import zone.js and reflect-metadata :

import 'zone.js';
import 'reflect-metadata';

Answer 2

我设法通过结合本文和调整我的tsconfig以匹配 angular-cli 生成的一个来解决这个问题。