web-dev-qa-db-fra.com

Obtention de l'erreur "Impossible de résoudre tous les paramètres" lors de la configuration d'un système hybride AngularJS / Angular app

Je souhaite mettre à niveau mon application JS traditionnelle Angular et je suis la documentation sur angular.io pour configurer un hybrid app.

Maintenant, mon processus de démarrage dans app.ts ressemble à ceci:

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

Mon nouveau app.module.ts ressemble à:

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 });
  }
}

Cependant, lorsque j'exécute l'application, l'erreur suivante apparaît:

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)

Il me semble que Angular ne parvient pas à trouver le module de mise à niveau afin de résoudre les dépendances dans AppModule. 

Ma question est la suivante: Me manque-t-il quelque chose dans mon processus de bootstrap afin de résoudre ce problème?

(Remarque: cela peut être pertinent ou non, mais j'utilise Webpack comme chargeur de module.)

angularangular2-upgrade
13
Røye

Je viens d'avoir ce même problème et après un long moment d'essayer des choses (et en regardant votre repo), je pense que c'était en raison de mon emitDecoratorMetadata pas mis en tsconfig

11
Adam Butler

La réponse acceptée ne fonctionnait pas pour moi car je l'avais déjà mise en place. J'ai personnellement dû ajouter ce mappage à mes alias de webpack

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

Pour moi, l'erreur est causée par angulaire n'est pas en charge TypeScript v3. Décorateurs dont l’utilisation angulaire est encore expérimentale dans TypeScript et qui semble avoir été modifiée par les versions ...

le guide officiel ne mentionne pas non plus deux paquets nécessaires: reflect-metadata, zone.js mais le tutoriel suivant le mentionne: https://scotch.io/tutorials/démarrer-avec-ngupgrade-aller-d'angularjs-à-angular

1
garaboncias

J'ai finalement réussi à faire fonctionner cela et à créer un exemple de référentiel GitHub illustrant une solution de base utilisant webpack pour regrouper une application hybride:

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

0
Røye