What these angular-cli do: inline.bundle.js, vendor.bundle.js, main.bundle.js?

Question

If I check the index.html file of angular 2 project created with angular-cli, I can see the page only include 3 files from dist folder:

inline.bundle.js
vendor.bundle.js
main.bundle.js

But now I am trying to understand what each file do. I wrote component with the angular-cli, I have downgrade so I can use it in another app written with angular 1. If I just add these 3 files to my index.html, plus adding app.module.ts file, seems like I have upgrade my app and everything is working. I'm trying to understand why, because the google angular tutorial does not talk about angular-cli and how it can help with the migration.

Solution 1

Let's see:

inline.bundle.js

This is a webpack loader. A tiny file with Webpack utilities that are needed when loading other files.

Eventually this will be written inside the index.html file itself and not being generated as a separate file at all.

vendor.bundle.js

This is generated by default in dev mode, and ignored by default in prod mode (ng build -prod or ng serve -prod).

It includes the Angular libraries with little or no modification. This is to speed up the build process. Also some people think it's a good idea to keep these in a separate file when it doesn't change much and then it can be cached for longer.

The typical Angular approach though is to merge them into the main bundle, and when doing so, run Webpack tree-shaking, which removes any EcmaScript / TypeScript modules that were never imported from any other modules in your app and its imports. This means the final bundle is much smaller. For example, when running Ahead of Time compiler (AoT), the Angular Compiler gets tree-shaked away.

You can explicitly control generating a separate vendor bundle or not by setting the argument --vendor-chunk.

main.bundle.js

Your own code, and anything else you imported etc, as explained in previous point.

Solution 2

As of Angular 6, the generated files don’t have .bundle or .chunk in their names anymore. main.bundle.js is now main.js, admin.module.chunk.js is now admin-admin-module-ngfactory.js, reflecting that my AdminModule is in an admin directory in my project. That’s to allow people to have two modules with the same name in different locations. And inline.bundle.js has been renamed runtime.js.

Comments

[AngularOne]

I also added the bootsrap issue from app.module as explained in details in the angular docs for upgrading.

[AngularOne]

10xm thats make sene a lot. If I just copy these 3 files and include them in angular 1 app index.html, is that a good way to get angular 2 working in hybrid app?

[Meligy]

No. I don't think so. You need to look into @angular/upgrade, and I'm guessing that won't work well with Angular CLI, which is really Angular 2+.

[AngularOne]

Can I add webpack and don't use the inline.bundle.js?

[Meligy]

Not sure what you mean by that. It's Webpack who adds the inline file. It's a small loader that it uses to load the rest of the files. You can use Webpack directly without Angular CLI though if that's what you mean.

[AngularOne]

I am trying to understand which files I need to include in my index.html of angular 1app that will help me to bootstrap with angular 2

[Lutz]

Hi, thanks for taking the time to contribute. It may be very helpful for the community if answers are written also for older questions.What you have written, however, doesn't seem to answer the question at all. The question was about what the generated files are. You don't say that. You just mention that they have been renamed in a more recent Angular version. This may be a valid and even valuable information - but it should go into a comment; it's not an answer to the question.

[Akash Bhardwaj]

Totally agree with you @Lutz but I don't have enough reputation points yet (at least 50 are required).