Load Angularjs bundle in a hybrid application with Angular 7

Question

I have a big application and I applied some changes to make it Hybrid.

It will work fine if the old bundle of Angularjs app loads first on time. (it is a 4-5MB bundle) I was checking the samples on the net and most of them just say the same. for example:

https://github.com/manfredsteyer/ngUpgrade-lite-sample/blob/master/src/index.html

this will work because it is a small app and he is just importing all the modules and components manually and it is not possible in my app with more than 200 component.

So what is the best approach to load the bundle of Angularjs app before anything in Angular hybrid app?

I was bundling the old app with Webpack 4 and also tried to import it in main.ts file and also tried the script in angular.json and no luck it gives me the error:

Uncaught Error: [$injector:nomod] Module 'app' is not available!

which I suppose it must be because the angularjs is not loaded, before the new angular 7 bootstrap the application

Answer 1

Ok guys, I just figured it out. There are 2 ways to do this, first by creating a Javascript loader which you can find how to that here:

https://davidwalsh.name/javascript-loader

The other solution which I did is to make a one unique build process. This means I took out completely the Angular 7 build process and replicate it in my Angularjs Webpack config so the final result is one bundle which contains both of applications in the same bundle.

For doing this you can take a look at this package that provides you the build tools for Angular in Webpack:

https://github.com/angular/ngtools-webpack-builds

Just remember that you should handle html and scss files by raw-laoder in your Webpack config file.

I will update this post to provide more information if I found something new.