Question

我现有hybrid Angular 1+2 application，但我无法关注Angular 2 RC5 guidance in relation to the new NgModules。它看起来好像是用于Angular 2 RC4应用程序 - 而不是混合应用程序。

与纯RC4场景相比 - 没有模块，因为它们仅在RC5中引入 - 我有一个我需要处理的现有Angular 1.5模块。我猜我有以下选择 - 还有其他吗？

使用Upgrade Adapter升级现有模块。没有提到那里升级模块但是它们被添加得很晚，所以可能还有文档需要更新？或者我们可以期待很快就能加入对此的支持？
将现有模块重写为RC5 NgModule。是否有关于如何做到这一点的指导？

然后是引导问题。我假设混合应用程序需要使用upgrade_adapter进行自举。如何使用Update your bootstrap指导协调它，该指导说我应该使用platformBrowserDynamic（）。bootstrapModule（）函数？

更新 lekev87提供了Angular文档中一个示例的链接，该示例似乎已经更新，以便（至少部分地）在RC5中引入NgModule。

在创建UpgradeAdapter实例时，会传入对NgModule的引用。但是没有解释这将做什么。

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));

我的猜测是传入的NgModule将被用来代替implicitly created one。

 - We create an implicit NgModule for you as part of the bootstrap()
 - command We automatically hoist your components, pipes, and directives

这将使我负责照顾上面列表中的第二点 - 声明所有组件等。

我在这里走在正确的轨道上吗？

这是否意味着虽然我的应用程序是混合的，但我需要在Angular 1和Angular 2模块中声明所有内容？

有没有办法可以访问隐式创建的模块？我想这可以让我从一个拥有我需要的大部分内容的基础开始，我可以以某种方式扩展它？

Answer 1

您好，我们可以查看UpgradeAdapter class的文档你有这个例子：

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
var module = angular.module('myExample', []);
module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
module.directive('ng1Hello', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});
@Component({
  selector: 'ng2-comp',
  inputs: ['name'],
  template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
  directives:
})
class Ng2Component {
}
@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
  imports: [BrowserModule]
})
class MyNg2Module {}
document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

Answer 2

我能够使用更新的docs引入NgModule。我使用以下模板作为新的NgModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [ BrowserModule ]
})
export class AppModule {}

我将对它的引用传递给UpgradeAdapter的构造函数。

import { UpgradeAdapter } from '@angular/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter(AppModule);

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});

如何在混合应用程序中将模块升级到Angular 2 RC5 NgModules？

2 个答案: