feat(router): add a provider making angular1/angular2 integration easier (#12769)

build.sh

@@ -14,8 +14,8 @@ PACKAGES=(core
   platform-webworker
   platform-webworker-dynamic
   http
-  router
   upgrade
+  router
   compiler-cli
   benchpress)
 BUILD_ALL=true
@@ -103,8 +103,10 @@ do
   UMD_ES5_PATH=${DESTDIR}/bundles/${PACKAGE}.umd.js
   UMD_TESTING_ES5_PATH=${DESTDIR}/bundles/${PACKAGE}-testing.umd.js
   UMD_STATIC_ES5_PATH=${DESTDIR}/bundles/${PACKAGE}-static.umd.js
+  UMD_UPGRADE_ES5_PATH=${DESTDIR}/bundles/${PACKAGE}-upgrade.umd.js
   UMD_ES5_MIN_PATH=${DESTDIR}/bundles/${PACKAGE}.umd.min.js
   UMD_STATIC_ES5_MIN_PATH=${DESTDIR}/bundles/${PACKAGE}-static.umd.min.js
+  UMD_UPGRADE_ES5_MIN_PATH=${DESTDIR}/bundles/${PACKAGE}-upgrade.umd.min.js
   LICENSE_BANNER=${PWD}/modules/@angular/license-banner.txt
 
   rm -rf ${DESTDIR}
@@ -112,6 +114,11 @@ do
   echo "======      COMPILING: ${TSC} -p ${SRCDIR}/tsconfig-build.json        ====="
   $TSC -p ${SRCDIR}/tsconfig-build.json
 
+  if [[ -e ${SRCDIR}/tsconfig-upgrade.json ]]; then
+    echo "======      COMPILING: ${TSC} -p ${SRCDIR}/tsconfig-upgrade.json        ====="
+    $TSC -p ${SRCDIR}/tsconfig-upgrade.json
+  fi
+
   cp ${SRCDIR}/package.json ${DESTDIR}/
   cp ${PWD}/modules/@angular/README.md ${DESTDIR}/
 
@@ -172,6 +179,18 @@ do
         mv ${UMD_STATIC_ES5_PATH}.tmp ${UMD_STATIC_ES5_PATH}
         $UGLIFYJS -c --screw-ie8 --comments -o ${UMD_STATIC_ES5_MIN_PATH} ${UMD_STATIC_ES5_PATH}
       fi
+
+      if [[ -e rollup-upgrade.config.js ]]; then
+        echo "======         Rollup ${PACKAGE} upgrade"
+        ../../../node_modules/.bin/rollup -c rollup-upgrade.config.js
+        # create dir because it doesn't exist yet, we should move the src code here and remove this line
+        mkdir ${DESTDIR}/upgrade
+        echo "{\"main\": \"../bundles/${PACKAGE}-upgrade.umd.js\"}" > ${DESTDIR}/upgrade/package.json
+        cat ${LICENSE_BANNER} > ${UMD_UPGRADE_ES5_PATH}.tmp
+        cat ${UMD_UPGRADE_ES5_PATH} >> ${UMD_UPGRADE_ES5_PATH}.tmp
+        mv ${UMD_UPGRADE_ES5_PATH}.tmp ${UMD_UPGRADE_ES5_PATH}
+        $UGLIFYJS -c --screw-ie8 --comments -o ${UMD_UPGRADE_ES5_MIN_PATH} ${UMD_UPGRADE_ES5_PATH}
+      fi
     ) 2>&1 | grep -v "as external dependency"
 
   fi

modules/@angular/router/package.json

@@ -24,6 +24,7 @@
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
     "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "@angular/upgrade": "0.0.0-PLACEHOLDER",
     "rxjs": "5.0.0-beta.12"
   }
 }

modules/@angular/router/rollup-upgrade.config.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export default {
+  entry: '../../../dist/packages-dist/router/upgrade.js',
+  dest: '../../../dist/packages-dist/router/bundles/router-upgrade.umd.js',
+  format: 'umd',
+  moduleName: 'ng.router.upgrade',
+  globals: {
+    '@angular/core': 'ng.core',
+    '@angular/common': 'ng.common',
+    '@angular/router': 'ng.router',
+    '@angular/upgrade/static': 'ng.upgrade.static'
+  }
+};

modules/@angular/router/src/index.ts

@@ -13,9 +13,9 @@ export {RouterLinkActive} from './directives/router_link_active';
 export {RouterOutlet} from './directives/router_outlet';
 export {CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve} from './interfaces';
 export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationExtras, NavigationStart, Router, RoutesRecognized} from './router';
-export {ExtraOptions, RouterModule, provideRoutes} from './router_module';
+export {ExtraOptions, ROUTER_CONFIGURATION, ROUTER_INITIALIZER, RouterModule, provideRoutes} from './router_module';
 export {RouterOutletMap} from './router_outlet_map';
-export {NoPreloading, PreloadAllModules, PreloadingStrategy} from './router_preloader';
+export {NoPreloading, PreloadAllModules, PreloadingStrategy, RouterPreloader} from './router_preloader';
 export {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './router_state';
 export {PRIMARY_OUTLET, Params} from './shared';
 export {UrlHandlingStrategy} from './url_handling_strategy';

modules/@angular/router/src/router_module.ts

@@ -278,11 +278,20 @@ export function initialRouterNavigation(
   };
 }
 
+/**
+ * A token for the router initializer that will be called after the app is bootstrapped.
+ *
+ * @experimental
+ */
+export const ROUTER_INITIALIZER = new OpaqueToken('Router Initializer');
+
 export function provideRouterInitializer() {
-  return {
-    provide: APP_BOOTSTRAP_LISTENER,
-    multi: true,
-    useFactory: initialRouterNavigation,
-    deps: [Router, ApplicationRef, RouterPreloader, ROUTER_CONFIGURATION]
-  };
+  return [
+    {
+      provide: ROUTER_INITIALIZER,
+      useFactory: initialRouterNavigation,
+      deps: [Router, ApplicationRef, RouterPreloader, ROUTER_CONFIGURATION]
+    },
+    {provide: APP_BOOTSTRAP_LISTENER, multi: true, useExisting: ROUTER_INITIALIZER}
+  ];
 }

modules/@angular/router/src/router_preloader.ts

@@ -69,6 +69,8 @@ export class NoPreloading implements PreloadingStrategy {
  * will check if any configurations can be loaded lazily.
  *
  * If a route is protected by `canLoad` guards, the preloaded will not load it.
+ *
+ * @stable
  */
 @Injectable()
 export class RouterPreloader {

modules/@angular/router/tsconfig-upgrade.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noEmitOnError": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "outDir": "../../../dist/packages-dist/router",
+    "paths": {
+      "@angular/core": ["../../../dist/packages-dist/core"],
+      "@angular/router": ["../../../dist/packages-dist/router"],
+      "@angular/upgrade/static": ["../../../dist/packages-dist/upgrade/static"]
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "lib": ["es2015", "dom"],
+    "target": "es5",
+    "skipLibCheck": true
+  },
+  "files": [
+    "upgrade.ts"
+  ],
+  "angularCompilerOptions": {
+    "strictMetadataEmit": true
+  }
+}

modules/@angular/router/upgrade.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {APP_BOOTSTRAP_LISTENER, ApplicationRef, OpaqueToken} from '@angular/core';
+import {ExtraOptions, ROUTER_CONFIGURATION, ROUTER_INITIALIZER, Router, RouterPreloader} from '@angular/router';
+import {UpgradeModule} from '@angular/upgrade/static';
+
+
+/**
+ * @whatItDoes Creates an initializer that in addition to setting up the Angular 2
+ * router sets up the ngRoute integration.
+ *
+ * @howToUse
+ *
+ * ```
+ * @NgModule({
+ *  imports: [
+ *   RouterModule.forRoot(SOME_ROUTES),
+ *   UpgradeModule
+ * ],
+ * providers: [
+ *   RouterUpgradeInitializer
+ * ]
+ * })
+ * export class AppModule {
+ *   ngDoBootstrap() {}
+ * }
+ * ```
+ *
+ * @experimental
+ */
+export const RouterUpgradeInitializer = {
+  provide: ROUTER_INITIALIZER,
+  useFactory: initialRouterNavigation,
+  deps: [UpgradeModule, ApplicationRef, RouterPreloader, ROUTER_CONFIGURATION]
+};
+
+export function initialRouterNavigation(
+    ngUpgrade: UpgradeModule, ref: ApplicationRef, preloader: RouterPreloader,
+    opts: ExtraOptions): Function {
+  return () => {
+    const router = ngUpgrade.injector.get(Router);
+    const ref = ngUpgrade.injector.get(ApplicationRef);
+
+    router.resetRootComponentType(ref.componentTypes[0]);
+    preloader.setUpPreloading();
+    if (opts.initialNavigation === false) {
+      router.setUpLocationChangeListener();
+    } else {
+      setTimeout(() => { router.initialNavigation(); }, 0);
+    }
+
+    // History.pushState does not fire onPopState, so the angular2 location
+    // doesn't detect it. The workaround is to attach a location change listener
+    // that will call navigate directly.
+    ngUpgrade.$injector.get('$rootScope')
+        .$on('$locationChangeStart', (_: any, next: string, __: string) => {
+          const url = document.createElement('a');
+          url.href = next;
+          router.navigateByUrl(url.pathname);
+        });
+  };
+}

tools/public_api_guard/router/index.d.ts

@@ -217,6 +217,12 @@ export declare class Router {
     setUpLocationChangeListener(): void;
 }
 
+/** @stable */
+export declare const ROUTER_CONFIGURATION: OpaqueToken;
+
+/** @experimental */
+export declare const ROUTER_INITIALIZER: OpaqueToken;
+
 /** @stable */
 export declare class RouterLink {
     fragment: string;
@@ -295,6 +301,14 @@ export declare class RouterOutletMap {
     removeOutlet(name: string): void;
 }
 
+/** @stable */
+export declare class RouterPreloader {
+    constructor(router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, preloadingStrategy: PreloadingStrategy);
+    ngOnDestroy(): void;
+    preload(): Observable<any>;
+    setUpPreloading(): void;
+}
+
 /** @stable */
 export declare class RouterState extends Tree<ActivatedRoute> {
     snapshot: RouterStateSnapshot;