uirouter/angular-hybrid AoT build bootstrapModuleFactory promise injector fails to get UIRouter

Question

I've got a sample uirouter/angular-hybrid app, successfully built with @ngtools/webpack AngularCompiler plugin and running. I've updated the main.aot.ts boot function to use bootstrapModuleFactory and can get the injector from the platformRef available in the promise success handler. But injector.get(UIRouter) fails with "Cannot read property 'config' of null."

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then((platformRef) => {
  const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
  function startUIRouter() {
    urlService.listen();
    urlService.sync();
  }

  platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);   
});

I confirmed that the injector.get(NgZone) will succeed and injector.get(UIRouter) will fail. I tried moving the call to injector.get(UIRouter) inside the NgZone run func without success.

I also tried moving the upgrade.bootstrap call into the promise success function above to ensure it had booted first, without fixing the problem.

A simple angularjs component is rendering fine, so the boot process seems to be succeeding, except for not being able to call the listen() and sync() functions on the UIRouter.urlService.

I also confirmed the development config and non-aot production config, for this same sample app, do not have this problem and seem to be working fine.

Using versions:

uirouter/angular-hybrid v6.0.2

angular packages at v7.1.4, but also failed with 6.0.0 (which is the angular version in the package.json in the docs for uirouter/angular-hybrid v6.0.2)

Thanks for any ideas.

score 0 · Accepted Answer · answered Jan 03 '19 at 19:07

The problem was that the config object I was passing to UIRouterUpgradeModule.forRoot was being imported from a file that was using a default export of the object, and the object had a reference to a config function that was not being exported. This combination hid the problem during the build, and resulted in the symptom at runtime of not having the UIRouter object available to the injector.

Replacing the default export with a named export triggered the AOT compiler to complain about the non-exported function reference. Additionally exporting the function then allowed a successful build, a happy injector, and a successful runtime boot.

uirouter/angular-hybrid AoT build bootstrapModuleFactory promise injector fails to get UIRouter

1 Answers1