lazy-loading-angular | A bare minimum demo for Component Lazy Loading in Angular | Carousel library

I have a hybrid angular-cli that roughly follows Victor Savkin's Lazy Loaded AngularJS guide. AngularJS is bootstraped in the constructor of a LazyLoaded Angular module. The main difference between my app and the guide is that I am trying to wrap the directive inside of some Angular components. Because of how my layout is structured the element will not be available when AngularJS is bootstrapped and may be added or removed at any time.

I currently have a working Angular 4 application with parameterized route with variables placeholders i.e. :zoneId :schemaId :id . I do not want to get rid of these but now that we are converting our app to use lazy loading, I cannot figure out where these parameterized routes go.

Currently app-routing.module.ts(which is imported into app-module.ts) has

I am trying to debug an error I am receiving in my hybrid Angular/AngularJS application on reloading. You can see an example of this at stackblitz. This method of bootstrapping AngularJS in an Angular app is based on Victor Savkin work.

...

I have a hybrid/lazy-loaded Angular/AngularJS application which uses both the new Angular router and ui-router version 0.4.2 with parallel outlets/views. To accomplish this I have followed Victor Savkin's Lazy Loaded AngularJS guide In general, this is working well and I can switch between Angular routes and AngularJS routes. However, I am running into an issue where ui-router child views are not shown when the page first opens.

This issue only affects states if trying to load the child state on boot. Navigating between routes does not encounter the same issue. I have also determined that it only occurs in routes when the parent state template is wrapped by a downgraded Ng2 component.