I am learning Webpack for quite a while and came across a weird behavior.
As described in the Webpack Introduction on angular.io
I am importing all my vendor modules into the vendor.ts-file, all polyfills into the polyfill.ts-file and initialize my app within the main.ts-file.
Thus, I added the following entry points and the CommonsChunkPlugin in my config for Webpack:
// webpack.config.js -->
entry: {
'polyfill': './src/polyfill.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
}
// ...
new Webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfill']
})
Consequently, Webpack should realize that vendor.ts and app.ts has common modules in use and add it to the vendor.js-file only. The vendor.ts-file does look like this:
// vendor.ts -->
// Angular 2.
import '@angular/platform-browser';
// ...
import '@angular/router';
// RxJS.
import 'rxjs';
// Web Font Loader.
import * as WebFont from 'webfontloader';
// Font Awesome.
import '../node_modules/font-awesome/css/font-awesome.css';
Unfortunately, this behavior works as expected with all modules that I imported via import MODULE, but does not work with modules that I imported via import * as ALIAS from MODULE. In this example the webfontloader-module is written into app.js as I also import it there, although it should have shared dependencies with the vendor.ts-file as well.
// app.ts -->
// Initialize Angular.
platformBrowserDynamic().bootstrapModule(AppModule);
// Load Fonts.
WebFont.load({
google: {
families: ['Lato:400,700']
}
});
When I change import * as WebFont from 'webfontloader'; to let WebFont = require('webfontloader'); it does work.
What's wrong? Why are all imports of angular working then?
