Bootstrapping Hybrid Angular 1 + 2应用程序 [英] Bootstrapping Hybrid Angular 1+2 Application

问题描述

按照官方的 5分钟快速入门，我有一个简单的Angular 2应用程序正在运行。

Following the official 5 min QuickStart I have a simple Angular 2 app working.

我设置了Angular 1并且现在它们都独立工作，参见这个掠夺者。

I set up Angular 1 and have now them both working independently, see this plunker.

在官方升级指南他们说：

然后将应用程序切换到混合模式，我们必须首先在项目中安装
Angular 2。按照快速入门
中的说明进行操作。当我们安装了Angular 2时，我们可以
导入并实例化 UpgradeAdapter ，然后调用它的 bootstrap
方法。它被设计为采用与
angular.bootstrap完全相同的参数，因此很容易进行切换：

To then switch the application into hybrid mode, we must first install Angular 2 to the project. Follow the instructions in the QuickStart for some pointers on this. When we have Angular 2 installed, we can import and instantiate the UpgradeAdapter, and then call its bootstrap method. It is designed to take the exact same arguments as angular.bootstrap so that it is easy to make the switch:

import {UpgradeAdapter} from 'angular2/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter();

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

我的问题是放置它的地方？

这听起来像是做我的工作问题，但事实并非如此。我想在 main.ts ，但我尝试了很多事情但没有成功。该文档对此并不十分清楚，1个月的一些教程已经过时了。

It sounds like a 'do my job' question but it's not so. I guess in main.ts, but I tried a lot of things without success. The doc is not really clear about this and some tutorials of 1 month old are already outdated.

---更新：

在我的情况下，我忘了加载我认为已经包含的upgrade.js

In my case I forgot to load upgrade.js that I thought already included

推荐答案

我看了看你的傻瓜。事实上，您可以多次使用 bootstrap ，但这意味着您在HTML页面中使用了两个不同的应用程序。

I had a look at your plunkr. In fact you can use several times bootstrap but this means that you use two different applications into your HTML page.

如果你想将Angular1和Angular2的东西混合到同一个应用程序中，你需要只调用 UpgradeAdapter boostrap 方法>。

If you want to mix Angular1 and Angular2 stuff into the same application, you need to call only the boostrap method of the UpgradeAdapter.

在 UpgradeAdapter boostrap 函数c>它的创建可以在 boot.ts 文件中完成：

The call of the boostrap function on the UpgradeAdapter and it's creation could be done in the boot.ts file:

import {UpgradeAdapter} from 'angular2/upgrade';

var upgrade = new UpgradeAdapter();

// Configure the upgrade adapter
(...)

export function main() {
  try {
    upgrade.bootstrap(document.body, ['heroApp']);
  } catch (e) {
    console.error(e);
  }
}

您可以将其导入HTML文件，如下所示：

You can import this into your HTML file like this:

<script>
  System.import('app/main').then(function(src) {
    src.main();
  });
</script>

混合Angular2和Angular1的东西

如果您想引导Angular2应用程序，请提供主要组件作为第一个参数，并提供Angular1应用程序的提供程序，以便能够将工厂/服务/指令用于Angular2应用程序。

If you want to bootstrap an Angular2 application, provide the main component as first parameter and the provider for the Angular1 application to be able to use factories / services / directives into the Angular2 application.

// Providers for Angular1 elements
upgrade.upgradeNg1Provider('customService');
upgrade.upgradeNg1Provider('customFactory');

// Providers for Angular2 elements
upgrade.addProvider(HTTP_PROVIDERS);

// Bootstrap Angular2 application
upgrade.bootstrap(AppComponent);

如果你想要 Angular1应用程序使用Angular2的东西，你需要提供document.element作为 bootstrap 方法的第一个参数：

If you want an Angular1 application to use Angular2 stuff, you need to provide the document.element as first parameter of the bootstrap method:

// Providers for Angular2 elements
upgrade.downgradeNg2Provider(HTTP_PROVIDERS);

upgrade.bootstrap(document.body, ['heroApp']);

这个plunkr也可能对你有用： http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview 。

This plunkr could also be useful to you: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

这篇关于Bootstrapping Hybrid Angular 1 + 2应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！