Can't resolve parameters for app module

Viewed 722

I'm trying to run a hybrid app with angular 1.6 and 5. The manual bootstraping worked. As soon as I tried to bootstrap a hybrid application, I get the following error:

compiler.js?7e34:466 Uncaught Error: Can't resolve all parameters for AppModule: (?). at syntaxError (eval at (app.bundle.js:1852), :684:34) at CompileMetadataResolver._getDependenciesMetadata (eval at (app.bundle.js:1852), :15765:35) at CompileMetadataResolver._getTypeMetadata (eval at (app.bundle.js:1852), :15600:26) at CompileMetadataResolver.getNgModuleMetadata (eval at (app.bundle.js:1852), :15399:24) at JitCompiler._loadModules (eval at (app.bundle.js:1852), :33760:87) at JitCompiler._compileModuleAndComponents (eval at (app.bundle.js:1852), :33721:36) at JitCompiler.compileModuleAsync (eval at (app.bundle.js:1852), :33637:37) at CompilerImpl.compileModuleAsync (eval at (app.bundle.js:1864), :245:49) at PlatformRef.bootstrapModule (eval at (app.bundle.js:229), :5646:25) at eval (eval at (app.bundle.js:827), :76:53)

app.ts

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

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.documentElement, ['myApp']);
    }
}

tsconfig.json

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

I'm using webpack. Here's part of my config:

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

module: {
    rules: [
        {
            test: /\.ts$/,
            loader: 'ts-loader',
            exclude: '/node_modules'
        },
2 Answers

As far as the code you've shared everything seems to be in order. It could be though, that you're using yet another annotations library that's clashing with Angular's decorators. For example if you're using angular-ts-decorators it would certainly cause such a problem.

If this is the case - remove the other annotations library (which should now be redundant anyway) and use Angular's annotations instead.

In my case after loading following JS, it got working:

./node_modules/core-js/client/shim.min.js
./node_modules/zone.js/dist/zone.js
Related