I am currently developing an Angular2 application and I am aiming to use gulp and browserify for the build process.
By utilizing tsify, I was able to create a standalone bundle.js file, which ended up being 1.4M in size after minification.
What I desire is to have two distinct bundle files: one for vendor dependencies and another for my application.
Essentially, here is what I envision:
<!-- Ideal index.html script tags -->
<script src="bundle_vendors.js"></script>
<script src="bundle_app.js"></script>
This is the approach I took via command line:
I first generated the vendor bundle:
browserify app/vendor.ts -p [tsify ] > bundle_vendors.js
The content of my vendor.ts file simply consists of import statements:
import 'zone.js'
import 'reflect-metadata'
import '@angular/core'
import '@angular/http'
import '@angular/router'
import '@angular/common'
import '@angular/platform-browser'
import '@angular/platform-browser-dynamic'
import 'rxjs/Rx'
Next, I created the application bundle:
browserify -x @angular/core -x @angular/common -x @angular/http -x @angular/router -x rxjs/Rx -x @angular/platform-browser -x zone.js -x reflect-metadata -x @angular/platform-browser-dynamic app/main.ts -p [tsify ] > bundle_app.js
Here is how my tsconfig.json looks like:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node",
"lib": ["es6", "dom"],
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
},
"compileOnSave": false,
"exclude": [
]
}
The positive side: The second bundle specifically contains my application code and it's significantly smaller!
The downside: It doesn't seem to work as intended. When loaded in the browser, I encounter an error stating
Uncaught Error: Cannot find module '@angular/core'Now onto the questions:
- Is there something obvious that I might be overlooking?
- How can I determine the modules available for
requireafter loading thebundle_vendors.js? Essentially, I'm seeking a list of modules that are 'exported' for other bundles to import.
I'm a bit lost on where to begin debugging this issue.
According to my research, an alternative could be using angular-cli (which utilizes webpack), but since the project already uses gulp, I prefer to make it work with the current setup. Plus, I have invested quite some time into it now.
Any assistance would be highly appreciated!