Angular Hybrid mock-up

app.module.ts

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app.routing';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { LandingModule } from './landing';

@NgModule({
    imports: [
        AppRoutingModule,
        BrowserModule,
        UpgradeModule,
        LandingModule,
    ]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) { }
    public ngDoBootstrap() {
        this.upgrade.bootstrap(document.body, ['360view']);
    }
}

platformBrowserDynamic().bootstrapModule(AppModule);

core.module.ts

@NgModule({
    declarations: [
        NavBarDirective
    ],
    exports: [
        NavBarDirective
    ],
    providers: [
        DuplicateNameService
    ]
})
export class CoreModule { }

const DIRECTIVES = [
    ...
];

const PROVIDERS = [
    ...
];

const SERVICES = [
    ...
];

const FILTERS = [
    ...
];

//AngularJS module declaration w/ custom wrapper for `angular.module()`
const MODULE_NAME: string = '360view.core';
NgModule1(MODULE_NAME, [
    '360view.core.components',
    '360view.core.state.manager',
    '360view.core.dialog',
],
    [
        ...DIRECTIVES,
        ...FILTERS,
        ...PROVIDERS,
        ...SERVICES,
    ])

landing.module.ts

import { NgModule } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';
import * as angular from 'angular';
import { CoreModule } from 'core';
import { LandingComponent } from './landing';

@NgModule({
    declarations: [
        LandingComponent
    ],
    entryComponents: [
        LandingComponent
    ],
    imports: [
        CoreModule
    ]
})
export class LandingModule { }

angular.module('360view.landing', [])
    .directive('landing', downgradeComponent({ component: LandingComponent }))
    .component('test', {
        template: '<t-nav-bar title="Test"></t-nav-bar>' //t-nav-bar cannot be found
    })
    .config(['$stateProvider', ($stateProvider) => {
        $stateProvider.state('Landing', {
            component: 'landing',
            url: '/',
        })
        .state('Test', {
            component: 'test',
            url: '/test'
        });
    }]);

landing.ts

import { Component } from '@angular/core';

@Component({
    selector: 'landing',
    template: '<t-nav-bar title="Dashboard"></t-nav-bar>' //t-nav-bar is rendered fine here
})
export class LandingComponent { }

view.workflows.ts

import { Component } from 'core/decorators';

//Registers downgraded component on AngularJS module
@Component1({
    route: {
        redirectTo: 'Workflows.View.Overview',
        state: 'Workflows.View',
        url: '',
    },
    selector: 'viewWorkflows',
    template: `<t-nav-bar title="Workflows"></t-nav-bar>` //t-nav-bar is nowhere to be found
})
export class ViewWorkflowsComponent implements ng.IComponentController {}

workflows.module.ts

// Without this module declaration and converting ViewWorkflows into a dowgraded Angular component, I can't use a `<t-nav-bar>` 
// directive inside the template of the ViewWorkflowsComponent. Why? The AngularJS module has a dependency on `360view.core`, 
// and `<t-nav-bar>` is registered as a downgraded component. What gives?
// @NgModule({
//     declarations: [
//         ViewWorkflowsComponent
//     ],
//     entryComponents: [
//         ViewWorkflowsComponent
//     ],
//     imports: [
//         CoreModule
//     ]
// })
// export class WorkflowsModule { }

const MODULE_NAME: string = '360view.workflows';

 //AngularJS module declaration w/ custom wrapper for `angular.module()`
NgModule1(MODULE_NAME, [
    '360view.core', 'ui.router'
], [
    ...COMPONENTS,
    ...DIRECTIVES,
    WorkflowsService,
    WorkflowTypeDialogService,
]);