In my angular2 application, I am currently utilizing https://github.com/ng-bootstrap/ng-bootstrap with webpack2 to compile all ts files.
At the moment, I am only using the Modal Component from NgbModule. However, even in the minified file, I can still see references to NbgAccordian and other modules that are not utilized in my app.
@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15I attempted to use
import { NgbModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';vendor.js file?
vendor.ts
// Angular
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@ng-bootstrap/ng-bootstrap';
import 'moment/moment';
import 'angular2-toaster/angular2-toaster';
import 'angular2-moment';
import 'ng2-tag-input';
import 'ng2-img-cropper';
webpack.prod.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var CompressionPlugin = require("compression-webpack-plugin");
var helpers = require('./helpers');
var packageJson = require('../../package.json');
var version = packageJson.version;
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
var drop_console = true;
//https://github.com/mishoo/UglifyJS2#mangle
//https://github.com/mishoo/UglifyJS2#compressor-options
https://github.com/mishoo/UglifyJS2
module.exports = webpackMerge(commonConfig, {
devtool: "source-map",
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
/**
* Html loader advanced options
*
* See: https://github.com/webpack/html-loader#advanced-options
*/
// TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
htmlLoader: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [
[/#/, /(?:)/],
[/\*/, /(?:)/],
[/\[?\(?/, /(?:)/]
],
customAttrAssign: [/\)?\]?=/]
}
}
}),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
minimize: true,
sourceMap: true,
// Don't beautify output (enable for neater output)
beautify: false,
// Eliminate comments
comments: false,
mangle: {
toplevel : true,
screw_ie8: true,
keep_fnames: false
},
compress: {
screw_ie8: true,
dead_code : true,
unused : true,
warnings: false,
// Drop `console` statements
drop_console: drop_console
}
}),
new CompressionPlugin({
regExp: /\.css$|\.html$|\.js$|\.woff$|\.map$/,
algorithm: "gzip",
threshold: 2 * 1024,
minRatio: 0.8
}),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
});
----------------------------- Updates on 04/20/2017 ---------------------
To exclude unused modules from ng bootstrap, I had to update my modules and component files to import deeplink reference of files instead of root.
app.modules.ts
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
import { NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap/tooltip/tooltip.module';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap/alert/alert.module';
app.component.ts
import {NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap/modal/modal';
import { ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap/modal/modal-dismiss-reasons';
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';
import { NgbTooltipConfig } from "@ng-bootstrap/ng-bootstrap/tooltip/tooltip-config";
vendor.ts
import { NgbModalModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal, NgbTooltipModule, NgbTooltipConfig, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
------ Further Updates ------------
I followed the tree shaking configuration from