Question

目前该项目正处于迁移步骤的第2.1阶段。该教程说＆＃34;关键是要在不破坏应用程序的情况下逐个完成，“但我已经破坏了应用程序。

问题似乎是使用升级适配器来启动应用程序。接下来的部分＆＃34; Bootstrapping A Hybrid 1 + 2 PhoneCat＆＃34;，该应用程序无法启动。症状是一个空白屏幕，控制台中没有错误。

目前尚不清楚将引导方法放在app / js / app.module.ts文件中的位置。文档没有指定以下代码的位置。这些是它的确切词：

然后我们可以通过实例化类来生成适配器：
const upgradeAdapter = new UpgradeAdapter();
 Now we can use that adapter to bootstrap our application as a hybrid.    Instead of calling angular.bootstrap, we must call
upgradeAdapter.bootstrap，但函数参数保持不变：它们仍然是将成为其根源的元素应用程序，以及我们的根Angular 1.x模块的名称想要包括：
upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);

根据一些建议here，我尝试了这个：

var upgradeAdapter = new UpgradeAdapter();
angular.element(document.body).ready(function() {
  upgradeAdapter.bootstrap(document.body, ['phonecatApp']);
});

相同的结果：空白屏幕，没有控制台输出。

引导应用程序融合状态的正确方法是什么？

有问题的文件是here。

我们非常感谢任何建议。

Answer 1

这是我的main.ts文件的工作内容。该教程并不是很好地说明应该添加新行的位置，我花了一些时间来弄清楚它。关键是在引导方法之前添加提供者和服务工厂。

import {UpgradeAdapter} from '@angular/upgrade';
import {HTTP_PROVIDERS} from '@angular/http';
import {Phone} from './core/phone/phone.service';

let upgradeAdapter = new UpgradeAdapter();

upgradeAdapter.addProvider(HTTP_PROVIDERS);
upgradeAdapter.addProvider(Phone);
angular.module('core.phone').factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));

upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);

我已经在Github的代码中检查了代码：https://github.com/Rockncoder/phonecat。提交的顺序与教程的顺序相同，因此您还可以看到我在其后所做的更改。

Answer 2

我认为您可以尝试加载模块然后引导应用程序。

这样的事情：

的index.html

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

hello_world.ts

import {UpgradeAdapter} from 'angular2/upgrade';
import {Component, Inject} from 'angular2/core';

try {
  var upgrade = new UpgradeAdapter();

  (...)
} catch (e) {
  console.error(e);
}

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

请参阅此plunkr作为示例：http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview。

Answer 3

这是我的 app.module.ts

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

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

确保角度捆绑列表下的 systemjs.config.js 中存在以下条目

'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

有关工作示例，请参阅我的github repo。提交是在PhoneCat Upgrade Tutorial的每一步之后创建的。

Angular2升级教程代码不能自举

3 个答案: