fix(README): Update bootstrap directions to avoid 'digest already in progress' errors

Author: christopherthielen

README.md

@@ -34,7 +34,6 @@ $stateProvider.state({
   template: '<h1>Other</h1>', // AngularJS template/controller
   controller: function($scope) { /* do stuff */ }
 })
-
 ```
 
 When routing to an Angular component, that component uses the standard
@@ -70,20 +69,19 @@ We need to use manual AngularJS bootstrapping mode.
 
 #### Add AngularJS module `ui.router.upgrade`
 
-- Add 'ui.router.upgrade' to your AngularJS app module's depedencies
+* Add 'ui.router.upgrade' to your AngularJS app module's depedencies
 
 ```js
-let ng1module = angular.module("myApp", ['ui.router', 'ui.router.upgrade']);
+let ng1module = angular.module('myApp', ['ui.router', 'ui.router.upgrade']);
 ```
 
 [_example_](https://github.com/ui-router/sample-app-angular-hybrid/blob/e4b1144d5e3e3451f0f0cc640175bb7055294fdd/app/bootstrap/ngmodule.ts#L21-L25)
 
 #### Create a root Angular NgModule
 
-- Import the `BrowserModule`, `UpgradeModule`, and a `UIRouterUpgradeModule.forChild()` module.
-- Add `providers` entry for any AngularJS services you want to expose to Angular.
-- The module should have a `ngDoBootstrap` method which calls the `UpgradeModule`'s `bootstrap` method.
-
+* Import the `BrowserModule`, `UpgradeModule`, and a `UIRouterUpgradeModule.forChild()` module.
+* Add `providers` entry for any AngularJS services you want to expose to Angular.
+* The module should have a `ngDoBootstrap` method which calls the `UpgradeModule`'s `bootstrap` method.
 
 ```js
 export function getDialogService($injector) {
@@ -112,36 +110,42 @@ export function getDialogService($injector) {
 
 [_example_](https://github.com/ui-router/sample-app-angular-hybrid/blob/e4b1144d5e3e3451f0f0cc640175bb7055294fdd/app/bootstrap/bootstrap.ts#L63-L73)
 
-
 #### Defer intercept
 
 Tell UI-Router that it should wait until all bootstrapping is complete before doing the initial URL synchronization.
 
 ```js
-ngmodule.config([ '$urlServiceProvider', ($urlService: UrlService) => $urlService.deferIntercept() ]);
+ngmodule.config(['$urlServiceProvider', ($urlService: UrlService) => $urlService.deferIntercept()]);
 ```
 
 [_example_](https://github.com/ui-router/sample-app-angular-hybrid/blob/e4b1144d5e3e3451f0f0cc640175bb7055294fdd/app/bootstrap/bootstrap.ts#L75-L76)
 
-
 #### Bootstrap the app
 
-- Bootstrap Angular
-- Angular runs ngDoBootstrap() which bootstraps AngularJS
-- Chain off `bootstrapModule()` and tell UIRouter to synchronize the URL and listen for further URL changes
+* Bootstrap Angular
+* Angular runs ngDoBootstrap() which bootstraps AngularJS
+* Chain off `bootstrapModule()` and tell UIRouter to synchronize the URL and listen for further URL changes
+  * Do this in the Angular Zone to avoid "digest already in progress" errors.
 
 ```js
 // Wait until the DOM is ready
-angular.element(document).ready(function () {
+angular.element(document).ready(function() {
   // Manually bootstrap the Angular app
-  platformBrowserDynamic().bootstrapModule(SampleAppModule).then(platformRef => {
-    // get() UrlService from DI (this call will create all the UIRouter services)
-    const url: UrlService = platformRef.injector.get(UrlService);
-
-    // Instruct UIRouter to listen to URL changes
-    url.listen();
-    url.sync();
-  });
+  platformBrowserDynamic()
+    .bootstrapModule(SampleAppModule)
+    .then(platformRef => {
+      // get() UrlService from DI (this call will create all the UIRouter services)
+      const url: UrlService = platformRef.injector.get(UrlService);
+
+      // Instruct UIRouter to listen to URL changes
+      function startUIRouter() {
+        url.listen();
+        url.sync();
+      }
+
+      const ngZone: NgZone = platformRef.injector.get(NgZone);
+      ngZone.run(startUIRouter);
+    });
 });
 ```
 
@@ -188,25 +192,23 @@ $stateProvider.state(leaf);
 @NgModule({
   imports: [
     UIRouterUpgradeModule.forChild({
-      states: [featureState1, featureState2]
-    })
+      states: [featureState1, featureState2],
+    }),
   ],
-  declarations: [FeatureComponent1, FeatureComponent2]
+  declarations: [FeatureComponent1, FeatureComponent2],
 })
 export class MyFeatureModule {}
 ```
 
 [_example_](https://github.com/ui-router/sample-app-angular-hybrid/blob/e4b1144d5e3e3451f0f0cc640175bb7055294fdd/app/prefs/index.ts#L11-L22)
 
 Add the feature module to the root NgModule imports
+
 ```js
 @NgModule({
-  imports: [
-    BrowserModule,
-    UIRouterUpgradeModule,
-    MyFeatureModule
-  ]
-}) class SampleAppModule {}
+  imports: [BrowserModule, UIRouterUpgradeModule, MyFeatureModule],
+})
+class SampleAppModule {}
 ```
 
 [_example_](https://github.com/ui-router/sample-app-angular-hybrid/blob/e4b1144d5e3e3451f0f0cc640175bb7055294fdd/app/bootstrap/bootstrap.ts#L64)
@@ -216,12 +218,10 @@ Note: You can also add states directly to the root NgModule using `UIRouterModul
 ```js
 @NgModule({
   // import the Ng1ToNg2Module and create a UIRouter "child module"
-  imports: [
-    BrowserModule,
-    UIRouterUpgradeModule.forChild({ states: NG2_STATES })
-  ],
-  declarations: [NG2_COMPONENTS]
-}) class SampleAppModule {}
+  imports: [BrowserModule, UIRouterUpgradeModule.forChild({ states: NG2_STATES })],
+  declarations: [NG2_COMPONENTS],
+})
+class SampleAppModule {}
 ```
 
 ### Limitations:
@@ -244,9 +244,10 @@ export function ng2StateOnEnter(transition: Transition, svc: MyService) {
 }
 ng2StateOnEnter.$inject = [Transition, 'MyService'];
 export const NG2_STATE = {
-  name: 'ng2state', url: '/ng2state',
-  onEnter: ng2StateOnEnter
-}
+  name: 'ng2state',
+  url: '/ng2state',
+  onEnter: ng2StateOnEnter,
+};
 ```
 
 # Examples
@@ -265,4 +266,3 @@ https://stackblitz.com/github/ui-router/sample-app-angular-hybrid/tree/angular-c
 Version 2.0.0 of `@uirouter/angular-hybrid` only supports `UpgradeAdapter`, which works fine but is no longer in development.
 Version 30.0+ of `@uirouter/angular-hybrid` only supports `UpgradeModule` from `@angular/upgrade/static`, which is what the Angular team actively supports for hybrid mode.
 Because we dropped support for `UpgradeAdapter`, current users of `@uirouter/angular-hybrid` 2.x will have to switch to `UpgradeModule` when upgrading to 3.x.
-

example/package.json

@@ -3,13 +3,8 @@
   "scripts": {
     "start": "webpack-dev-server --open",
     "build": "webpack",
-    "test": "run-s build e2e",
-    "test-ui": "run-s build e2e-ui",
-    "e2e": "run-p -r browser-sync cypress",
-    "e2e-ui": "run-p -r browser-sync cypress-ui",
-    "browser-sync": "browser-sync start --port 4000 --server . --no-open",
-    "cypress": "wait-on tcp:4000 && cypress run",
-    "cypress-ui": "wait-on tcp:4000 && cypress open"
+    "test": "npm run build && cypress-runner run --path .",
+    "test:ui": "npm run build && cypress-runner open --path ."
   },
   "dependencies": {
     "@angular/common": "^5.0.0",
@@ -30,9 +25,6 @@
     "webpack-dev-server": "2.9.6"
   },
   "devDependencies": {
-    "browser-sync": "^2.23.6",
-    "cypress": "^1.4.2",
-    "npm-run-all": "^4.1.2",
-    "wait-on": "^2.1.0"
+    "@uirouter/cypress-runner": "^1.0.4"
   }
 }

example/src/main.ts

@@ -1,73 +1,72 @@
 import * as angular from 'angular';
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, NgZone } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { UpgradeModule } from '@angular/upgrade/static';
 import { BrowserModule } from '@angular/platform-browser';
 import { UIRouterUpgradeModule, NgHybridStateDeclaration } from '@uirouter/angular-hybrid';
-import { UrlService} from '@uirouter/core';
-
+import { UrlService } from '@uirouter/core';
 
 const app = angular.module('minimal', ['ui.router.upgrade']);
 
 app.run(($stateRegistry, $urlService) => {
-  $urlService.rules.initial({state: 'app'});
+  $urlService.rules.initial({ state: 'app' });
 
   $stateRegistry.register({
-      url: '',
-      name: 'app',
-      template: `
+    url: '',
+    name: 'app',
+    template: `
         <a ui-sref=".ng1" ui-sref-active-eq="active">app.ng1</a>
         <a ui-sref=".ng1.ng2" ui-sref-active-eq="active">app.ng1.ng2</a>
         <a ui-sref=".ng2" ui-sref-active-eq="active">app.ng2</a>
         <a ui-sref=".ng2.ng2" ui-sref-active-eq="active">app.ng2.ng2</a>
         <ui-view></ui-view>
-      `
+      `,
   });
 
   // route to ng1 component
   $stateRegistry.register({
-      url: '/ng1',
-      name: 'app.ng1',
-      component: 'ng1Component',
+    url: '/ng1',
+    name: 'app.ng1',
+    component: 'ng1Component',
   });
 
   // nested route to ng2 component
   $stateRegistry.register({
-      url: '/ng2',
-      name: 'app.ng1.ng2',
-      component: Ng2Component,
+    url: '/ng2',
+    name: 'app.ng1.ng2',
+    component: Ng2Component,
   });
 
   // route to ng2 component
   $stateRegistry.register({
-      url: '/ng2',
-      name: 'app.ng2',
-      component: Ng2Component,
+    url: '/ng2',
+    name: 'app.ng2',
+    component: Ng2Component,
   });
 });
 
 // An AngularJS component
 app.component('ng1Component', {
-    template: `
+  template: `
       <h1>ng1 component</h1>
       <a ui-sref="app">Back to app</a>
       <ui-view></ui-view>
     `,
-    controller: function() {
-      this.$onInit = function() {
-        console.log('ng1Component.$onInit()');
-      }
-    }
+  controller: function() {
+    this.$onInit = function() {
+      console.log('ng1Component.$onInit()');
+    };
+  },
 });
 
 // An Angular component
 @Component({
-    selector: 'ng2-component',
-    template: `
+  selector: 'ng2-component',
+  template: `
       <h1>ng2 component</h1>
       <a uiSref="app">Back to app</a>
       <ui-view></ui-view>
-    `
+    `,
 })
 export class Ng2Component {
   ngOnInit() {
@@ -78,7 +77,7 @@ export class Ng2Component {
 const nestedState: NgHybridStateDeclaration = {
   url: '/ng2',
   name: 'app.ng2.ng2',
-  component: Ng2Component
+  component: Ng2Component,
 };
 
 // The root Angular module
@@ -92,7 +91,8 @@ const nestedState: NgHybridStateDeclaration = {
   ],
   declarations: [Ng2Component],
   entryComponents: [Ng2Component],
-}) export class RootModule {
+})
+export class RootModule {
   constructor(private upgrade: UpgradeModule) {}
   ngDoBootstrap() {
     // The DOM must be already be available
@@ -102,14 +102,21 @@ const nestedState: NgHybridStateDeclaration = {
 
 // Using AngularJS config block, call `deferIntercept()`.
 // This tells UI-Router to delay the initial URL sync (until all bootstrapping is complete)
-app.config([ '$urlServiceProvider', $urlService => $urlService.deferIntercept() ]);
+app.config(['$urlServiceProvider', $urlService => $urlService.deferIntercept()]);
 
 // Manually bootstrap the Angular app
-platformBrowserDynamic().bootstrapModule(RootModule).then(platformRef => {
-  // get() UrlService from DI (this call will create all the UIRouter services)
-  const url: UrlService = platformRef.injector.get(UrlService);
+platformBrowserDynamic()
+  .bootstrapModule(RootModule)
+  .then(platformRef => {
+    // get() UrlService from DI (this call will create all the UIRouter services)
+    const url: UrlService = platformRef.injector.get(UrlService);
 
-  // Instruct UIRouter to listen to URL changes
-  url.listen();
-  url.sync();
-});
+    // Instruct UIRouter to listen to URL changes
+    function startUIRouter() {
+      url.listen();
+      url.sync();
+    }
+
+    const ngZone: NgZone = platformRef.injector.get(NgZone);
+    ngZone.run(startUIRouter);
+  });