This starter kit have following dependencies, and based on Angular Webpack Setup
- Angular 2
- TypeScript
- Webpack - For bundling
- Karma and Jasmine - For Testing
- TSLint and codelyzer - For Linting, Codelyzer provides Angular specific linting rules
- Istanbul - For code coverage
npm run lint: Lints source codenpm test: Tests the application with Karma, Jasmine and Phantomjs by executing test cases, and generates code coverage reportnpm build:dev: Builds chunks, extracts all the dependencies, bundles and minifiesnpm build:prod: Builds chunks, extracts all the dependencies, bundles and minifies, file names contains hash value which is useful for cache busting.
-
Assets
Contains images which are used by Angular Templates, Build process extracts the images, copies them to assets folder with a hash based name.
Source Template (relative path to image)
<img src="../content/images/box.png"/>
Final Output
<img src="/static/assets/box.a4116360ad7b34f5becb9b3964e6fdb7.png">
-
Chunks
- CSS Chunk : Contains references to all the css files extracted during build process
<link href="static/css/app.521d2ef912fab45e5682.css" rel="stylesheet">
- JS Chunk : Contains references to all the JS files extracted during build process
<script src="static/js/polyfills.521d2ef912fab45e5682.js"></script> <script src="static/js/vendor.521d2ef912fab45e5682.js"></script> <script src="static/js/app.521d2ef912fab45e5682.js"></script>
For Asp .NET MVC applications, these chunks can be included in _Layout.cshtml using @RenderPage
<!DOCTYPE html> <html> <head> ... @RenderPage("~/static/chunks/chunk-css.cshtml") </head> <body> ... @RenderPage("~/static/chunks/chunk-js.cshtml") </body> </html>For other applications, like node, one can use tools like cheerio to alter template/layout page at build time.
-
CSS Contains css which is extracted from templates or referenced by templates.
-
JS Contains three js files (Poylfill, Vendor, and App) which are three entry points for app (Refer module.exports.entry in webpack.common.js).