Hybrid AngularJS/Angular 6 app module dependency issues

Question

I'm currently exploring an upgrade path for a pretty large AngularJS 1.6 app to Angular 6. I have my app bootstrapping as a hybrid app, and I've begun converting individual modules and components. I need to be able to do the migration in chunks, though. It would be nice if I could migrate a module at a time, but I'm running into some issues, to that end.

I have a NavBar directive which resides in my core AngularJS module. That component is being downgraded with downgradeComponent and registered on the AngularJS core module. The landing AngularJS module has a dependency on the core module so that it can use the NavBar . This works fine, because the LandingComponent has also been converted to Angular6 and is being downgraded and registered on the landing AngularJS module.

There is a problem with using the NavBar component inside of any other AngularJS component, though. I have a third AngularJS module called workflows with a ViewWorkflows component that has a NavBar inside its template. When I navigate to that component, I get the following error:

angular.js:14791 Error: No component factory found for NavBarDirective. Did you add it to @NgModule.entryComponents?

I can fix this by converting and then downgrading ViewWorkflows , but since NavBar is being registered as a downgraded AngularJS component, shouldn't any AngularJS module that declares a dependency on the core module have access to it?

Code (Not runnable)

Edit: I've updated the gist to be a little more simple. The landing module is Angular, with an Angular component, <landing> that is downgraded to run on the AngularJS landing module and has a <t-nav-bar> inside it. It has a dependency on the core module which provides the downgraded <t-nav-bar> directive. The <test> component is an AngularJS component registered on the AngularJS landing module that cannot use the <t-nav-bar> . Without even bringing the workflows module into the situation, it doesn't work. What am I doing wrong?

Answer 1

I have managed to sort this out. I was trying to declare the NavBar as an Angular @Directive . It actually needs to be a @Component . After making that switch, it works exactly as expected.

I spun up this repo to test with, and discovered the issue there. It's a new Angular 6 app that I "downgraded" for experimenting.