What is the purpose of and what should be included in the vendor.ts file for Angular2 w/ webpacks?

4.2k views Asked by At

The angular.io documentation for webpacks (https://angular.io/docs/ts/latest/guide/webpack.html) separates app code from vendor code modules to create two separate bundles. It includes the following in the vendor.ts file -

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

Am I wrong to infer that dependencies of the app listed in the package.json should be in vendor.ts? If so, it's confusing that many, but not all of the dependencies listed in the package.json are in the vendor.ts file (except for "@angular/compiler", "@angular/forms", "core-js", and "zone.js"). An answer to the title question that would help me understand why most, but not all of the dependencies in the vendor.ts file were imported would be appreciated. Also, as my project grows, how will I know if a dependency in package. json should be added to the vendor.ts file?

1

There are 1 answers

2
Roman C On

Because these dependencies used mostly in many application configurations. You can chose any dependency to any chunk. The chunk plugin lets you to separate dependencies from your application code and build in modular way.

If you add a new dependency to the vendor.ts then it will be there, otherwise it will go to another chunk.