Problem building Hybrid Angular App to production. AOT compiler break downgraded components

I will try to explain my problem in the best way. I am migrating an AngularJS application to Angular 12. I need the two applications to run in parallel for the migration to be gradual. I used the NgUpgrade library and I'm running the two applications as if they were one.

Some strategies to do this migration suggested a preparation in the JS files, but due to the size of the system, this becomes impossible.

For development everything is running perfectly. The user-visible interface is AngularJS. Screens that are already converted are created in Angular and the component is downgraded. After that, a new route is registered in AngularJS states.js where this component that was downgraded is called.

The problem is when I try to build for production. The AOT compiler seems to "remove" my component drowngrades and in the end I'm stuck with this message:

Image Link

How am I downgrading the component

declare var angular: any;
angular.module('aprove')
.directive(
'equipamentosCadastro',
downgradeComponent({ component: EquipamentosCadastroComponent })
);


I tried to remove AOT compilation mode but the application won't start and I ended up getting stuck in a dead end. Where with AOT the new components don't open and with JIT compilation the whole system doesn't open :/

I'm not really sure what else I can write here but if you need any more information I'm happy to make it available.

Continue reading...