angularjs - ngupgrade - Componente Angular2 en la aplicación Angular1

ng-href angular 6

Question

Lo que estoy tratando de hacer es hacer que el componente Angular 2 simple se ejecute dentro de la aplicación angular 1. Estaba pasando por esta guía oficial . He enfrentado algún problema con la inyección:

Unknown provider: $$angularInjectorProvider <- $$angularInjector

La traza de la pila no tiene sentido, pero es obvio que el error se genera en algún lugar profundo del propio ángulo :)

La estructura de mi aplicación actual se ve así:

ng1.module.ts (punto de entrada):

''use strict'';

import { downgradeComponent } from ''@angular/upgrade/static'';

const angular = require(''./lib/angular-wrapper'');

const app = angular.module(''application'', []);

import { AppComponent } from ''./components/app/app.component.ts'';
import { Ng2Module } from ''./ng2.module.ts'';

app.directive(
  ''app'', 
  downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory 
);

angular.bootstrap(document.body, [''application'']);

ng2.module.ts:

import ''reflect-metadata'';
import ''@angular/core'';

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { UpgradeModule } from ''@angular/upgrade/static'';
import { AppComponent }  from ''./components/app/app.component.ts'';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  entryComponents: [ AppComponent ]
})
export class Ng2Module { 
   ngDoBootstrap() {}
}

Y app.component.ts:

import ''reflect-metadata'';
import { Component } from ''@angular/core'';

@Component({
  selector: ''app'',
  template: "<h1>HELLO WORLD!</h1>"
})
export class AppComponent {}

Pidiendo alguna idea sobre: ​​¿qué puede causar el error descrito anteriormente?

Answer 1

Esto es causado por el servicio actualizado de UpgradeModule que está utilizando aquí:

import { UpgradeModule } from ''@angular/upgrade/static'';

Lo está utilizando porque desea que el UpgradeModule reduzca la calificación de un componente Angular 2 a JS angular.

Si profundiza en el código del UpgradeModule, puede encontrar que este módulo define un nuevo módulo angular denominado $$ UpgradeModule.

Este módulo registra un proveedor de valores denominado $$ angularInjector (el que se encuentra en el error anterior): este $$ $$ angular es el responsable de inyectar módulos angulares en JS angular.

La solución es importar el módulo en la declaración de importaciones para que JS angular tenga acceso a sus servicios.

Olvidaste importar el UpgradeModule. Aquí está la respuesta de la documentation oficial:

@NgModule({
  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
  providers: [
    HeroesService,
    // Register an Angular provider whose value is the "upgraded" AngularJS service
    {provide: ''titleCase'', useFactory: (i: any) => i.get(''titleCase''), deps: [''$injector'']}
  ],
  // All components that are to be "downgraded" must be declared as `entryComponents`
  entryComponents: [Ng2HeroesComponent],
  // We must import `UpgradeModule` to get access to the AngularJS core services
  imports: [BrowserModule, UpgradeModule]
})
class Ng2AppModule {
  ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
  }
}

así que primero necesitas cambiar tu código a:

ng2.module.ts:

import ''reflect-metadata'';
import ''@angular/core'';

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { UpgradeModule } from ''@angular/upgrade/static'';
import { AppComponent }  from ''./components/app/app.component.ts'';

@NgModule({
  imports:      [ BrowserModule, UpgradeModule ],
  declarations: [ AppComponent ],
  entryComponents: [ AppComponent ]
})
export class Ng2Module { 
   ngDoBootstrap() {}
}

También para degradar su componente de ng2 a angular 1

Debe crear una directiva AngularJS que haga que este componente Angular esté disponible dentro de las plantillas de AngularJS:

ng1AppModule.directive(''Ng2Module'', downgradeComponent({component: AppComponent}));

    function downgradeComponent(info: {   component: Type< This parameter is no longer used */   selectors?: string[]; }): any;

Hay una post muy útil que explica en detalle cómo crear una aplicación angular híbrida, y también el escenario cuando tiene un componente v4 y desea usarlo en la plantilla v1.