I'm configuring my angular app with fusebox instead of webpack and I want to have 3 separated bundles (polyfills.js, vendor.js and app.js).
In webpack I'm using this:
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
being polyfills.ts
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
// Production
} else {
// Development and test
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}
and vendor.ts
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/compiler';
import '@angular/http';
import '@angular/router';
import '@angular/forms';
import 'rxjs';
import './rxjs-extensions';
with rxjs-extensions.ts
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
Now I changed this to fusebox
fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('~ main.ts vendor.ts');
fuse.bundle('app').instructions('!> [main.ts]').watch().hmr();
In this case polyfills is fine, and vender has all 3rd party dependencies from the app (~main.ts) plus all in vendor.ts, while app has only what is in the project.
It seems to compile fine but then when I execute the code I get a ERROR TypeError: this.http.get(...).map is not a function in my service.get(...).map()
My feeling is that vendor.ts is not importing rxjs-extensions.
Anyone knows how to fix this?
If I use just
fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('> vendor.ts');
fuse.bundle('app').instructions('> main.ts').watch().hmr();
it works, but then my app.js bundle includes too many things and goes from 303K to 2.4MB
Make sure you got the order right. Try WebIndexPlugin it helps to automatically inject scripts. If you post your configuration file it might be able to tell you what's wrong