Production and Development set-up for Angular 2 with TypeScript using Webpack and Gulp· Angular 2 Typescript Webpack Gulp
This is the directory structure I have.
app.ts bootstraps the angular app.
app/seed-app.ts has the main app component. Other components are inside the components directory with a separate directory for each component which contains its
css files along with the typescript file.
vendor.ts imports all the third-party library the the app uses, which includes angular 2 in this case.
maya ├── CONTRIBUTE.md ├── gulpfile.js ├── maya.conf.nginx ├── node_modules ├── package.json ├── README.md ├── tsconfig.json ├── webpack.config.js └── src ├── app │ ├── components │ │ ├── about │ │ │ ├── about.css │ │ │ ├── about.html │ │ │ └── about.ts │ │ ├── home │ │ │ ├── home.css │ │ │ ├── home.html │ │ │ └── home.ts │ │ │ │ │ │ ├── seed-app.html │ ├── seed-app.ts │ └── services │ └── service.ts ├── app.ts ├── favicon.ico ├── index.html └── vendor.ts
NPM is used for package mamagement.
package.json contains all the required packages which include angular 2 and its dependecies, webpack , gulp, typescript etc.
Typescript and Webpack
Typescript compiler configuration is present in
tsconfig.json. It has
source maps enabled which helps in debugging. Webpack configuration is present in
webpack.config.json. It bundles all the third-party dependencies import in
vendor.ts into a file
vendor.bundle.js. All other code is bundles into a files named
index.html just imports these two files.
For debugging, source maps are enabled in the bundles created for the development mode using gulp.
styleUrl in the typescript file for the component. Gulp tasks are defined in
gulpfile.js for these things, and for running webpack.
To create production package of the application, run
To create development package of the application, run
To run webpack-dev-server which serves the app for development purposes and supports live-reload, run
❯ gulp dev-server # Starts webpack-dev-server at port 8080 serving the app
Currently, all the CSS and HTML files of the application are served separately, there is no way to bundle them in a single file. This was possible in Angularjs as there were no components, and whole CSS of the app could be placed in a single file. In angular 2, doing this can cause css selector conflicts. For HTML in Angularjs, there was template-cache, which could pick all the templates from a single html file.
Angular Dart had components, but it also had transformers which namespaced the CSS selectors according to components and also transformed the url of css files in each component. For html, it had template-cache.
Still waiting for angular2-templatecache and transformers.