lerna init && lerna bootstrap --loglevel verbose

cat lerna.json =>
{
  "lerna": "2.11.0",
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}

cd packages
npm install -g @angular/cli

ng new ng-demo
cd ng-demo

pwd =>
<project-root>/packages/ng-demo

<!-- bootstrap point for AngularJS -->
<div ng-app="demo-app" class="ng-cloak">
    <ng-view></ng-view>
</div>

<!-- bootstrap point for Angular5 -->
<ng-demo></ng-demo>

(function (angular) {
  angular.module('demo-app').config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/test', {
          templateUrl: 'route-one.html',
          controller: 'FirstController',
          controllerAs: 'ctrl',
          bindToController: true
        })
        // and many more
        ;
    },
  ]);
}(window.angular));

import { Routes } from '@angular/router';
import { EmptyComponent } from 
'./shared/components/empty/empty.component';

export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
    canActivate: [
    ],
  },
  {
    path: '**', // to be friendly with others 
    component: EmptyComponent, // does nothing
  },
];

<!-- bootstrap point for AngularJS -->
<div ng-app="demo-app" class="ng-cloak">
    <ng-view></ng-view>
</div>

<!-- bootstrap point for Angular5 -->
<ng-demo></ng-demo>
<ng-demo-one-more></ng-demo-one-more>

// custom boostrapper
const bootstrapRootComponent = (app, selector, component) => {
  // check root element existance
  if (window.document.querySelector(selector)) {
    app.bootstrap(component);
  }
};
// components registry selector: component
const entryComponentsRegistry = {
  'ng-demo': NgDemoComponent,
  'ng-demo-one-more': OneMoreRootNgDemoComponent
};

// ...
export class AppModule {
  ngDoBootstrap(app) {

    for (const selector in entryComponentsRegistry) {
      bootstrapRootComponent(app, selector, entryComponentsRegistry[selector]);
    }
  }
}

// created in constructor
  formGroup: FormGroup;
  protected formGroupValuesChanges: Subscription;

  @Input() value = {};
  @Output() onChangeCallback: EventEmitter<any>;
  @Output() onSubmitValue: EventEmitter<any>;

  protected debounceTime = 300;
  protected patchOptions = { emitEvent: false };

  ngOnInit() {
    const patch = Object
      .keys(this.formGroup.controls)
      .reduce(this.getFormGroupValuesReducer(), {});

    this.formGroup.patchValue(patch, this.patchOptions);

    this.formGroupValuesChanges = this.formGroup.valueChanges
    .debounceTime(this.debounceTime)
    .subscribe(() => {
      this.onChangeCallback.emit(this.getAggregatedValue());
    });
  }

getFormGroupValuesReducer() {
    return (acc: Object, field: string) => {
      acc[field] = this.value[field];

      return acc;
    };
  }

  onSubmit() {
    if (this.formGroup.valid) {
      this.onSubmitValue.emit(this.getAggregatedValue());
    }
  }

  getAggregatedValue() {
    return {
      ...this.value,
      ...this.formGroup.value,
    };
  }

export class DemoContainerComponent implements OnInit {

  items$: Observable<Items[]>;

  constructor(private store: Store<fromItems.State>) {
    this.items$ = store.select(fromItems.getItems);
  }

  ngOnInit() {
    // silly place to do it 
    this.store.dispatch(new itemsActions.Load());
  }
}

{
  path: '',
  component: DemoContainerComponent,

  resolve: {
    doesNotMetterWhatKey: DemoResolver,
  },
  children: [
    ...
  ...
}

@Injectable()
export class DemoResolver implements Resolve<Item[]> {

  constructor(
    private store: Store<itemsReducers.State>,
  ) { }
  // carefull with the return value, if you are not 
  // returning void resolver will wait for end of Obs..
  resolve(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): Observable<Item[]> {

    return this.store
      .select(itemsReducers.selectItems)
      .do((items: Item[]) => {
        if (items.length === 0) {
          this.store.dispatch(new itemsActions.Load());
        }
      })
      .take(1);
  }
}

export const waitForUserToLoad = (store): 
Observable<boolean> => {
  return store
    .select(fromAuth.authInProgress)
    .map((isLoading: boolean) => isLoading)
    .filter(isLoading => !isLoading)
    .first();
};

@Injectable()
export class UserLoadedGuard 
implements CanActivate {

  constructor(
    private store: Store<fromAuth.State>,
  ) {}

  canActivate(route: ActivatedRouteSnapshot): 
  Observable<boolean> {
    return waitForUserToLoad(this.store)
      .switchMap(() => {
        return Observable.from([true]);
      });
  }
}

// main.ts

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

const meta = document
  .querySelector('meta[name="static-base-url"]');

const baseUrl = meta ? meta.getAttribute('content') : '/';

declare let __webpack_public_path__;

if (environment.production) {
  __webpack_public_path__ = `${baseUrl}js/`;
  enableProdMode();
} else {
  __webpack_public_path__ = `/`;
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

(function(angular) {
  function PubSubService() { return window.PubSub; }

  angular.module('demo-app')
    .factory('PubSubService', PubSubService);
})(window.angular);


(function(angular) {
  function StoreBridgeService(PubSubService) {
    this.PubSubService = PubSubService;
  }

  angular.extend(StoreBridgeService.prototype, {
    dispatch: function(action) {
      this.PubSubService.publish('Store::dispatch', action);
    }
  });

  StoreBridgeService.$inject = ['PubSubService'];

  angular.module('demo-app')
    .service('StoreBridgeService', StoreBridgeService);
})(window.angular);

@Injectable()
export class PubsubService {
  public instance: any = null;

  constructor() {
    this.instance = PubSub;
  }
}

@Injectable()
export class StoreBridgeService {

  constructor(
    private pubsub: PubsubService,
    private store: Store<appReducers.State>,
  ) {
    this.pubsub.instance.subscribe('Store::dispatch', 
    (msg, data) => {
      this.store.dispatch(data);
    });
  }
}