States from NgModules not registered at bootstrap

[christopherthielen]

Only states from a lazy loaded module are registered. States in the NgModule being bootstrapped are not registered.

[Awk34]

Ah. I was wondering about that. I haven't been creating lazy-loaded routes since I haven't seen any examples of how to do it with Webpack.

[christopherthielen]

Fixed in https://github.com/ui-router/ng1-to-ng2/releases/tag/1.0.15

[samjetski]

We're still having this issue.

When we use the visualiser, we can see that states declared on any NgModule are not loaded. But when we navigate to an ng1-declared state which uses an ng2 component, all the NgModule-declared states then appear. Can't work out why...

We're using Webpack, no lazy loading.

[christopherthielen]

@samjetski

Both UIRouterModule.forChild() and Ng1ToNg2Module declare an NgModule with stuff in it. However, it doesn't implicitly instantiate anything from those modules. If you never inject anything that depends on the ng2 UI-Router (for example, a component that uses a UIView or uiSref), ng2 DI never instantiates anything from the forChild() module, so the routes don't get registered.

We need to inject something ng2 for UIRouter

Try this:

• Call deferIntercept() on $urlRouterProvider (tell ui-router not to check url until you're ready)
• Add a .ready() to your ngUpgrade bootstrap which:
  • Gets UIRouter class for ng2 from the injector
  • Calls listen() and sync() on the $urlRouter

function readyFn(ref: UpgradeAdapterRef) {
     // Causes ng2 ui-router bootstrap to happen
     ref.ng2Injector.get(UIView);  // geta an ng2 class to trigger DI
     let $urlRouter = ref.ng1Injector.get('$urlRouter');
     $urlRouter.listen();
     $urlRouter.sync();
 }
 
upgradeAdapter.bootstrap(document.body, [...]).ready(readyFn);

This is conceptually similar to ng1 inject in a run() block like so:

app.run([ '$uiRouter', function($uiRouter) {} ])