Angular1应用程序中的Angular2组件 [英] Angular2 Component in Angular1 App

问题描述

我想做的是使Angular 2简单组件在angular 1应用程序中运行.我正在通过

What I'm trying to do is to make Angular 2 simple component run inside angular 1 application. I was going through this official guide. I've faced some issue with injection:

Unknown provider: $$angularInjectorProvider <- $$angularInjector

堆栈跟踪没有任何意义，但是很明显，在角度本身深处出现了错误:)

The stack trace is making no sense, but is obvious that error is raised somewhere deep in the angular itself :)

我当前应用的结构如下:

The structure of my current app looks like this:

ng1.module.ts(入口点):

ng1.module.ts (entry point):

'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:

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:

And app.component.ts:

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

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

寻求有关以下方面的任何想法:什么会导致上述错误?

Asking for any idea on: what can cause the described above error?

推荐答案

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

This is caused by the UpgradeModule downgraded service that you are using here:

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

之所以使用它，是因为您希望UpgradeModule将Angular 2组件降级为有角JS.

You are using it because you want the UpgradeModule to downgrade an Angular 2 component to angular JS.

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

If you dig into the code of the UpgradeModule you can find that this module defines a new angular module named $$UpgradeModule.

此模块注册了一个名为 $$ angularInjector 的值提供程序(上面的错误中的那个)-这个$$ angularInjector负责将Angular模块注入angular JS.

This module registers a value provider named $$angularInjector (the one in the error above) - this $$angularInjector thing is responsible for injecting Angular modules into angular JS.

解决方案是在imports语句中导入模块，以便有角JS可以访问其服务.

The solution is to import the module in the imports statement so that angular JS will have access to its services.

您忘记导入UpgradeModule.这是官方文档的答案:

You forgot to import the UpgradeModule. Here is the answer from the official 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 */
  }
}

所以首先您需要将代码更改为:

so first you need to change your code to:

ng2.module.ts:

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

Also in order to downgrade your component from ng2 to angular 1

您必须创建一个AngularJS指令，该指令将使Angular组件在AngularJS模板中可用:

You must create an AngularJS directive that will make this Angular component available inside AngularJS templates:

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

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

有一个非常有用的帖子详细说明了如何创建混合角度应用程序，以及创建具有v4组件并且要在v1模板中使用它的场景.

There is a very helpful post which explains in details how to create a hybrid angular application, and also the scenario when you have a v4 component and you want to use it in the v1 template.

这篇关于Angular1应用程序中的Angular2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！