UI-Router support for Hybrid Angular/AngularJS apps

import{Ng2AboutComponentClass}from"./about.ng2.component";/// ...$stateProvider.state({name:'home',url:'/home',component:'ng1HomeComponent'// AngularJS component or directive name}).state({name:'about',url:'/about',component:Ng2AboutComponentClass// Angular component class reference});.state({name:'other',url:'/other',template:'<h1>Other</h1>',// AngularJS template/controllercontroller:function($scope){/* do stuff */}})

Getting started

dependencies: {  ...  "@angular/common": "^6.0.0",  "@angular/compiler": "^6.0.0",  "@angular/core": "^6.0.0",  "@angular/platform-browser": "^6.0.0",  "@angular/platform-browser-dynamic": "^6.0.0",  "@angular/upgrade": "^6.0.0",   ...  "@uirouter/angular-hybrid": "^6.0.0",  ...}

Add AngularJS moduleui.router.upgrade

letng1module=angular.module('myApp',['ui.router','ui.router.upgrade']);

Create a root Angular NgModule

exportfunctiongetDialogService($injector){return$injector.get('DialogService');}@NgModule({imports:[BrowserModule,// Provide angular upgrade capabilitiesUpgradeModule,// Provides the@uirouter/angular directives and registers// the future state for the lazy loaded contacts moduleUIRouterUpgradeModule.forRoot({states:[contactsFutureState]}),],providers:[// Provide the SystemJsNgModuleLoader when using Angular lazy loading{provide:NgModuleFactoryLoader,useClass:SystemJsNgModuleLoader},// Register some AngularJS services as Angular providers{provide:'DialogService',deps:['$injector'],useFactory:getDialogService},{provide:'Contacts',deps:['$injector'],useFactory:getContactsService},]})exportclassSampleAppModuleAngular{constructor(privateupgrade:UpgradeModule){}ngDoBootstrap(){this.upgrade.bootstrap(document.body,[sampleAppModuleAngularJS.name],{strictDi:true});}}

Defer intercept

ngmodule.config(['$urlServiceProvider',($urlService:UrlService)=>$urlService.deferIntercept()]);

Bootstrap the app

platformBrowserDynamic().bootstrapModule(SampleAppModuleAngular).then((platformRef)=>{// Intialize the Angular Module// get() the UIRouter instance from DI to initialize the routerconsturlService:UrlService=platformRef.injector.get(UIRouter).urlService;// Instruct UIRouter to listen to URL changesfunctionstartUIRouter(){urlService.listen();urlService.sync();}platformRef.injector.get<NgZone>NgZone.run(startUIRouter);});

Route to AngularJS components/templates

var foo = {  name: 'foo',  url: '/foo',  component: 'fooComponent'};$stateProvider.state(foo);var bar = {  name: 'foo.bar',  url: '/bar',  templateUrl: '/bar.html',  controller: 'BarController'};$stateProvider.state(bar);

Route to Angular components

var leaf = {  name: 'foo.bar.leaf',  url: '/leaf',  component: MyNg2CommponentClass};$stateProvider.state(leaf);

Create Angular Feature Modules (optional)

@NgModule({imports:[UIRouterUpgradeModule.forChild({states:[featureState1,featureState2],}),],declarations:[FeatureComponent1,FeatureComponent2],})exportclassMyFeatureModule{}

@NgModule({imports:[BrowserModule,UIRouterUpgradeModule.forChild({ states}),MyFeatureModule],})classSampleAppModule{}

Limitations:

Nested Routing

Resolve

resolve:{  roles:($authService,currentUser)=>$authService.fetchRoles(currentUser);}

// In Angular, the first argument to a resolve is always the Transition object// The resolver (usually) must be exportedexportconstrolesResolver=(transition)=>{constauthService=transition.injector().get(AuthService);constcurrentUser=transition.injector().get('currentUser');returnauthService.fetchRoles(currentUser);}...resolve:{roles:rolesResolver}

import{AuthService,UserToken}from'./auth.service';// Notice that the `Transition` object is first injected// into the resolver using the '$transition$' string tokenexportconstrolesResolver=function($transition$){// Get the AuthService using a class tokenconstauthService:AuthService=transition.injector().get(AuthService);// Get the user object using an InjectionTokenconstuser=transition.injector().get(UserToken);returnauthService.fetchRoles(user).then((resp)=>resp.roles);};exportconstNG2_STATE={name:'ng2state',url:'/ng2state',component:Ng2Component,resolve:{roles:rolesResolver,},};

onEnter/Exit/Retain

exportfunctionng2StateOnEnter(transition:Transition,svc:MyService){console.log(transition.to().name+svc.getThing());}ng2StateOnEnter.$inject=[Transition,'MyService'];exportconstNG2_STATE={name:'ng2state',url:'/ng2state',onEnter:ng2StateOnEnter,};

Examples

UpgradeAdapter vs UpgradeModule