Angular2 Компонент в приложении Angular1

То, что я пытаюсь сделать, - сделать Angular 2 простых компонента в приложении Angular 1. Я прошел через это официальное руководство. Я столкнулся с некоторыми проблемами с инъекцией:

Unknown provider: $$angularInjectorProvider <- $$angularInjector

Трассировка стека не имеет смысла, но очевидно, что ошибка возникает где-то глубоко в самой Angular:)

Структура моего текущего приложения выглядит так:

ng1.module.ts(точка входа):

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

И app.component.ts:

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

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

Запрос какой-либо идеи: что может вызвать описанную выше ошибку?

Ответы

Ответ 1

Это вызвано обновленной службой UpgradeModule, которую вы используете здесь:

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

Вы используете его, потому что вы хотите, чтобы UpgradeModule понизил уровень Angular 2 до Angular JS.

Если вы вникнете в код UpgradeModule, вы можете обнаружить, что этот модуль определяет новый модуль Angular с именем $$ UpgradeModule.

Этот модуль регистрирует поставщик значений с именем $$ angularInjector (тот, который указан в вышеприведенной ошибке) - эта вещь $$ angularInjector отвечает за впрыскивание модулей Angular в Angular JS.

Решение заключается в том, чтобы импортировать модуль в оператор импорта, чтобы Angular JS получал доступ к его услугам.

Вы забыли импортировать UpgradeModule. Вот ответ официальной документации:

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

поэтому сначала вам нужно изменить свой код на:

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

Также, чтобы понизить ваш компонент от ng2 до Angular 1

Вы должны создать директиву AngularJS, которая сделает этот компонент Angular доступным внутри шаблонов AngularJS:

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

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

Существует очень полезный пост, в котором подробно объясняется, как создать гибридное приложение Angular, а также сценарий, когда у вас есть v4, и вы хотите использовать его в шаблоне v1.