├── .gitignore ├── LICENSE.txt ├── README.md ├── package.json ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ └── app.module.ts ├── index.html ├── main.ts └── typings.d.ts ├── tsconfig.json ├── typings.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /dist/ 2 | /node_modules/ 3 | /typings/ 4 | /.idea/ 5 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2016 Encoded Knowledge Ltd - http://encodedknowledge.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 Starter 2 | 3 | A simple Angular 2 starter project based on NPM, TypeScript, and Webpack. 4 | Used to show how to set up a project build workflow from scratch. 5 | 6 | This `master` branch contains the simplest configuration. Other branches show some additional features: 7 | 8 | * [webpack2-aot](https://github.com/mirkonasato/angular2-course-webpack-starter/tree/webpack2-aot): Ahead-of-Time template compilation, using Webpack 2 and the [@ngtools/webpack](https://github.com/angular/angular-cli/tree/master/packages/webpack) plugin. 9 | * [bootstrap](https://github.com/mirkonasato/angular2-course-webpack-starter/tree/bootstrap): includes the Bootstrap CSS framework. 10 | 11 | To work on this project: 12 | 13 | * Run `npm install` inside the project folder to download all the dependencies. This only needs to be done once. 14 | * Run `npm run serve` to start a local development web server. You can now access the application at [localhost:8080](http://localhost:8080/). 15 | * Run `npm run build` to bundle everything into the `dist` folder for deployment. 16 | * Run `npm run build:prod` to do the same as above but enabling optimisations for production. 17 | 18 | This example is part of the [Angular 2 From The Ground Up](http://www.encodedknowledge.com/coupons/angular2/github) course. 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-starter", 3 | "version": "0.3.0", 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/mirkonasato/angular2-course-webpack-starter.git" 8 | }, 9 | "private": true, 10 | "scripts": { 11 | "build": "webpack --progress", 12 | "build:prod": "cross-env APP_ENVIRONMENT=production webpack -p --progress", 13 | "postinstall": "typings install", 14 | "serve": "webpack-dev-server --inline --progress" 15 | }, 16 | "dependencies": { 17 | "@angular/common": "2.3.0", 18 | "@angular/compiler": "2.3.0", 19 | "@angular/core": "2.3.0", 20 | "@angular/forms": "2.3.0", 21 | "@angular/http": "2.3.0", 22 | "@angular/platform-browser": "2.3.0", 23 | "@angular/platform-browser-dynamic": "2.3.0", 24 | "@angular/router": "3.3.0", 25 | "core-js": "2.4.1", 26 | "rxjs": "5.0.0-rc.4", 27 | "zone.js": "0.7.2" 28 | }, 29 | "devDependencies": { 30 | "angular2-template-loader": "0.6.0", 31 | "cross-env": "3.1.3", 32 | "html-webpack-plugin": "2.24.1", 33 | "raw-loader": "0.5.1", 34 | "ts-loader": "1.3.0", 35 | "typescript": "2.1.4", 36 | "typings": "2.0.0", 37 | "webpack": "1.14.0", 38 | "webpack-dev-server": "1.16.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #cc0000; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

My App with Webpack

2 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { } 9 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | imports: [BrowserModule], 7 | declarations: [AppComponent], 8 | bootstrap: [AppComponent] 9 | }) 10 | export class AppModule { } 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 2 Starter 6 | 7 | 8 | Loading... 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { AppModule } from './app/app.module'; 4 | 5 | console.info('app.environment:', app.environment); 6 | if (app.environment === 'production') { 7 | enableProdMode(); 8 | } 9 | platformBrowserDynamic().bootstrapModule(AppModule); 10 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var app: { 2 | environment: string; 3 | }; 4 | 5 | declare function require(id: string): any; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "experimentalDecorators": true, 5 | "emitDecoratorMetadata": true 6 | }, 7 | "compileOnSave": false 8 | } 9 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160914114559" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | 6 | entry: { 7 | 'app': './src/main.ts', 8 | 'polyfills': [ 9 | 'core-js/es6', 10 | 'core-js/es7/reflect', 11 | 'zone.js/dist/zone' 12 | ] 13 | }, 14 | output: { 15 | path: './dist', 16 | filename: '[name].[hash].js' 17 | }, 18 | module: { 19 | loaders: [ 20 | {test: /\.component.ts$/, loader: 'ts!angular2-template'}, 21 | {test: /\.ts$/, exclude: /\.component.ts$/, loader: 'ts'}, 22 | {test: /\.html$/, loader: 'raw'}, 23 | {test: /\.css$/, loader: 'raw'} 24 | ] 25 | }, 26 | resolve: { 27 | extensions: ['', '.js', '.ts', '.html', '.css'] 28 | }, 29 | plugins: [ 30 | new webpack.optimize.CommonsChunkPlugin({ 31 | name: 'polyfills' 32 | }), 33 | new HtmlWebpackPlugin({ 34 | template: './src/index.html' 35 | }), 36 | new webpack.DefinePlugin({ 37 | app: { 38 | environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development') 39 | } 40 | }) 41 | ] 42 | 43 | }; 44 | --------------------------------------------------------------------------------