angular / ngMigration-Forum

109 stars 7 forks source link

Fix (?) documentation for using protractor with ngUpgrade #4

Open jpzwarte opened 6 years ago

jpzwarte commented 6 years ago

See https://github.com/angular/protractor/issues/4927

jpzwarte commented 6 years ago

So i think i have a solution for this that works both with/without running protractor:

platformBrowserDynamic().bootstrapModule(TeacherModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;

    const bootstrapDone = new Promise(resolve => {
      teacherModule.run(() => resolve());
    });

    upgrade.bootstrap(document.documentElement, [teacherModule.name], { strictDi: true });
    bootstrapDone.then(() => setUpLocationSync(upgrade));
  })
  .catch(err => console.log(err));

This way, setUpLocationSync will always get called after bootstrap, even when protractor interrupts the bootstrap process.

jpzwarte commented 6 years ago

I'll post the entire teacher.ts here (usually called main.ts):

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setUpLocationSync } from '@angular/router/upgrade';
import { setAngularJSGlobal, UpgradeModule } from '@angular/upgrade/static';

import * as angular from 'angular';
import 'angular-animate';
import 'angular-sanitize';
setAngularJSGlobal(angular);

import { teacherModule } from './app-ajs/components/teacher/index';

import { TeacherModule } from './app/teacher/teacher.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(TeacherModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;

    const bootstrapDone = new Promise(resolve => {
      teacherModule.run(() => resolve());
    });

    upgrade.bootstrap(document.documentElement, [teacherModule.name], { strictDi: true });
    bootstrapDone.then(() => setUpLocationSync(upgrade));
  })
  .catch(err => console.log(err));

As you can see, teacherModule is the root angular.js module.

samjulien commented 5 years ago

Thanks for posting this!