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?
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?
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.