Angular1 App中的Angular2组件

Question

我想要做的是使Angular 2简单组件在angular 1应用程序中运行.我正在阅读这份官方指南.我遇到了一些注射问题:

Unknown provider: $$angularInjectorProvider <- $$angularInjector

堆栈跟踪毫无意义,但显然错误是在角度本身的某处深处提出的:)

我当前应用程序的结构如下所示:

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

询问任何想法:什么可能导致上述错误？

Answer 1

这是由您在此处使用的UpgradeModule降级服务引起的:

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

您正在使用它,因为您希望UpgradeModule将Angular 2组件降级为angular JS.

如果深入研究UpgradeModule的代码,可以发现该模块定义了一个名为$$ UpgradeModule的新角度模块.

这个模块注册了一个名为$$ angularInjector的值提供者(上面的错误中的一个) - 这个$$ angularInjector负责将Angular模块注入到角度JS中.

解决方案是在imports语句中导入模块,以便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降级到角度1

您必须创建一个AngularJS指令,使AngularJS模板中的Angular组件可用:

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

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

有一个非常有用的帖子这也解释了在详细介绍了如何当你有一个v4的成分,要在V1模板使用它创建一个混合应用的角度,也场景.