CODEWITHSUNDEEP
angular
curchod
curchod

Reputation: 291

Angular2 Upgrade tutorial code not bootstrapping

I’m following along with the official Angular2 upgrade guide

Currently the project is in phase 2.1 of the migration steps. The tutorial says "the key is to do this piece by piece without breaking the application”, but I have broken the application.

The issue seems to be using the upgrade adapter to boot the app. Following along with the section "Bootstrapping A Hybrid 1+2 PhoneCat", the app is failing to boot. The symptoms are a blank screen and no errors in the console.

It's not clear where to put the bootstrap methods in the app/js/app.module.ts file. The docs do not specify where the following code should go. These are its exact words:

We can then make an adapter by instantiating the class:

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, but the function arguments remain the same: They are still the element that will become the root of the application, and the names of the root Angular 1.x modules that we want to include:

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

Following some advice here, I tried this:

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

Same result: blank screen, no console output.

What is the correct way to bootstrap this fusion state of the app?

The file in question is here.

Any suggestions would be much appreciated.

Upvotes: 0

Views: 1251

Answers (3)

Anindya Basu
Anindya Basu

Reputation: 1

Here is my 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(){}
}

Ensure the following entries exist in systemjs.config.js under angular bundles list 

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

Refer to my github repo for a working example. The commits were created after every step of the PhoneCat Upgrade Tutorial.

Upvotes: 0

The Rockncoder
The Rockncoder

Reputation: 349

Here is the working contents of my main.ts file. The tutorial isn't very good about saying where the new lines should be added, it took me a bit to figure it out. The key was to add the providers and service factory before the bootstrap method.

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']);

I have checked in the code to my repo on Github at: https://github.com/Rockncoder/phonecat. The commits are in the same order as the tutorial, so you can also see what changes I made following it.

Upvotes: 1

Thierry Templier
Thierry Templier

Reputation: 202206

I think that you could try to load the module and then bootstrap the application.

Something like this:

  • 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);
  }
}

See this plunkr as an example: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

Upvotes: 0

Related Questions