Question

我要做的是让Angular 2简单组件在angular 1应用程序中运行。我正在经历this official guide。我在注射方面遇到了一些问题：

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。以下是官方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 */
  }
}

首先，您需要将代码更改为：

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;

有一个非常有用的post，它详细解释了如何创建混合角度应用程序，以及有v4组件并希望在v1模板中使用它的场景。

Angular1 App中的Angular2组件

1 个答案: