This is shell project for configuring a typical project for angular 2.x. It includes the most naive example of an angular 2.x project. This uses some of the typical tools: webpack, karma, jasmine, typescript, sass.
Inspired by https://github.com/jeffbcross/aim
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Angular Instant Messenger</title> | |
| <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css"> | |
| </head> | |
| <body> | |
| <script src="dist/bundle.js"></script> | |
| </body> | |
| </html> |
| module.exports = function(config) { | |
| config.set({ | |
| basePath: '', | |
| frameworks: ['jasmine'], | |
| files: [ | |
| 'node_modules/reflect-metadata/Reflect.js', | |
| 'src/*_test.ts', | |
| 'src/**/*_test.ts' | |
| ], | |
| preprocessors: { | |
| 'src/*_test.ts': ['webpack'], | |
| 'src/**/*_test.ts': ['webpack'] | |
| }, | |
| webpack: require('./webpack.config.js'), | |
| webpackMiddleware: { | |
| noInfo: true | |
| }, | |
| reporters: ['progress'], | |
| port: 9876, | |
| colors: true, | |
| logLevel: config.LOG_INFO, | |
| autoWatch: true, | |
| browsers: ['Chrome'], | |
| singleRun: false | |
| }) | |
| }; |
| { | |
| "name": "angular quickstart", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "serve": "./node_modules/.bin/webpack-dev-server", | |
| "build_server": "tsc server/stock_server.ts -m commonjs --outDir dist || true", | |
| "start_server": "npm run build_server && node dist/stock_server", | |
| "test": "./node_modules/.bin/karma start" | |
| }, | |
| "repository": { | |
| "type": "git", | |
| "url": "git+https://github.com/chrisjlee/quick-start.git" | |
| }, | |
| "author": "Chris Lee", | |
| "license": "MIT", | |
| "bugs": { | |
| "url": "https://github.com/chrisjlee" | |
| }, | |
| "homepage": "https://github.com/chrisjlee", | |
| "devDependencies": { | |
| "css-loader": "^0.19.0", | |
| "es6-shim": "^0.33.6", | |
| "jasmine": "^2.3.2", | |
| "jasmine-core": "^2.3.4", | |
| "karma": "^0.13.11", | |
| "karma-chrome-launcher": "^0.2.1", | |
| "karma-jasmine": "^0.3.6", | |
| "karma-webpack": "^1.7.0", | |
| "node-sass": "^3.3.3", | |
| "sass-loader": "^3.0.0", | |
| "style-loader": "^0.12.4", | |
| "ts-loader": "^0.5.6", | |
| "tsd": "^0.6.5", | |
| "typescript": "^1.6.2", | |
| "webpack": "^1.12.2", | |
| "webpack-dev-server": "^1.12.0", | |
| "webpack-livereload-plugin": "^0.4.0" | |
| }, | |
| "dependencies": { | |
| "angular2": "^2.0.0-alpha.44", | |
| "bootstrap": "^3.3.5", | |
| "cors": "^2.7.1", | |
| "express": "^4.13.3", | |
| "reflect-metadata": "^0.1.2", | |
| "ws": "^0.8.0", | |
| "zone.js": "^0.5.8" | |
| } | |
| } |
| { | |
| "compilerOptions": { | |
| "module": "commonjs", | |
| "target": "es5", | |
| "noImplicitAny": false, | |
| "outDir": "dist", | |
| "rootDir": ".", | |
| "sourceMap": false, | |
| "experimentalDecorators": true, | |
| "emitDecoratorMetadata": true | |
| }, | |
| "exclude": [ | |
| "node_modules" | |
| ] | |
| } |
| var LiveReloadPlugin = require('webpack-livereload-plugin'); | |
| var webpack = require('webpack'); | |
| module.exports = { | |
| resolve: { | |
| extensions: ['', '.scss', '.ts', '.js'] | |
| }, | |
| plugins: [ | |
| new LiveReloadPlugin(), | |
| new webpack.HotModuleReplacementPlugin() | |
| ], | |
| entry: './src/app.ts', | |
| output: { | |
| path: __dirname + "/dist", | |
| publicPath: 'dist/', | |
| filename: "bundle.js" | |
| }, | |
| devtool: 'source-map', | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.ts$/, | |
| loader: 'ts-loader' | |
| }, | |
| { | |
| test: /\.scss$/, | |
| loader: 'sass-loader' | |
| } | |
| ] | |
| }, | |
| devServer: { | |
| historyApiFallback: true, | |
| hot: true | |
| } | |
| }; |
Cool !