Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
angular2-webpack-starter
Advanced tools
angular2-webpack-starter - npm Package Compare versions
Comparing version 0.0.0 to 1.0.0
| // @AngularClass | ||
| var path = require('path'); | ||
| module.exports = function(config) { | ||
| var _config = { | ||
| var testWebpackConfig = require('./webpack.test.config.js'); | ||
| config.set({ | ||
| // base path that will be used to resolve all patterns (eg. files, exclude) | ||
| // base path that will be used to resolve all patterns (e.g. files, exclude) | ||
| basePath: '', | ||
| // frameworks to use | ||
@@ -14,70 +15,39 @@ // available frameworks: https://npmjs.org/browse/keyword/karma-adapter | ||
| // list of files to exclude | ||
| exclude: [ ], | ||
| // list of files / patterns to load in the browser | ||
| files: [ | ||
| { pattern: './src/public/lib/es6-shim.js', watched: false }, | ||
| // { pattern: 'test/**/*.spec.ts', watched: false } | ||
| { pattern: 'spec.bundle.js', watched: false } | ||
| ], | ||
| // we are building the test environment in ./spec-bundle.js | ||
| files: [ { pattern: 'spec-bundle.js', watched: false } ], | ||
| // list of files to exclude | ||
| exclude: [ | ||
| ], | ||
| // preprocess matching files before serving them to the browser | ||
| // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor | ||
| preprocessors: { | ||
| 'spec.bundle.js': ['webpack', 'sourcemap'] | ||
| // 'test/**/*.spec.ts': ['webpack', 'sourcemap'] | ||
| }, | ||
| preprocessors: { 'spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] }, | ||
| webpack: { | ||
| // Webpack Config at ./webpack.test.config.js | ||
| webpack: testWebpackConfig, | ||
| resolve: { | ||
| root: __dirname, | ||
| extensions: ['','.ts','.js','.json'], | ||
| alias: { | ||
| 'app': 'src/app', | ||
| 'common': 'src/common', | ||
| } | ||
| }, | ||
| devtool: 'inline-source-map', | ||
| module: { | ||
| loaders: [ | ||
| { test: /\.ts$/, loader: 'typescript-simple?ignoreWarnings[]=2345', exclude: [ | ||
| /web_modules/, | ||
| /node_modules/ | ||
| ] | ||
| }, | ||
| { test: /reflect-metadata/, loader: "imports?require=>false" }, | ||
| { test: /\.json$/, loader: 'json' }, | ||
| { test: /\.html$/, loader: 'raw' }, | ||
| { test: /\.css$/, loader: 'raw' } | ||
| ] | ||
| }, | ||
| stats: { colors: true, reasons: true }, | ||
| debug: false | ||
| coverageReporter: { | ||
| dir : 'coverage/', | ||
| reporters: [ | ||
| { type: 'text-summary' }, | ||
| { type: 'json' }, | ||
| { type: 'html' } | ||
| ] | ||
| }, | ||
| webpackServer: { | ||
| noInfo: true //please don't spam the console when running in karma! | ||
| }, | ||
| // Webpack please don't spam the console when running in karma! | ||
| webpackServer: { noInfo: true }, | ||
| // test results reporter to use | ||
| // possible values: 'dots', 'progress' | ||
| // available reporters: https://npmjs.org/browse/keyword/karma-reporter | ||
| reporters: ['progress'], | ||
| reporters: [ 'mocha', 'coverage' ], | ||
| // web server port | ||
| port: 9876, | ||
| // enable / disable colors in the output (reporters and logs) | ||
| colors: true, | ||
| // level of logging | ||
@@ -87,17 +57,17 @@ // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG | ||
| // enable / disable watching file and executing tests whenever any file changes | ||
| autoWatch: false, | ||
| // start these browsers | ||
| // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher | ||
| browsers: ['PhantomJS'], | ||
| browsers: [ | ||
| // 'Chrome', | ||
| 'PhantomJS' | ||
| ], | ||
| // Continuous Integration mode | ||
| // if true, Karma captures browsers, runs the tests and exits | ||
| singleRun: true | ||
| }; | ||
| config.set(_config); | ||
| }); | ||
| }; |
160
package.json
| { | ||
| "name": "angular2-webpack-starter", | ||
| "version": "0.0.0", | ||
| "description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by AngularClass", | ||
| "main": "", | ||
| "version": "1.0.0", | ||
| "description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass", | ||
| "author": "Patrick Stapleton <patrick@angularclass.com>", | ||
| "homepage": "https://github.com/angularclass/angular2-webpack-starter", | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "build": "NODE_ENV=development && npm run build:prod", | ||
| "build:dev": " NODE_ENV=development npm run webpack --colors --display-error-details --display-cached", | ||
| "build:prod": "NODE_ENV=production npm run webpack --colors --display-error-details --display-cached", | ||
| "webpack": "webpack", | ||
| "clean": "rm -rf node_modules && rm -rf tsd_typings", | ||
| "watch": "webpack --watch", | ||
| "server": "webpack-dev-server --inline --colors --display-error-details --display-cached --port 3000", | ||
| "express": "NODE_ENV=development node ./examples/server/express-server-example.js", | ||
| "express:dev": " NODE_ENV=development node ./examples/server/express-server-example.js", | ||
| "express:prod": "NODE_ENV=production node ./examples/server/express-server-example.js", | ||
| "express-install": "npm install express connect-history-api-fallback morgan body-parser cors", | ||
| "env:dev": "NODE_ENV=development", | ||
| "env:prod": "NODE_ENV=production", | ||
| "webdriver-update": "webdriver-manager update", | ||
| "webdriver-start": "webdriver-manager start", | ||
| "preprotractor": "npm run webdriver-update", | ||
| "protractor": "protractor", | ||
| "e2e": "npm run protractor", | ||
| "clean": "npm cache clean && rimraf node_modules doc typings coverage dist", | ||
| "clean:dist": "rimraf dist", | ||
| "preclean:install": "npm run clean", | ||
| "clean:install": "npm set progress=false && npm install", | ||
| "preclean:start": "npm run clean", | ||
| "clean:start": "npm start", | ||
| "watch": "npm run watch:dev", | ||
| "watch:dev": "webpack --watch --progress --profile --colors --display-error-details --display-cached", | ||
| "watch:test": "npm run test -- --auto-watch --no-single-run", | ||
| "watch:prod": "webpack --watch --config webpack.prod.config.js --progress --profile --colors --display-error-details --display-cached", | ||
| "build": "npm run build:dev", | ||
| "prebuild:dev": "npm run clean:dist", | ||
| "build:dev": "webpack --progress --profile --colors --display-error-details --display-cached", | ||
| "prebuild:prod": "npm run clean:dist", | ||
| "build:prod": "webpack --config webpack.prod.config.js --progress --profile --colors --display-error-details --display-cached", | ||
| "server": "npm run server:dev", | ||
| "server:dev": "webpack-dev-server --progress --profile --colors --display-error-details --display-cached --content-base src/", | ||
| "server:prod": "http-server dist --cors", | ||
| "webdriver:update": "webdriver-manager update", | ||
| "webdriver:start": "webdriver-manager start", | ||
| "lint": "tsconfig-lint", | ||
| "pree2e": "npm run webdriver:update -- --standalone", | ||
| "e2e": "ts-node node_modules/.bin/protractor", | ||
| "e2e:live": "protractor --elementExplorer", | ||
| "test": "karma start", | ||
| "remove-http-typings": "rm -rf node_modules/angular2/bundles/typings/angular2/http.d.ts", | ||
| "postinstall": "npm run remove-http-typings && tsd reinstall --overwrite", | ||
| "prestart": "npm install", | ||
| "start": "npm run server" | ||
| "ci": "npm run e2e && npm run test", | ||
| "docs": "typedoc --options typedoc.json --exclude **/*.spec.ts ./src/", | ||
| "start": "npm run server:dev", | ||
| "fix:ng2-clean": "node_modules/.bin/rimraf node_modules/angular2/manual_typings node_modules/angular2/typings node_modules/angular2/bundles/typings", | ||
| "fix:ng2": "npm run fix:ng2-clean", | ||
| "pretypings-install": "npm run fix:ng2", | ||
| "typings-install": "typings install", | ||
| "postinstall": "npm run typings-install", | ||
| "preversion": "npm test", | ||
| "version": "npm run build", | ||
| "postversion": "git push && git push --tags" | ||
| }, | ||
| "dependencies": { | ||
| "angular2": "2.0.0-beta.2", | ||
| "es6-promise": "^3.0.2", | ||
| "es6-shim": "^0.33.3", | ||
| "es7-reflect-metadata": "^1.5.5", | ||
| "rxjs": "5.0.0-beta.0", | ||
| "zone.js": "0.5.10" | ||
| }, | ||
| "devDependencies": { | ||
| "compression-webpack-plugin": "^0.3.0", | ||
| "copy-webpack-plugin": "^1.1.1", | ||
| "css-loader": "^0.23.1", | ||
| "es6-promise-loader": "^1.0.1", | ||
| "exports-loader": "^0.6.2", | ||
| "expose-loader": "^0.7.1", | ||
| "file-loader": "^0.8.5", | ||
| "html-webpack-plugin": "^1.7.0", | ||
| "http-server": "^0.8.5", | ||
| "imports-loader": "^0.6.5", | ||
| "istanbul-instrumenter-loader": "^0.1.3", | ||
| "json-loader": "^0.5.4", | ||
| "karma": "^0.13.19", | ||
| "karma-chrome-launcher": "^0.2.2", | ||
| "karma-coverage": "^0.5.3", | ||
| "karma-jasmine": "^0.3.6", | ||
| "karma-mocha-reporter": "^1.1.5", | ||
| "karma-phantomjs-launcher": "^1.0.0", | ||
| "karma-sourcemap-loader": "^0.3.7", | ||
| "karma-webpack": "1.7.0", | ||
| "ncp": "^2.0.0", | ||
| "phantomjs-polyfill": "0.0.1", | ||
| "phantomjs-prebuilt": "^2.1.3", | ||
| "protractor": "^3.0.0", | ||
| "raw-loader": "0.5.1", | ||
| "reflect-metadata": "0.1.2", | ||
| "remap-istanbul": "^0.5.1", | ||
| "rimraf": "^2.5.1", | ||
| "source-map-loader": "^0.1.5", | ||
| "style-loader": "^0.13.0", | ||
| "ts-helper": "0.0.1", | ||
| "ts-loader": "^0.8.0", | ||
| "ts-node": "^0.5.5", | ||
| "tsconfig-lint": "^0.5.0", | ||
| "tslint": "^3.3.0", | ||
| "tslint-loader": "^2.1.0", | ||
| "typedoc": "^0.3.12", | ||
| "typescript": "^1.7.5", | ||
| "typings": "^0.6.3", | ||
| "url-loader": "^0.5.7", | ||
| "webpack": "^1.12.12", | ||
| "webpack-dev-server": "^1.14.1", | ||
| "webpack-md5-hash": "0.0.4" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/angular-class/angular2-webpack-starter.git" | ||
| "url": "https://github.com/angularclass/angular2-webpack-starter.git" | ||
| }, | ||
| "author": "gdi2290 <github@gdi2290.com>", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/angular-class/angular2-webpack-starter/issues" | ||
| "url": "https://github.com/angularclass/angular2-webpack-starter/issues" | ||
| }, | ||
| "homepage": "https://github.com/angular-class/angular2-webpack-starter", | ||
| "dependencies": { | ||
| "angular2": "2.0.0-alpha.35", | ||
| "ngHttp": "file:examples/_fixed_cjs_http", | ||
| "reflect-metadata": "^0.1.0", | ||
| "rtts_assert": "2.0.0-alpha.35", | ||
| "rx": "^2.5.3", | ||
| "zone.js": "^0.5.3" | ||
| }, | ||
| "devDependencies": { | ||
| "css-loader": "^0.16.0", | ||
| "exports-loader": "^0.6.2", | ||
| "expose-loader": "^0.7.0", | ||
| "file-loader": "^0.8.1", | ||
| "imports-loader": "^0.6.3", | ||
| "json-loader": "^0.5.1", | ||
| "karma": "^0.13.3", | ||
| "karma-chrome-launcher": "^0.2.0", | ||
| "karma-coverage": "^0.5.0", | ||
| "karma-jasmine": "^0.3.5", | ||
| "karma-phantomjs-launcher": "^0.2.0", | ||
| "karma-sourcemap-loader": "^0.3.5", | ||
| "karma-webpack": "^1.7.0", | ||
| "phantomjs": "^1.9.17", | ||
| "protractor": "^2.1.0", | ||
| "raw-loader": "^0.5.1", | ||
| "style-loader": "^0.12.2", | ||
| "tsd": "^0.6.3", | ||
| "typescript": "^1.5.3", | ||
| "typescript-simple-loader": "^0.3.2", | ||
| "url-loader": "^0.5.5", | ||
| "webpack": "^1.10.5", | ||
| "webpack-dev-server": "^1.10.1" | ||
| "engines": { | ||
| "node": ">= 4.2.1 <= 5", | ||
| "npm": ">= 3" | ||
| } | ||
| } |
| // @AngularClass | ||
| exports.config = { | ||
| baseUrl: 'http://localhost:8080/', | ||
| baseUrl: 'http://localhost:3000/', | ||
| allScriptsTimeout: 11000, | ||
| // use `npm run e2e` | ||
| specs: [ | ||
| 'src/**/**.e2e.ts', | ||
| 'src/**/*.e2e.ts' | ||
| ], | ||
| exclude: [], | ||
| framework: 'jasmine', | ||
| allScriptsTimeout: 110000, | ||
| jasmineNodeOpts: { | ||
| defaultTimeoutInterval: 60000, | ||
| showTiming: true | ||
| showTiming: true, | ||
| showColors: true, | ||
| isVerbose: false, | ||
| includeStackTrace: false, | ||
| defaultTimeoutInterval: 400000 | ||
| }, | ||
| directConnect: true, | ||
@@ -22,12 +33,16 @@ capabilities: { | ||
| seleniumAddress: 'http://localhost:4444/wd/hub', | ||
| specs: [ | ||
| 'test/**/*.e2e.js' | ||
| ], | ||
| onPrepare: function() { | ||
| browser.ignoreSynchronization = true; | ||
| } | ||
| }, | ||
| seleniumServerJar: "node_modules/protractor/selenium/selenium-server-standalone-2.48.2.jar", | ||
| /** | ||
| * Angular 2 configuration | ||
| * | ||
| * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching | ||
| * `rootEl` | ||
| * | ||
| */ | ||
| useAllAngular2AppRoots: true | ||
| }; |
308
README.md
@@ -1,31 +0,34 @@ | ||
| [](http://badge.fury.io/gh/angular-class%2Fangular2-webpack-starter) | ||
| [](https://david-dm.org/angular-class/angular2-webpack-starter) | ||
| [](http://issuestats.com/github/angular-class/angular2-webpack-starter) | ||
| [](http://issuestats.com/github/angular-class/angular2-webpack-starter) | ||
| [](https://twitter.com/SwiftOnSecurity) | ||
| [](https://github.com/auchenberg/volkswagen) [](https://badge.fury.io/gh/angularclass%2Fangular2-webpack-starter) [](https://david-dm.org/angularclass/angular2-webpack-starter) | ||
| [](http://issuestats.com/github/angularclass/angular2-webpack-starter) | ||
| [](http://issuestats.com/github/angularclass/angular2-webpack-starter) [](http://stackshare.io/angularclass/angular-2-webpack-starter) | ||
| <p align="center"> | ||
| <img src="https://res.cloudinary.com/angularclass/image/upload/v1431925418/webpackAndangular2_dwhus9.png" alt="Webpack and Angular 2" width="500" height="320"/> | ||
| <a href="https://angularclass.com" target="_blank"> | ||
| <img src="https://cloud.githubusercontent.com/assets/1016365/9863762/a84fed4a-5af7-11e5-9dde-d5da01e797e7.png" alt="Webpack and Angular 2" width="500" height="320"/> | ||
| </a> | ||
| </p> | ||
| # Angular2 Webpack Starter [](https://gitter.im/angular-class/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) | ||
| # Angular2 Webpack Starter [](https://angularclass.com/slack-join) [](https://gitter.im/angularclass/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) | ||
| > A starter kit featuring [Angular 2](https://angular.io) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/), | ||
| > An Angular 2 starter kit featuring [Angular 2](https://angular.io) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/), | ||
| [Http](https://angular.io/docs/js/latest/api/http/), | ||
| [Services](https://gist.github.com/gdi2290/634101fec1671ee12b3e#_follow_@AngularClass_on_twitter), | ||
| [Tests](https://angular.io/docs/js/latest/api/test/), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [TypeScript](http://www.typescriptlang.org/), and [Webpack](http://webpack.github.io/) by [AngularClass](https://angularclass.com). | ||
| [Tests](https://angular.io/docs/js/latest/api/test/), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [Istanbul](https://github.com/gotwarlost/istanbul), [TypeScript](http://www.typescriptlang.org/), [Typings](https://github.com/typings/typings), and [Webpack](http://webpack.github.io/) by [AngularClass](https://angularclass.com). | ||
| > If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angular-class/NG6-starter) | ||
| > If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angularclass/NG6-starter) | ||
| > If you're looking to learn about Webpack and ES6 Build Tools check out [ES6-build-tools](https://github.com/AngularClass/ES6-build-tools) | ||
| > If you're looking to learn TypeScript see [TypeStrong/learn-typescript](https://github.com/TypeStrong/learn-typescript) | ||
| This repo serves as a starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [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 practice in file and application organization for Angular 2. | ||
| This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [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. | ||
| * Ready to go build system using Webpack for working with TypeScript. | ||
| * Test and end-to-end system using Karma and Protractor. | ||
| * Angular 2 examples that are ready to go when experimenting with Angular 2. | ||
| * A great Angular 2 seed repo for anyone who wants to start their project. | ||
| * Testing Angular 2 code with Jasmine and Karma. | ||
| * Coverage with Istanbul and Karma | ||
| * End-to-end Angular 2 code using Protractor. | ||
| * Type manager with Typings | ||
| ```coffeescript | ||
| Warning: Angular 2.0 is not production ready yet! | ||
| ``` | ||
| [Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/) | ||
| ### Quick start | ||
@@ -36,3 +39,4 @@ > Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts) | ||
| # clone our repo | ||
| git clone https://github.com/angular-class/angular2-webpack-starter.git | ||
| # --depth 1 removes all but one .git commit history | ||
| git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git | ||
@@ -42,5 +46,12 @@ # change directory to our repo | ||
| # then open your browser and go to http://localhost:3000 | ||
| npm start | ||
| # install the repo with npm | ||
| npm install | ||
| # install TypeScript typings | ||
| npm run typings-install | ||
| # start the server | ||
| npm start | ||
| ``` | ||
| go to [http://0.0.0.0:3000](http://0.0.0.0:3000) or [http://localhost:3000](http://localhost:3000) in your browser | ||
@@ -55,4 +66,4 @@ # Table of Contents | ||
| * [TypeScript](#typescript) | ||
| * [Typings](#typings) | ||
| * [Frequently asked questions](#frequently-asked-questions) | ||
| * [Todo](#todo) | ||
| * [Support, Questions, or Feedback](#support-questions-or-feedback) | ||
@@ -66,39 +77,31 @@ * [License](#license) | ||
| angular2-webpack-starter/ | ||
| ├──src/ * our source files that will be compiled to javascript | ||
| ├──src/ * our source files that will be compiled to javascript | ||
| | ├──main.ts * our entry file for our browser environment | ||
| │ │ | ||
| │ ├──app/ * WebApp: folder | ||
| │ │ ├──app.ts * App.ts: a simple version of our App component components | ||
| │ │ └──bootstrap.ts * entry file for app | ||
| | ├──index.html * Index.html: where we generate our index page | ||
| │ │ | ||
| │ ├──bindings/ * where common files used throughout our app | ||
| │ │ ├──location_bindings.ts * injectables to change the Router location Strategy | ||
| │ │ └──change_detection_bindings.ts * injectables to change Angular's Change Detection Strategy | ||
| | ├──polyfills.ts * our polyfills file | ||
| │ │ | ||
| │ ├──public/ * static assets are served here | ||
| │ │ ├──lib/ * static libraries | ||
| │ │ │ └──es6-shim.js * ignore this file. This is needed to polyfill the browser to for ES6 features to similarly | ||
| │ │ │ | ||
| │ │ ├──favicon.ico * replace me with your own favicon.ico | ||
| │ │ ├──service-worker.js * ignore this. Web App service worker that's not complete yet | ||
| │ │ ├──robots.txt * for search engines to crawl your website | ||
| │ │ ├──human.txt * for humans to know who the developers are | ||
| │ │ │ | ||
| │ │ └──index.html * Index.html: where we place our script tags | ||
| │ ├──app/ * WebApp: folder | ||
| │ │ ├──app.spec.ts * a simple test of components in app.ts | ||
| │ │ ├──app.e2e.ts * a simple end-to-end test for / | ||
| │ │ └──app.ts * App.ts: a simple version of our App component components | ||
| │ │ | ||
| │ └──typings/ * where we define our custom types | ||
| │ ├──ng2.d.ts * where we patch angular2 types with our own types until it's fixed | ||
| │ └──_custom.d.ts * we include all of our custom types here | ||
| │ └──assets/ * static assets are served here | ||
| │ ├──icon/ * our list of icons from www.favicon-generator.org | ||
| │ ├──service-worker.js * ignore this. Web App service worker that's not complete yet | ||
| │ ├──robots.txt * for search engines to crawl your website | ||
| │ └──human.txt * for humans to know who the developers are | ||
| │ | ||
| ├──tsd_typings/ * ignore this auto generated file from tsd | ||
| │ └──tsd.d.ts * ignore this our main file for all of our type definitions | ||
| ├──spec-bundle.js * ignore this magic that sets up our angular 2 testing environment | ||
| ├──karma.config.js * karma config for our unit tests | ||
| ├──protractor.config.js * protractor config for our end-to-end tests | ||
| │ | ||
| ├──test/ * this is our global unit tests and end-to-end tests | ||
| ├──tsconfig.json * config that webpack uses for typescript | ||
| ├──typings.json * our typings manager | ||
| ├──package.json * what npm uses to manage it's dependencies | ||
| │ | ||
| ├──spec.bundle.js * ignore this magic that sets up our angular 2 testing environment | ||
| ├──karma.config.js * karam config for our unit tests | ||
| ├──protractor.config.js * protractor config for our end-to-end tests | ||
| ├──tsconfig.json * config that webpack uses for typescript | ||
| ├──tsd.json * config that tsd uses for managing it's definitions | ||
| ├──package.json * what npm uses to manage it's dependencies | ||
| └──webpack.config.js * our webpack config | ||
| ├──webpack.config.js * our development webpack config | ||
| ├──webpack.test.config.js * our testing webpack config | ||
| └──webpack.prod.config.js * our production webpack config | ||
| ``` | ||
@@ -110,9 +113,11 @@ | ||
| * `node` and `npm` (`brew install node`) | ||
| * Ensure you're running the latest versions Node `v0.12.2`+ and NPM `2.10.0`+ | ||
| * Ensure you're running the latest versions Node `v4.1.x`+ and NPM `2.14.x`+ | ||
| Once you have those, you should install these globals with `npm install --global`: | ||
| * `webpack` (`npm install --global webpack`) | ||
| * `webpack-dev-server` (`npm install -global webpack-dev-server`) | ||
| * `webpack-dev-server` (`npm install --global webpack-dev-server`) | ||
| * `karma` (`npm install --global karma-cli`) | ||
| * `protractor` (`npm install --global protractor`) | ||
| * `typings` (`npm install --global typings`) | ||
| * `typescript` (`npm install --global typescript`) | ||
@@ -123,17 +128,25 @@ ## Installing | ||
| * `npm install` to install all dependencies | ||
| * `typings install` to install necessary typings | ||
| * `npm run server` to start the dev server in another tab | ||
| ## Running the app | ||
| After you have installed all dependencies you can now run the app. Run `npm run server` to start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`). | ||
| After you have installed all dependencies you can now run the app. Run `npm run server` to start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://0.0.0.0:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`). | ||
| ### server | ||
| ```bash | ||
| $ npm run server # or either webpack-dev-server or npm run express | ||
| # development | ||
| npm run server | ||
| # production | ||
| npm run build:prod | ||
| npm run server:prod | ||
| ``` | ||
| ## Other commands | ||
| ## Other commands | ||
| ### build files | ||
| ```bash | ||
| $ npm run build # or webpack | ||
| # development | ||
| npm run build:dev | ||
| # production | ||
| npm run build:prod | ||
| ``` | ||
@@ -143,13 +156,13 @@ | ||
| ```bash | ||
| $ npm run watch # or webpack --watch | ||
| npm run watch | ||
| ``` | ||
| ### run tests | ||
| ### run tests | ||
| ```bash | ||
| $ npm run test # or karma start | ||
| npm run test | ||
| ``` | ||
| ### run webdriver (for end-to-end) | ||
| ### watch and run our tests | ||
| ```bash | ||
| $ npm run webdriver-start # or webdriver-manager start | ||
| npm run watch:test | ||
| ``` | ||
@@ -159,6 +172,20 @@ | ||
| ```bash | ||
| # make sure you have webdriver running and a sever for the client app | ||
| $ npm run e2e # or protractor | ||
| # make sure you have your server running in another terminal | ||
| npm run e2e | ||
| ``` | ||
| ### run webdriver (for end-to-end) | ||
| ```bash | ||
| npm run webdriver:update | ||
| npm run webdriver:start | ||
| ``` | ||
| ### run Protractor's elementExplorer (for end-to-end) | ||
| ```bash | ||
| npm run webdriver:start | ||
| # in another terminal | ||
| npm run e2e:live | ||
| ``` | ||
| # Contributing | ||
@@ -171,27 +198,8 @@ You can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request | ||
| ## Use latest TypeScript compiler | ||
| TypeScript 1.5 includes everything you need. Make sure to upgrade, even if you installed TypeScript previously. | ||
| TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously. | ||
| $ npm install --global typescript | ||
| ``` | ||
| npm install --global typescript | ||
| ``` | ||
| ## .d.ts Typings | ||
| The TSD typings in `tsd_typings/` are autogenerated. | ||
| $ npm install --global tsd | ||
| > You may need to require `reference path` for your editor to autocomplete correctly | ||
| ``` | ||
| /// <reference path="/src/typings/_custom.d.ts" /> | ||
| ``` | ||
| If your editor only works with reference path here's the convention I'm using | ||
| `/src/typings/` hand written typings for when you need to create/update one for a library | ||
| `/src/typings/_custom.d.s` main file to require everything (reference path this file) | ||
| `/src/typings/tsd.d.ts` requires tsd_typings | ||
| `/tsd_typings/` tsd typings (like node_modules these files live and generates at root level) | ||
| Otherwise including them in `tsd.json` is much prefered | ||
| ## Use a TypeScript-aware editor | ||
@@ -205,68 +213,90 @@ We have good experience using these editors: | ||
| # Frequently asked questions | ||
| * Why we are using traceur-runtime? | ||
| * This for the ES6 polyfills. | ||
| * If TypeScript compiles to ES5 why do we need traceur-runtime? | ||
| * Angular 2 framework itself expects these ES6 features. | ||
| * What's the current browser support for Angular 2 Alpha? | ||
| * As of version 2.0.0-alpha.26: Chrome (43, 44, 45), Firefox (37, 39, 40), IE 11, Safari 8, iOS 8, Android 5.1 (Chrome Mobile 39). | ||
| * What is the `TypeScript warning "Value of type 'typeof Directive' is not callable. Did you mean to include 'new'?`"? | ||
| * This is an error with the typings defined in DefinitelyTyped (please ignore until it's fixed) | ||
| * How do I use `moduleId` with `module.id` in webpack? | ||
| * Please use `__filename` if you must use `templateUrl` and `styleUrls` rather than webpack's module system | ||
| * Why is my service not injecting parameter correctly? | ||
| * Please use `@Injectable()` for your service for typescript to corrrectly attach the metadata (this is a typescript beta problem) | ||
| * Where do I write my tests? | ||
| * You can write your tests anywhere you like either next to your components or in the `test/` folder | ||
| * Is Angular 2 production ready yet? | ||
| * No, please visit [Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/) website. | ||
| * How do I start the app when I get `EACCES` and `EADDRINUSE` errors? | ||
| * The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./__build__/` | ||
| # Typings | ||
| > When you include a module that doesn't include Type Definitions inside of the module you need to include external Type Definitions with Typings | ||
| ## Use latest Typings module | ||
| ``` | ||
| npm install --global typings | ||
| ``` | ||
| # Todo | ||
| - [x] production/development environments | ||
| - [x] add "active" class for navigation items | ||
| - [ ] fix examples again | ||
| - [ ] include server again | ||
| - [ ] universal (isomorphic) example | ||
| - [ ] production/development Angular 2 environments | ||
| - [ ] bootstrap framework example | ||
| - [ ] production services examples | ||
| - [ ] small/medium/large abstraction examples | ||
| - [ ] Material Design example | ||
| - [ ] hot-component-reloading | ||
| ## Custom Type Definitions | ||
| When including 3rd party modules you also need to include the type definition for the module | ||
| if they don't provide one within the module. You can try to install it with typings | ||
| ``` | ||
| typings install node --save | ||
| ``` | ||
| If you can't find the type definition in the registry we can make an ambient definition in | ||
| this file for now. For example | ||
| ```typescript | ||
| declare module "my-module" { | ||
| export function doesSomething(value: string): string; | ||
| } | ||
| ``` | ||
| If you're prototying and you will fix the types later you can also declare it as type any | ||
| ```typescript | ||
| declare var assert: any; | ||
| ``` | ||
| If you're importing a module that uses Node.js modules which are CommonJS you need to import as | ||
| ```typescript | ||
| import * as _ from 'lodash'; | ||
| ``` | ||
| You can include your type definitions in this file until you create one for the typings registry | ||
| see [typings/registry](https://github.com/typings/registry) | ||
| # Frequently asked questions | ||
| * What's the current browser support for Angular 2 Beta? | ||
| * Please view the updated list of [browser support for Angular 2](https://github.com/angularclass/awesome-angular2#current-browser-support-for-angular-2) | ||
| * Why is my service, aka provider, is not injecting parameter correctly? | ||
| * Please use `@Injectable()` for your service for typescript to correctly attach the metadata (this is a TypeScript problem) | ||
| * How do I run protractor with node 0.12.x? | ||
| * please check out this repo to use the old version of protractor [#146](https://github.com/AngularClass/angular2-webpack-starter/pull/146/files) | ||
| * Where do I write my tests? | ||
| * You can write your tests next to your component files. See [`/src/app/home/home.spec.ts`](/src/app/home/home.spec.ts) | ||
| * How do I start the app when I get `EACCES` and `EADDRINUSE` errors? | ||
| * The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./dist/` | ||
| * How to use `sass` for css? | ||
| * `loaders: ['raw-loader','sass-loader']` and `@Component({ styles: [ require('./filename.scss') ] })` see issue [#136](https://github.com/AngularClass/angular2-webpack-starter/issues/136) | ||
| * How do I test a Service? | ||
| * See issue [#130](https://github.com/AngularClass/angular2-webpack-starter/issues/130#issuecomment-158872648) | ||
| * How do I add `vscode-chrome-debug` support? | ||
| * The VS Code chrome debug extension support can be done via `launch.json` see issue [#144](https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-164063790) | ||
| * How do I make the repo work in a virtual machine? | ||
| * You need to use `0.0.0.0` so revert these changes [#205](https://github.com/AngularClass/angular2-webpack-starter/pull/205/files) | ||
| * What are the naming conventions for Angular 2? | ||
| * please see issue [#185](https://github.com/AngularClass/angular2-webpack-starter/issues/185) and PR [196](https://github.com/AngularClass/angular2-webpack-starter/pull/196) | ||
| * How do I include bootstrap or jQuery? | ||
| * please see issue [#215](https://github.com/AngularClass/angular2-webpack-starter/issues/215) and [#214](https://github.com/AngularClass/angular2-webpack-starter/issues/214#event-511768416) | ||
| * I'm getting an error about not finding my module that I installed? | ||
| * please see [custom_typings.d.ts](https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/custom_typings.d.ts) | ||
| * How do I async load a component? | ||
| * the component must have `.async.ts` and require using webpack `loader: () => require('./about/about')('About')` | ||
| # Support, Questions, or Feedback | ||
| > Contact us anytime for anything about this repo or Angular 2 | ||
| * [Gitter: angular-class/angular2-webpack-starter](https://gitter.im/angular-class/angular2-webpack-starter) | ||
| * [Chat: AngularClass.slack](http://angularclass.com/member-join/) | ||
| * [Twitter: @AngularClass](https://twitter.com/AngularClass) | ||
| * [Gitter: AngularClass/angular2-webpack-starter](https://gitter.im/angularclass/angular2-webpack-starter) | ||
| # Other Seed/Starter/Example Repos | ||
| * [angular2-webpack-starter (AngularClass)](https://github.com/angular-class/angular2-webpack-starter) | ||
| * Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine, Env Dev/Prod, Server API | ||
| * [ng2-play.ts (Pawel Kozlowski)](https://github.com/pkozlowski-opensource/ng2-play.ts) | ||
| * Client only, Minimalist, SystemJS, Gulp, TypeScript | ||
| * [angular2-seed (Minko Gechev)](https://github.com/mgechev/angular2-seed) | ||
| * Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod | ||
| * [ng2-play (Roland Groza)](https://github.com/rolandjitsu/ng2-play) | ||
| * Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint | ||
| * [ng2-jspm-seed (Rob Wormald)](https://github.com/robwormald/ng2-jspm-seed) | ||
| * Client only, TypeScript, TSD, Gulp, JSPM, Minimalist | ||
| * [babel-angular2-app (Shuhei Kagawa)](https://github.com/shuhei/babel-angular2-app) | ||
| * Client only, Minimalist, Babel, ES6+, Webpack (outdated) | ||
| ___ | ||
| enjoy — **AngularClass** | ||
| enjoy — **AngularClass** | ||
| <br><br> | ||
| [](https://angularclass.com) | ||
| [](https://angularclass.com) | ||
| ##[AngularClass](https://angularclass.com) | ||
| > Learn Angular in 2 days from the best | ||
| > Learn AngularJS, Angular 2, and Modern Web Development from the best. | ||
| > Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com | ||
| # License | ||
| [MIT](/LICENSE) |
@@ -1,19 +0,11 @@ | ||
| /// <reference path="../typings/_custom.d.ts" /> | ||
| /* | ||
| * Angular 2 decorators and servces | ||
| * Angular 2 decorators and services | ||
| */ | ||
| import {Directive, Component, View, LifecycleEvent} from 'angular2/angular2'; | ||
| import {RouteConfig, Router} from 'angular2/router'; | ||
| // should be angular2/http in next release | ||
| import {Http} from 'ngHttp/http'; | ||
| import {Component} from 'angular2/core'; | ||
| import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router'; | ||
| import {FORM_PROVIDERS} from 'angular2/common'; | ||
| /* | ||
| * Angular Directives | ||
| */ | ||
| import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; | ||
| // should be ROUTER_DIRECTIVES in next release | ||
| import {routerDirectives as ROUTER_DIRECTIVES} from 'angular2/router'; | ||
| import {RouterActive} from './directives/router-active'; | ||
| import {Home} from './home/home'; | ||
| /* | ||
@@ -25,81 +17,73 @@ * App Component | ||
| selector: 'app', | ||
| lifecycle: [ LifecycleEvent.onInit ] | ||
| }) | ||
| @View({ | ||
| // needed in order to tell Angular's compiler what's in the template | ||
| directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES ], | ||
| style: [` | ||
| .title { | ||
| font-family: Arial, | ||
| Helvetica, sans-serif; | ||
| providers: [ ...FORM_PROVIDERS ], | ||
| directives: [ ...ROUTER_DIRECTIVES, RouterActive ], | ||
| pipes: [], | ||
| styles: [` | ||
| nav ul { | ||
| display: inline; | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 60px; | ||
| } | ||
| nav li { | ||
| display: inline; | ||
| } | ||
| nav li.active { | ||
| background-color: lightgray; | ||
| } | ||
| `], | ||
| template: ` | ||
| <header> | ||
| <h1 class="title">Hello {{ title }}</h1> | ||
| </header> | ||
| <header> | ||
| <nav> | ||
| <h1>Hello {{ name }}</h1> | ||
| <ul> | ||
| <li router-active> | ||
| <a [routerLink]=" ['Index'] ">Index</a> | ||
| </li> | ||
| <li router-active> | ||
| <a [routerLink]=" ['Home'] ">Home</a> | ||
| </li> | ||
| <li router-active> | ||
| <a [routerLink]=" ['About'] ">About</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| Your Content Here | ||
| <div> | ||
| <input type="text" [(ng-model)]="title" autofocus> | ||
| </div> | ||
| <main> | ||
| <router-outlet></router-outlet> | ||
| </main> | ||
| <pre>this.title = {{ title | json }}</pre> | ||
| <pre>this.data = {{ data | json }}</pre> | ||
| </main> | ||
| <footer> | ||
| WebPack Angular 2 Starter by <a href="https://twitter.com/AngularClass">@AngularClass</a> | ||
| </footer> | ||
| <footer> | ||
| WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a> | ||
| <div> | ||
| <img [src]="angularclassLogo" width="10%"> | ||
| </div> | ||
| </footer> | ||
| ` | ||
| }) | ||
| @RouteConfig([ | ||
| { path: '/', component: Home, name: 'Index' }, | ||
| { path: '/home', component: Home, name: 'Home' }, | ||
| // Async load a component using Webpack's require with es6-promise-loader | ||
| { path: '/about', loader: () => require('./about/about')('About'), name: 'About' }, | ||
| { path: '/**', redirectTo: ['Index'] } | ||
| ]) | ||
| export class App { | ||
| title: string; | ||
| data: Array<any> = []; // default data | ||
| constructor(public http: Http) { | ||
| this.title = 'Angular 2'; | ||
| angularclassLogo = 'assets/img/angularclass-avatar.png'; | ||
| name = 'Angular 2 Webpack Starter'; | ||
| url = 'https://twitter.com/AngularClass'; | ||
| constructor() { | ||
| } | ||
| } | ||
| onInit() { | ||
| // npm run express-install | ||
| // npm run express | ||
| const BASE_URL = 'http://localhost:3001'; | ||
| const TODO_API_URL = '/api/todos'; | ||
| this.http. | ||
| get(BASE_URL + TODO_API_URL, { | ||
| headers: { | ||
| 'Accept': 'application/json', | ||
| 'Content-Type': 'application/json' | ||
| } | ||
| }). | ||
| toRx(). | ||
| map(res => res.json()). | ||
| subscribe( | ||
| // onNext value | ||
| data => this.serverData(data), | ||
| // onError | ||
| err => this.errorMessage(err) | ||
| );//end http | ||
| }//onInit | ||
| serverData(data) { | ||
| console.log('data', data); | ||
| this.data = data; | ||
| }//serverData | ||
| errorMessage(err) { | ||
| if (err && (/Unexpected token/).test(err.message)) { | ||
| console.info(`${'\n' | ||
| } // You must run these commands for the Http API to work ${'\n' | ||
| } npm install express connect-history-api-fallback morgan body-parser ${'\n' | ||
| } npm run express | ||
| `); | ||
| }//end err.message | ||
| }//errorMessage | ||
| } | ||
| /* | ||
| * Please review the https://github.com/AngularClass/angular2-examples/ repo for | ||
| * more angular app examples that you may copy/paste | ||
| * (The examples may not be updated as quickly. Please open an issue on github for us to update it) | ||
| * For help or questions please contact us at @AngularClass on twitter | ||
| * or our chat on Slack at https://AngularClass.com/slack-join | ||
| * or via chat on Gitter at https://gitter.im/AngularClass/angular2-webpack-starter | ||
| */ |
| { | ||
| "version": "1.5.0", | ||
| "compilerOptions": { | ||
| "target": "es5", | ||
| "module": "commonjs", | ||
| "declaration": false, | ||
| "noImplicitAny": false, | ||
| "removeComments": true, | ||
| "noLib": false, | ||
| "emitDecoratorMetadata": true, | ||
| "experimentalDecorators": true, | ||
| "sourceMap": true, | ||
| "listFiles": true, | ||
| "outDir": "dist" | ||
| "sourceMap": true | ||
| }, | ||
| "files": [ | ||
| "node_modules/typescript/bin/lib.dom.d.ts", | ||
| "src/typings/_custom.d.ts", | ||
| "src/app/components/app.ts", | ||
| "src/app/bootstrap.ts" | ||
| ] | ||
| "exclude": [ | ||
| "node_modules", | ||
| "typings/main.d.ts", | ||
| "typings/main" | ||
| ], | ||
| "filesGlob": [ | ||
| "./src/**/*.ts", | ||
| "./test/**/*.ts", | ||
| "!./node_modules/**/*.ts", | ||
| "src/custom_typings.d.ts", | ||
| "typings/browser.d.ts" | ||
| ], | ||
| "compileOnSave": false, | ||
| "buildOnSave": false, | ||
| "atom": { "rewriteTsconfig": false } | ||
| } |
| // @AngularClass | ||
| // Helper | ||
| var sliceArgs = Function.prototype.call.bind(Array.prototype.slice); | ||
| var NODE_ENV = process.env.NODE_ENV || 'development'; | ||
| // Node | ||
| /* | ||
| * Helper: root(), and rootDir() are defined at the bottom | ||
| */ | ||
| var path = require('path'); | ||
| var webpack = require('webpack'); | ||
| var path = require('path'); | ||
| var pkg = require('./package.json'); | ||
| var CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
| var HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
| var ENV = process.env.ENV = process.env.NODE_ENV = 'development'; | ||
| // Webpack Plugins | ||
| var OccurenceOrderPlugin = webpack.optimize.OccurenceOrderPlugin; | ||
| var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; | ||
| var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; | ||
| var DedupePlugin = webpack.optimize.DedupePlugin; | ||
| var DefinePlugin = webpack.DefinePlugin; | ||
| var BannerPlugin = webpack.BannerPlugin; | ||
| var metadata = { | ||
| title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass', | ||
| baseUrl: '/', | ||
| host: 'localhost', | ||
| port: 3000, | ||
| ENV: ENV | ||
| }; | ||
| /* | ||
| * Config | ||
| */ | ||
| var config = { | ||
| module.exports = { | ||
| // static data for index.html | ||
| metadata: metadata, | ||
| // for faster builds use 'eval' | ||
| devtool: 'source-map', | ||
| // devtool: 'eval', | ||
| debug: true, | ||
| cache: true, | ||
| // our Development Server configs | ||
| devServer: { | ||
| inline: true, | ||
| colors: true, | ||
| historyApiFallback: true, | ||
| contentBase: 'src/public', | ||
| publicPath: '/__build__' | ||
| }, | ||
| // cache: false, | ||
| // | ||
| entry: { | ||
| 'angular2': [ | ||
| // Angular 2 Deps | ||
| 'rx', | ||
| 'zone.js', | ||
| 'reflect-metadata', | ||
| // 'rtts_assert/rtts_assert', | ||
| // our angular app | ||
| entry: { 'polyfills': './src/polyfills.ts', 'main': './src/main.ts' }, | ||
| 'angular2/angular2', | ||
| 'angular2/router', | ||
| 'angular2/di', | ||
| 'ngHttp' | ||
| ], | ||
| 'app': [ | ||
| // App | ||
| /* | ||
| * include any 3rd party js lib here | ||
| */ | ||
| './src/app/bootstrap' | ||
| ] | ||
| }, | ||
| // Config for our build files | ||
| output: { | ||
| path: root('__build__'), | ||
| filename: '[name].js', | ||
| // filename: '[name].[hash].js', | ||
| sourceMapFilename: '[name].js.map', | ||
| path: root('dist'), | ||
| filename: '[name].bundle.js', | ||
| sourceMapFilename: '[name].map', | ||
| chunkFilename: '[id].chunk.js' | ||
| // publicPath: 'http://mycdn.com/' | ||
| }, | ||
| resolve: { | ||
| root: __dirname, | ||
| extensions: ['','.ts','.js','.json'], | ||
| alias: { | ||
| // we can switch between development and production | ||
| // 'angular2': 'node_modules/angular2/ts', | ||
| // 'angular2': 'angular2/ts/dev', | ||
| 'app': 'src/app', | ||
| 'common': 'src/common', | ||
| // 'components': 'src/app/components' | ||
| // 'services': '/app/services/*.js', | ||
| // 'stores/*': '/app/stores/*.js' | ||
| // 'angular2': 'angular2/es6/dev' | ||
| } | ||
| // ensure loader extensions match | ||
| extensions: prepend(['.ts','.js','.json','.css','.html'], '.async') // ensure .async.ts etc also works | ||
| }, | ||
| /* | ||
| * When using `templateUrl` and `styleUrls` please use `__filename` | ||
| * rather than `module.id` for `moduleId` in `@View` | ||
| */ | ||
| node: { | ||
| __filename: true | ||
| }, | ||
| module: { | ||
| preLoaders: [ | ||
| // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ root('node_modules') ] }, | ||
| // TODO(gdi2290): `exclude: [ root('node_modules/rxjs') ]` fixed with rxjs 5 beta.2 release | ||
| { test: /\.js$/, loader: "source-map-loader", exclude: [ root('node_modules/rxjs') ] } | ||
| ], | ||
| loaders: [ | ||
| // Support Angular 2 async routes via .async.ts | ||
| { test: /\.async\.ts$/, loaders: ['es6-promise-loader', 'ts-loader'], exclude: [ /\.(spec|e2e)\.ts$/ ] }, | ||
| // Support for .ts files. | ||
| { test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e|async)\.ts$/ ] }, | ||
| // Support for *.json files. | ||
| { test: /\.json$/, loader: 'json' }, | ||
| { test: /\.json$/, loader: 'json-loader' }, | ||
| // Support for CSS as raw text | ||
| { test: /\.css$/, loader: 'raw' }, | ||
| { test: /\.css$/, loader: 'raw-loader' }, | ||
| // support for .html as raw text | ||
| { test: /\.html$/, loader: 'raw' }, | ||
| { test: /\.html$/, loader: 'raw-loader' } | ||
| // Support for .ts files. | ||
| { test: /\.ts$/, loader: 'typescript-simple?&ignoreWarnings[]=2300&ignoreWarnings[]=2309', exclude: [ | ||
| /\.spec\.ts$/, | ||
| /\.e2e\.ts$/, | ||
| /web_modules/, | ||
| /test/, | ||
| /node_modules/ | ||
| ] | ||
| } | ||
| ], | ||
| noParse: [ | ||
| /rtts_assert\/src\/rtts_assert/ | ||
| // if you add a loader include the resolve file extension above | ||
| ] | ||
| }, | ||
| // plugins: plugins, // see below | ||
| context: __dirname, | ||
| stats: { colors: true, reasons: true } | ||
| }; | ||
| plugins: [ | ||
| new webpack.optimize.OccurenceOrderPlugin(true), | ||
| new webpack.optimize.CommonsChunkPlugin({ name: 'polyfills', filename: 'polyfills.bundle.js', minChunks: Infinity }), | ||
| // static assets | ||
| new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]), | ||
| // generating html | ||
| new HtmlWebpackPlugin({ template: 'src/index.html', inject: false }), | ||
| // replace | ||
| new webpack.DefinePlugin({ | ||
| 'process.env': { | ||
| 'ENV': JSON.stringify(metadata.ENV), | ||
| 'NODE_ENV': JSON.stringify(metadata.ENV) | ||
| } | ||
| }) | ||
| ], | ||
| var commons_chunks_plugins = [ | ||
| { | ||
| name: 'angular2', | ||
| minChunks: Infinity, | ||
| filename: 'angular2.js' | ||
| // Other module loader config | ||
| tslint: { | ||
| emitErrors: false, | ||
| failOnHint: false, | ||
| resourcePath: 'src' | ||
| }, | ||
| { | ||
| name: 'common', | ||
| filename: 'common.js' | ||
| } | ||
| ] | ||
| // our Webpack Development Server config | ||
| devServer: { | ||
| port: metadata.port, | ||
| host: metadata.host, | ||
| // contentBase: 'src/', | ||
| historyApiFallback: true, | ||
| watchOptions: { aggregateTimeout: 300, poll: 1000 } | ||
| }, | ||
| // we need this due to problems with es6-shim | ||
| node: {global: 'window', progress: false, crypto: 'empty', module: false, clearImmediate: false, setImmediate: false} | ||
| }; | ||
| // | ||
| var environment_plugins = { | ||
| all: [ | ||
| new DefinePlugin({ | ||
| 'process.env.NODE_ENV': JSON.stringify(NODE_ENV), | ||
| 'VERSION': pkg.version | ||
| }), | ||
| new OccurenceOrderPlugin(), | ||
| new DedupePlugin(), | ||
| ], | ||
| production: [ | ||
| new UglifyJsPlugin({ | ||
| compress: { | ||
| warnings: false, | ||
| drop_debugger: false | ||
| }, | ||
| output: { | ||
| comments: false | ||
| }, | ||
| beautify: false | ||
| }), | ||
| new BannerPlugin(getBanner(), {entryOnly: true}) | ||
| ], | ||
| development: [ | ||
| /* Dev Plugin */ | ||
| // new webpack.HotModuleReplacementPlugin(), | ||
| ] | ||
| }//env | ||
| if (NODE_ENV === 'production') { | ||
| // replace filename `.js` with `.min.js` | ||
| config.output.filename = config.output.filename.replace('.js', '.min.js'); | ||
| config.output.sourceMapFilename = config.output.sourceMapFilename.replace('.js', '.min.js'); | ||
| commons_chunks_plugins = commons_chunks_plugins.map(function(chunk) { | ||
| return chunk.filename.replace('.js', '.min.js'); | ||
| }); | ||
| } | ||
| else if (NODE_ENV === 'development') { | ||
| // any development actions here | ||
| } | ||
| // create CommonsChunkPlugin instance for each config | ||
| var combine_common_chunks = commons_chunks_plugins.map(function(config) { | ||
| return new CommonsChunkPlugin(config); | ||
| }); | ||
| // conbine everything | ||
| config.plugins = [].concat(combine_common_chunks, environment_plugins.all, environment_plugins[NODE_ENV]); | ||
| module.exports = config; | ||
| // Helper functions | ||
| function getBanner() { | ||
| return 'Angular2 Webpack Starter v'+ pkg.version +' by @gdi2990 from @AngularClass'; | ||
| } | ||
| function root(args) { | ||
| args = sliceArgs(arguments, 0); | ||
| args = Array.prototype.slice.call(arguments, 0); | ||
| return path.join.apply(path, [__dirname].concat(args)); | ||
| } | ||
| function prepend(extensions, args) { | ||
| args = args || []; | ||
| if (!Array.isArray(args)) { args = [args] } | ||
| return extensions.reduce(function(memo, val) { | ||
| return memo.concat(val, args.map(function(prefix) { | ||
| return prefix + val | ||
| })); | ||
| }, ['']); | ||
| } | ||
| function rootNode(args) { | ||
| args = sliceArgs(arguments, 0); | ||
| args = Array.prototype.slice.call(arguments, 0); | ||
| return root.apply(path, ['node_modules'].concat(args)); | ||
| } | ||
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 12 instances in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low license alerts
- decreased by-100%
0
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by11.41%
293
- Number of medium supply chain risk alerts
- decreased by-89.47%
2
Worsened metrics
- Total package byte prevSize
- decreased by-61.64%
321508
- Dev dependency count
- increased by86.96%
43
- Number of package files
- decreased by-44.72%
68
- Lines of code
- decreased by-92.27%
1287
- Number of low supply chain risk alerts
- increased by166.67%
8
Dependency changes
+ Addedes6-promise@^3.0.2
+ Addedes6-shim@^0.33.3
+ Addedes7-reflect-metadata@^1.5.5
+ Addedrxjs@5.0.0-beta.0
+ Addedangular2@2.0.0-beta.2(transitive)
+ Addedes6-shim@0.33.13(transitive)
+ Addedes7-reflect-metadata@1.6.0(transitive)
+ Addedreflect-metadata@0.1.2(transitive)
+ Addedrxjs@5.0.0-beta.0(transitive)
+ Addedzone.js@0.5.10(transitive)
- RemovedngHttp@file:examples/_fixed_cjs_http
- Removedreflect-metadata@^0.1.0
- Removedrtts_assert@2.0.0-alpha.35
- Removedrx@^2.5.3
- Removedamdefine@1.0.1(transitive)
- Removedangular2@2.0.0-alpha.35(transitive)
- Removedbalanced-match@1.0.2(transitive)
- Removedbrace-expansion@1.1.11(transitive)
- Removedcommander@2.6.0(transitive)
- Removedconcat-map@0.0.1(transitive)
- Removedglob@4.3.5(transitive)
- Removedinflight@1.0.6(transitive)
- Removedinherits@2.0.4(transitive)
- Removedminimatch@2.0.10(transitive)
- Removedonce@1.4.0(transitive)
- Removedreflect-metadata@0.1.00.1.14(transitive)
- Removedrsvp@3.6.2(transitive)
- Removedrtts_assert@2.0.0-alpha.35(transitive)
- Removedrx@2.5.12.5.3(transitive)
- Removedsemver@2.3.2(transitive)
- Removedsource-map@0.1.32(transitive)
- Removedsource-map-support@0.2.10(transitive)
- Removedtraceur@0.0.87(transitive)
- Removedwrappy@1.0.2(transitive)
- Removedzone.js@0.5.150.5.2(transitive)
Updatedangular2@2.0.0-beta.2
Updatedzone.js@0.5.10