Angular2 Component w Angular1 App

Question

Próbuję zrobić, aby prosty komponent Angular 2 działał wewnątrz aplikacji kątowej 1. Przechodziłem przez this official guide. mam do czynienia jakiś problem z wtryskiem:

Unknown provider: $$angularInjectorProvider <- $$angularInjector 

Ślad stosu czyni żadnego sensu, ale jest oczywiste, że błąd jest podniesiona gdzieś głęboko w sobie kątowa :)

Struktura mojego obecnego app wygląda następująco:

ng1.module.ts (punkt wejścia):

'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() {} 
} 

I app.component.ts:

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

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

wyjściowa dla każdego pomysłu na: co może spowodować, że opisany wyżej błąd?

Answer 1

Jest to spowodowane przez UpgradeModule obniżyła usługi, które używasz tutaj:

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

Używasz go bo chcesz UpgradeModule downgrade kątowym 2 komponent do kątowego JS.

Po skopiowaniu kodu modułu UpgradeModule można stwierdzić, że moduł ten definiuje nowy moduł kątowy o nazwie $$ UpgradeModule.

Ten moduł rejestruje dostawcę wartości o nazwie $$ angularInjector (ten w powyższym błędzie) - to narzędzie $$ angularInjector jest odpowiedzialne za wstrzykiwanie modułów kątowych do kątowego JS.

Rozwiązaniem jest zaimportowanie modułu do instrukcji importu, aby kątowy JS miał dostęp do swoich usług.

Zapomniałeś zaimportować UpgradeModule. Oto odpowiedź z oficjalnej documentation:

@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 */ 
    } 
} 

więc najpierw trzeba zmienić swój kod do:

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() {} 
} 

także aby obniżyć swój komponent od ng2 do kątowego 1

Musisz utworzyć dyrektywę AngularJS, która spowoduje, że ten komponent kątowy będzie dostępny w szablonach AngularJS:

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

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

Jest bardzo pomocny post który wyjaśnia w szczegółach jak stworzyć hybrydowy kątową aplikację, a także scenariusz, gdy masz składnik v4 i chcesz go użyć w szablonie v1.