diff --git a/README.md b/README.md index 3a43c6a2..5f91819a 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,27 @@ -# angular2-webpack +# angular-webpack -[![Dependency Status](https://david-dm.org/preboot/angular2-webpack/status.svg)](https://david-dm.org/preboot/angular2-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular2-webpack/dev-status.svg)](https://david-dm.org/preboot/angular2-webpack#info=devDependencies) -[![Join the chat at https://gitter.im/preboot/angular2-webpack](https://badges.gitter.im/preboot/angular2-webpack.svg)](https://gitter.im/preboot/angular2-webpack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![Dependency Status](https://david-dm.org/preboot/angular-webpack/status.svg)](https://david-dm.org/preboot/angular-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular-webpack/dev-status.svg)](https://david-dm.org/preboot/angular-webpack#info=devDependencies) +[![Join the chat at https://gitter.im/preboot/angular-webpack](https://badges.gitter.im/preboot/angular-webpack.svg)](https://gitter.im/preboot/angular-webpack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) -**Note: This guide is following the Angular's [Style Guide](http://angular.io/styleguide) so I will be changing conventions here and there eventually. You are free to use your own conventions with this starter.** -**Note 2: There is no conventions yet for RC5 on the style guide so there will be a future update here for that.** +A complete, yet simple, starter for Angular v2+ using Webpack. -A complete, yet simple, starter for Angular 2 using Webpack. - -This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests. -* Best practices in file and application organization for [Angular 2](https://angular.io/). +This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests. +* Best practices in file and application organization for [Angular](https://angular.io/). * Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/). -* Testing Angular 2 code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/). +* Testing Angular code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/). * Coverage with [Istanbul](https://github.com/gotwarlost/istanbul) -* End-to-end Angular 2 code using [Protractor](https://angular.github.io/protractor/). +* End-to-end Angular code using [Protractor](https://angular.github.io/protractor/). * Stylesheets with [SASS](http://sass-lang.com/) (not required, it supports regular css too). * Error reported with [TSLint](http://palantir.github.io/tslint/) and [Codelyzer](https://github.com/mgechev/codelyzer). * Documentation with [TypeDoc](http://typedoc.org/). >Warning: Make sure you're using the latest version of Node.js and NPM -[Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/) - ### Quick start -> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.component.ts`](/src/app/app.component.ts) - ```bash # clone our repo -$ git clone https://github.com/preboot/angular2-webpack.git my-app +$ git clone https://github.com/preboot/angular-webpack.git my-app # change directory to your app $ cd my-app @@ -60,7 +53,7 @@ go to [http://localhost:8080](http://localhost:8080) in your browser. What you need to run this app: * `node` and `npm` (Use [NVM](https://github.com/creationix/nvm)) -* Ensure you're running Node (`v5.x.x`+) and NPM (`3.x.x`+) +* Ensure you're running Node (`v6.x.x`+) and NPM (`3.x.x`+) ## Installing @@ -120,19 +113,19 @@ You can generate api docs (using [TypeDoc](http://typedoc.org/)) for your code w No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes. -#### How to include external angular 2 libraries ? +#### How to include external angular libraries ? -It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/preboot/angular2-webpack/blob/master/src/main.ts) of your application. +It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/preboot/angular-webpack/blob/master/src/main.ts) of your application. #### How to include external css files such as bootstrap.css ? -Just install the lib and import the css files in [vendor.ts](https://github.com/preboot/angular2-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap: +Just install the lib and import the css files in [vendor.ts](https://github.com/preboot/angular-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap: ```sh npm install bootstrap@next --save ``` -And in [vendor.ts](https://github.com/preboot/angular2-webpack/blob/master/src/vendor.ts) add the following: +And in [vendor.ts](https://github.com/preboot/angular-webpack/blob/master/src/vendor.ts) add the following: ```ts import 'bootstrap/dist/css/bootstrap.css'; diff --git a/package.json b/package.json index 04b6e090..27ea2952 100644 --- a/package.json +++ b/package.json @@ -25,66 +25,65 @@ "postinstall": "npm run webdriver-update" }, "dependencies": { - "@angular/common": "2.4.2", - "@angular/compiler": "2.4.2", - "@angular/core": "2.4.2", - "@angular/forms": "2.4.2", - "@angular/http": "2.4.2", - "@angular/platform-browser": "2.4.2", - "@angular/platform-browser-dynamic": "2.4.2", - "@angular/router": "3.4.2", + "@angular/common": "~4.2.6", + "@angular/compiler": "~4.2.6", + "@angular/core": "~4.2.6", + "@angular/forms": "~4.2.6", + "@angular/http": "~4.2.6", + "@angular/platform-browser": "~4.2.6", + "@angular/platform-browser-dynamic": "~4.2.6", + "@angular/router": "~4.2.6", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", - "rxjs": "5.0.1", - "zone.js": "^0.7.2" + "tslib": "^1.7.1", + "rxjs": "^5.0.1", + "zone.js": "^0.8.10" }, "devDependencies": { "@angularclass/hmr": "^1.0.1", "@angularclass/hmr-loader": "^3.0.2", - "@types/core-js": "^0.9.0", - "@types/jasmine": "^2.2.29", + "@types/jasmine": "^2.5.41", "@types/node": "^6.0.38", - "@types/selenium-webdriver": "2.53.33", - "@types/lodash": "4.14.50", + "@types/selenium-webdriver": "2.53.39", "angular2-template-loader": "^0.6.0", "autoprefixer": "^6.3.2", - "awesome-typescript-loader": "^3.0.0-beta.17", - "codelyzer": "2.0.0-beta.4", + "awesome-typescript-loader": "^3.1.2", + "codelyzer": "2.0.0", "copy-webpack-plugin": "^4.0.0", - "css-loader": "^0.26.1", + "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^2.0.0-beta.4", - "file-loader": "^0.9.0", + "file-loader": "^0.10.0", "html-loader": "^0.4.0", "html-webpack-plugin": "^2.8.1", "istanbul-instrumenter-loader": "^0.2.0", "jasmine-core": "^2.3.4", - "jasmine-spec-reporter": "^2.4.0", + "jasmine-spec-reporter": "^3.2.0", "json-loader": "^0.5.3", - "karma": "1.3.0", + "karma": "1.4.1", "karma-chrome-launcher": "^2.0.0", "karma-coverage": "^1.0.0", "karma-jasmine": "^1.0.2", "karma-mocha-reporter": "^2.0.3", "karma-remap-istanbul": "0.2.1", "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "1.8.0", - "node-sass": "^3.4.2", + "karma-webpack": "2.0.2", + "node-sass": "^4.5.0", "null-loader": "0.1.1", "postcss-loader": "^1.1.0", "protractor": "^4.0.10", "raw-loader": "0.5.1", "remap-istanbul": "^0.6.4", "rimraf": "^2.5.1", - "sass-loader": "^4.0.0", + "sass-loader": "^6.0.1", "shelljs": "^0.7.0", "style-loader": "^0.13.0", "ts-helpers": "^1.1.1", "tslint": "^4.3.1", "tslint-loader": "^3.3.0", "typedoc": "^0.5.1", - "typescript": "2.0.10", + "typescript": "^2.3.1", "url-loader": "^0.5.6", - "webpack": "2.1.0-beta.25", - "webpack-dev-server": "2.1.0-beta.9" + "webpack": "2.2.1", + "webpack-dev-server": "2.3.0" } } diff --git a/protractor.conf.js b/protractor.conf.js index 12b68e5d..f2253b39 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -24,7 +24,7 @@ exports.config = { }, onPrepare: function () { - var SpecReporter = require('jasmine-spec-reporter'); + var SpecReporter = require('jasmine-spec-reporter').SpecReporter; // add jasmine spec reporter jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: true})); diff --git a/tsconfig.json b/tsconfig.json index 06b76e37..0d06b7cf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,8 @@ "sourceMap": true, "noEmitHelpers": true, "noUnusedLocals": true, - "noUnusedParameters": true + "noUnusedParameters": true, + "lib": ["es2015", "dom"] }, "compileOnSave": false, "buildOnSave": false, diff --git a/webpack.config.js b/webpack.config.js index 5327254a..93e0ced9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,15 +41,17 @@ module.exports = function makeWebpackConfig() { config.devtool = 'eval-source-map'; } - /** - * Entry - * Reference: http://webpack.github.io/docs/configuration.html#entry - */ - config.entry = isTest ? {} : { - 'polyfills': './src/polyfills.ts', - 'vendor': './src/vendor.ts', - 'app': './src/main.ts' // our angular app - }; + if (!isTest) { + /** + * Entry + * Reference: http://webpack.github.io/docs/configuration.html#entry + */ + config.entry = isTest ? {} : { + 'polyfills': './src/polyfills.ts', + 'vendor': './src/vendor.ts', + 'app': './src/main.ts' // our angular app + }; + } /** * Output @@ -107,7 +109,7 @@ module.exports = function makeWebpackConfig() { { test: /\.css$/, exclude: root('src', 'app'), - loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader']}) + loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader']}) }, // all css required in src/app files will be merged in js files {test: /\.css$/, include: root('src', 'app'), loader: 'raw-loader!postcss-loader'}, @@ -118,7 +120,7 @@ module.exports = function makeWebpackConfig() { { test: /\.(scss|sass)$/, exclude: root('src', 'app'), - loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader', 'sass-loader']}) + loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader']}) }, // all css required in src/app files will be merged in js files {test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'}, @@ -165,11 +167,11 @@ module.exports = function makeWebpackConfig() { }), // Workaround needed for angular 2 angular/angular#11580 - new webpack.ContextReplacementPlugin( - // The (\\|\/) piece accounts for path separators in *nix and Windows - /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, - root('./src') // location of your src - ), + new webpack.ContextReplacementPlugin( + // The (\\|\/) piece accounts for path separators in *nix and Windows + /angular(\\|\/)core(\\|\/)@angular/, + root('./src') // location of your src + ), // Tslint configuration for webpack 2 new webpack.LoaderOptionsPlugin({ @@ -232,7 +234,7 @@ module.exports = function makeWebpackConfig() { config.plugins.push( // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin // Only emit files when there are no errors - new webpack.NoErrorsPlugin(), + new webpack.NoEmitOnErrorsPlugin(), // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin // // Dedupe modules in the output