diff --git a/.editorconfig b/.editorconfig index 802ae913..4c576f3d 100644 --- a/.editorconfig +++ b/.editorconfig @@ -16,9 +16,9 @@ charset = utf-8 # 4 space indentation [*.{js,css,scss,html}] indent_style = space -indent_size = 2 +indent_size = 4 # Matches the exact files either package.json or .travis.yml [{package.json,.travis.yml,bower.json}] indent_style = space -indent_size = 2 +indent_size = 4 diff --git a/README.md b/README.md index b28f22dc..d438c258 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,32 @@ -# angular2-webpack +>Based on the great [angular2-webpack](https://github.com/preboot/angular2-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) +# angular-typescript-webpack -**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.** +A complete, yet simple, starter for Angular (**not 2**) with TypeScript using Webpack (including Bootstrap). -A complete, yet simple, starter for Angular 2 using Webpack. +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. By default, [Bootstrap](http://getbootstrap.com) is also included. -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/). +* Best practices in file and application organization for [Angular](https://angularjs.org/). * Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/). -* Easily add new components using [Angular 2 cli](https://github.com/angular/angular-cli). -* 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.io/). >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/rose-m/angular-typescript-webpack.git my-app # change directory to your app $ cd my-app @@ -75,7 +74,8 @@ After you have installed all dependencies you can now run the app with: npm start ``` -It will 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:8080`. +It will 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:8080`. ## Developing @@ -115,23 +115,15 @@ npm run docs 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 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/bootstrap.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 reference some external libs in the +[bootstrap](https://github.com/preboot/angular-typescript-webpack/blob/master/src/app/index.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: - -```sh -npm install bootstrap@4.0.0 --save -``` - -And in [vendor.ts](https://github.com/preboot/angular2-webpack/blob/master/src/vendor.ts) add the following: - -```ts -import 'bootstrap/dist/css/bootstrap.css'; -``` +Just install the lib and import the css files in [vendor.ts](https://github.com/rose-m/angular-typescript-webpack/blob/master/src/vendor.ts). # TypeScript diff --git a/karma-shim.js b/karma-shim.js index 6ae04adc..e200097e 100644 --- a/karma-shim.js +++ b/karma-shim.js @@ -1,14 +1,9 @@ Error.stackTraceLimit = Infinity; require('es6-shim'); -require('reflect-metadata'); - -require('ts-helpers'); - -require('zone.js/dist/zone'); -require('zone.js/dist/long-stack-trace-zone'); -require('zone.js/dist/jasmine-patch'); -require('zone.js/dist/async-test'); +require('angular'); +require('angular-mocks'); +require('angular-ui-router/release/angular-ui-router'); /* Ok, this is kinda crazy. We can use the the context method on @@ -25,11 +20,3 @@ var appContext = require.context('./src', true, /\.spec\.ts/); // that will require the file and load it up here. Context will // loop and require those spec files here appContext.keys().forEach(appContext); - -// Select BrowserDomAdapter. -// see https://github.com/AngularClass/angular2-webpack-starter/issues/124 -// Somewhere in the test setup -var testing = require('@angular/core/testing'); -var browser = require('@angular/platform-browser-dynamic/testing'); - -testing.setBaseTestProviders(browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); diff --git a/package.json b/package.json index 748a1e55..82bd73db 100644 --- a/package.json +++ b/package.json @@ -23,19 +23,14 @@ "postinstall": "npm run webdriver-update && typings install" }, "dependencies": { - "@angular/common": "2.0.0-rc.1", - "@angular/compiler": "2.0.0-rc.1", - "@angular/core": "2.0.0-rc.1", - "@angular/http": "2.0.0-rc.1", - "@angular/platform-browser": "2.0.0-rc.1", - "@angular/platform-browser-dynamic": "2.0.0-rc.1", - "@angular/router-deprecated": "2.0.0-rc.1", + "angular": "^1.5.5", + "angular-ui-router": "^0.3.0", + "bootstrap-sass": "^3.3.6", "es6-shim": "^0.35.0", - "reflect-metadata": "0.1.2", - "rxjs": "5.0.0-beta.6", - "zone.js": "0.6.12" + "jquery": "^2.2.3" }, "devDependencies": { + "angular-mocks": "^1.5.5", "autoprefixer": "^6.3.2", "codelyzer": "0.0.19", "copy-webpack-plugin": "^2.1.3", diff --git a/protractor.conf.js b/protractor.conf.js index 12b68e5d..8f38fc0b 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -30,14 +30,6 @@ exports.config = { browser.ignoreSynchronization = true; }, - - - /** - * Angular 2 configuration - * - * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching - * `rootEl` - * - */ - useAllAngular2AppRoots: true + + waitForAngular: true }; diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html deleted file mode 100644 index 7dc59929..00000000 --- a/src/app/about/about.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

- About Works! -

diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss deleted file mode 100644 index b3afa74c..00000000 --- a/src/app/about/about.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -* { - color: #f87c08; -} diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts deleted file mode 100644 index ffcb5ef0..00000000 --- a/src/app/about/about.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { - it, - describe, - async, - inject, - beforeEachProviders -} from '@angular/core/testing'; - -import { TestComponentBuilder } from '@angular/compiler/testing'; - -import { AboutComponent } from './about.component'; - -describe('About Component', () => { - - beforeEachProviders(() => []); - - it('should ...', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - tcb.createAsync(AboutComponent).then((fixture) => { - fixture.detectChanges(); - }); - }))); - -}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts deleted file mode 100644 index 85dab66a..00000000 --- a/src/app/about/about.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'my-about', - template: require('./about.component.html'), - styles: [require('./about.component.scss')] -}) -export class AboutComponent implements OnInit { - - constructor() { - // Do stuff - } - - ngOnInit() { - console.log('Hello About'); - } - -} diff --git a/src/app/about/index.ts b/src/app/about/index.ts deleted file mode 100644 index b7cb92ae..00000000 --- a/src/app/about/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './about.component'; diff --git a/src/app/app.component.e2e-spec.js b/src/app/app.component.e2e-spec.js index 92a7004d..df6dddd3 100644 --- a/src/app/app.component.e2e-spec.js +++ b/src/app/app.component.e2e-spec.js @@ -1,27 +1,27 @@ describe('App', function () { - beforeEach(function () { - browser.get('/'); - }); + beforeEach(function () { + browser.get('/'); + }); - it('should have a title', function () { - expect(browser.getTitle()).toEqual("Angular 2 App | ng2-webpack"); - }); + it('should have a title', function () { + expect(browser.getTitle()).toEqual("Angular TypeScript App"); + }); - it('should have
', function () { - expect(element(by.css('my-app header')).isPresent()).toEqual(true); - }); + it('should have
', function () { + expect(element(by.css('app header')).isPresent()).toEqual(true); + }); - it('should have
', function () { - expect(element(by.css('my-app main')).isPresent()).toEqual(true); - }); + it('should have
', function () { + expect(element(by.css('app main')).isPresent()).toEqual(true); + }); - it('should have a main title', function () { - expect(element(by.css('main .title')).getText()).toEqual('Hello from Angular 2 !'); - }); + it('should have a main title', function () { + expect(element(by.css('main .title')).getText()).toEqual('Hello from Starter!'); + }); - it('should have
', function () { - expect(element(by.css('my-app footer')).getText()).toEqual("Webpack Angular 2 Starter"); - }); + it('should have
', function () { + expect(element(by.css('app footer')).getText()).toEqual("Webpack Angular TypeScript Starter"); + }); }); diff --git a/src/app/app.component.html b/src/app/app.component.html index 577009a4..65b97456 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,17 +1,33 @@ -
- -
-
-

Hello from {{api.title}}!

+
+
+
- + + + + +
+
+ +
+ + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 895a09ab..10f1ad8c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,27 +1,24 @@ -// styles applied on :host are applied on the current component, "app" in this case -:host { - display: block; -} - -header { - background-color: #fff; - padding: 16px; - position: fixed; - top: 0; - left: 0; - width: 100%; - box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); -} +#app { + header { + background-color: #fff; + padding: 16px; + position: fixed; + top: 0; + left: 0; + width: 100%; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); + } -main { - padding: 1em; - font-family: Arial, Helvetica, sans-serif; - text-align: center; - margin-top: 50px; - display: block; -} + main { + padding: 1em; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + margin-top: 50px; + display: block; + } -footer { - text-align: center; - font-size: 0.8em; + footer { + text-align: center; + font-size: 0.8em; + } } diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 5c765905..26a60c9e 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,36 +1,17 @@ -import { - it, - inject, - beforeEachProviders -} from '@angular/core/testing'; - -// to use Translate Service, we need Http, and to test Http we need to mock the backend -import { BaseRequestOptions, Http } from '@angular/http'; -import { MockBackend } from '@angular/http/testing'; -import { provide } from '@angular/core'; - -// Load the implementations that should be tested -import { ApiService } from './shared'; -import { AppComponent } from './app.component'; +import App from './index'; +import {AppComponent} from './app.component'; describe('App', () => { - // provide our implementations or mocks to the dependency injector - beforeEachProviders(() => [ - AppComponent, - ApiService, - BaseRequestOptions, - MockBackend, - // Provide a mocked (fake) backend for Http - provide(Http, { - useFactory: function useFactory(backend, defaultOptions) { - return new Http(backend, defaultOptions); - }, - deps: [MockBackend, BaseRequestOptions] - }) - ]); + let $componentController:ng.IComponentControllerService; + + beforeEach(angular.mock.module(App.name)); + beforeEach(inject((_$componentController_) => { + $componentController = _$componentController_; + })); - it('should have an url', inject([AppComponent], (app: AppComponent) => { - expect(app.url).toEqual('https://github.com/preboot/angular2-webpack'); - })); + it('should have an url', () => { + const comp:AppComponent = $componentController('app', null); + expect(comp.url).toBe('https://github.com/rose-m/angular-typescript-webpack'); + }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a012dba9..bcd23068 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,30 +1,15 @@ -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; +require('./app.component.scss'); -import { ApiService } from './shared'; -import { HomeComponent } from './home'; -import { AboutComponent } from './about'; - -import '../style/app.scss'; - -/* - * App Component - * Top Level Component - */ -@Component({ - selector: 'my-app', // - providers: [ApiService], - directives: [...ROUTER_DIRECTIVES], - template: require('./app.component.html'), - styles: [require('./app.component.scss')], -}) -@RouteConfig([ - {path: '/', component: HomeComponent, name: 'Home'}, - {path: '/About', component: AboutComponent, name: 'About'} -]) export class AppComponent { - url = 'https://github.com/preboot/angular2-webpack'; + url = 'https://github.com/rose-m/angular-typescript-webpack'; - constructor(private api: ApiService) { - } + constructor() { + } } + +const component:ng.IComponentOptions = { + controller: AppComponent, + template: require('./app.component.html') +}; + +export default component; diff --git a/src/app/home/home.component.e2e-spec.js b/src/app/home/home.component.e2e-spec.js deleted file mode 100644 index 1b2f5e27..00000000 --- a/src/app/home/home.component.e2e-spec.js +++ /dev/null @@ -1,13 +0,0 @@ -describe('Home', function () { - - beforeEach(function () { - browser.get('/'); - }); - - it('should have ', function () { - var home = element(by.css('my-app my-home')); - expect(home.isPresent()).toEqual(true); - expect(home.getText()).toEqual("Home Works!"); - }); - -}); diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 604d9e1d..59947585 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1,4 @@ -

- Home Works! -

+

Hello from Starter!

+ + + diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss deleted file mode 100644 index 5db1e17a..00000000 --- a/src/app/home/home.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -// component styles are encapsulated and only applied to their components -* { - color: #FFEF00; -} diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts deleted file mode 100644 index 36a45618..00000000 --- a/src/app/home/home.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { - it, - inject, - describe, - beforeEachProviders, -} from '@angular/core/testing'; - -// Load the implementations that should be tested -import { HomeComponent } from './home.component'; - -describe('Home', () => { - // provide our implementations or mocks to the dependency injector - beforeEachProviders(() => [ - HomeComponent - ]); - - it('should log ngOnInit', inject([HomeComponent], (home) => { - spyOn(console, 'log'); - expect(console.log).not.toHaveBeenCalled(); - - home.ngOnInit(); - expect(console.log).toHaveBeenCalledWith('Hello Home'); - })); - -}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 9043761e..92f5079c 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,18 +1,12 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'my-home', - template: require('./home.component.html'), - styles: [require('./home.component.scss')] -}) -export class HomeComponent implements OnInit { - - constructor() { - // Do stuff - } +export class HomeComponent { + constructor() { + console.log('hey'); + } +} - ngOnInit() { - console.log('Hello Home'); - } +const comp:ng.IComponentOptions = { + controller: HomeComponent, + template: require('./home.component.html') +}; -} +export default comp; diff --git a/src/app/home/index.ts b/src/app/home/index.ts index ab5a522c..029fa4ff 100644 --- a/src/app/home/index.ts +++ b/src/app/home/index.ts @@ -1 +1,6 @@ -export * from './home.component'; +import Component from './home.component'; + +const module = angular.module('app.home', []) + .component('appHome', Component); + +export default module; diff --git a/src/app/index.ts b/src/app/index.ts new file mode 100644 index 00000000..4f2f0380 --- /dev/null +++ b/src/app/index.ts @@ -0,0 +1,20 @@ +import Component from './app.component'; +import Home from './home'; + +const app = angular + .module('app', [ + 'ui.router', + Home.name + ]) + .config(($stateProvider:ng.ui.IStateProvider, $urlRouterProvider:ng.ui.IUrlRouterProvider) => { + $stateProvider + .state('home', { + url: '/home', + template: '' + }); + + $urlRouterProvider.otherwise('/home'); + }) + .component('app', Component); + +export default app; diff --git a/src/app/shared/api.service.spec.ts b/src/app/shared/api.service.spec.ts deleted file mode 100644 index 4f98e70f..00000000 --- a/src/app/shared/api.service.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { - it, - describe, - expect, - inject, - beforeEachProviders -} from '@angular/core/testing'; - -import { ApiService } from './api.service'; - -describe('Api Service', () => { - - beforeEachProviders(() => [ApiService]); - - it('should ...', inject([ApiService], (api: ApiService) => { - expect(api.title).toBe('Angular 2'); - })); - -}); diff --git a/src/app/shared/api.service.ts b/src/app/shared/api.service.ts deleted file mode 100644 index a69d91ea..00000000 --- a/src/app/shared/api.service.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class ApiService { - title = 'Angular 2'; -} diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts deleted file mode 100644 index 68fada65..00000000 --- a/src/app/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './api.service'; diff --git a/src/main.ts b/src/main.ts index 407dccfe..41ad2734 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,25 +1,2 @@ -import { enableProdMode } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { ELEMENT_PROBE_PROVIDERS } from '@angular/platform-browser'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; -import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -import { HTTP_PROVIDERS } from '@angular/http'; - -import {AppComponent} from './app/app.component'; - -const ENV_PROVIDERS = []; -// depending on the env mode, enable prod mode or add debugging modules -if (process.env.ENV === 'build') { - enableProdMode(); -} else { - ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS); -} - -bootstrap(AppComponent, [ - // These are dependencies of our App - ...HTTP_PROVIDERS, - ...ROUTER_PROVIDERS, - ...ENV_PROVIDERS, - { provide: LocationStrategy, useClass: HashLocationStrategy } // use #/ routes, remove this for HTML5 mode - ]) - .catch(err => console.error(err)); +import './style/app.scss'; +import './app'; diff --git a/src/polyfills.ts b/src/polyfills.ts index 02c74ac8..e55b76c6 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -1,16 +1,8 @@ import 'es6-shim'; -import 'reflect-metadata'; -require('zone.js/dist/zone'); - -import 'ts-helpers'; if (process.env.ENV === 'build') { // Production - } else { // Development - Error['stackTraceLimit'] = Infinity; - - require('zone.js/dist/long-stack-trace-zone'); } diff --git a/src/public/index.html b/src/public/index.html index 700e36be..6ebd6759 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -1,13 +1,13 @@ - + - Angular 2 App | ng2-webpack + Angular TypeScript App - Loading... + Loading... diff --git a/src/style/app.scss b/src/style/app.scss index d73ea23c..2c84ef64 100644 --- a/src/style/app.scss +++ b/src/style/app.scss @@ -1,8 +1,6 @@ -// styles in src/style directory are applied to the whole page -body { - background: #0147A7; - color: #fff; -} -a { - color: #03A9F4; -} +@import 'http://github.com/~bootstrap-sass/assets/stylesheets/bootstrap/variables'; +/* Override any variables */ +$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; +/* // overrides */ + +@import 'http://github.com/~bootstrap-sass/assets/stylesheets/bootstrap'; diff --git a/src/vendor.ts b/src/vendor.ts index f0791c06..00b36468 100644 --- a/src/vendor.ts +++ b/src/vendor.ts @@ -1,13 +1,10 @@ -// Angular 2 -import '@angular/platform-browser'; -import '@angular/platform-browser-dynamic'; -import '@angular/core'; -import '@angular/common'; -import '@angular/http'; -import '@angular/router-deprecated'; +// jQuery +import 'jquery'; -// RxJS -import 'rxjs'; +// Angular +import 'angular'; +import 'angular-ui-router'; + +import 'bootstrap-sass'; -// Other vendors for example jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ... diff --git a/tslint.json b/tslint.json index 41c6c0e1..7df9d542 100644 --- a/tslint.json +++ b/tslint.json @@ -89,8 +89,7 @@ "check-branch", "check-decl", "check-operator", - "check-separator", - "check-type" + "check-separator" ], "directive-selector-name": [true, "camelCase"], diff --git a/typings.json b/typings.json index f78946be..64e35a42 100644 --- a/typings.json +++ b/typings.json @@ -1,9 +1,13 @@ { "ambientDevDependencies": { + "angular-mocks": "registry:dt/angular-mocks#1.3.0+20160425155016", "jasmine": "registry:dt/jasmine#2.2.0+20160412134438" }, "ambientDependencies": { + "angular": "registry:dt/angular#1.5.0+20160509150441", + "angular-ui-router": "registry:dt/angular-ui-router#1.1.5+20160514162931", "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", + "jquery": "registry:dt/jquery#1.10.0+20160417213236", "node": "registry:dt/node#4.0.0+20160501135006" } } diff --git a/webpack.config.js b/webpack.config.js index 364e3267..756588f8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,247 +18,246 @@ var isTest = ENV === 'test' || ENV === 'test-watch'; var isProd = ENV === 'build'; module.exports = function makeWebpackConfig() { - /** - * Config - * Reference: http://webpack.github.io/docs/configuration.html - * This is the object where all configuration gets set - */ - var config = {}; + /** + * Config + * Reference: http://webpack.github.io/docs/configuration.html + * This is the object where all configuration gets set + */ + var config = {}; - /** - * Devtool - * Reference: http://webpack.github.io/docs/configuration.html#devtool - * Type of sourcemap to use per build type - */ - if (isTest) { - config.devtool = 'inline-source-map'; - } else if (isProd) { - config.devtool = 'source-map'; - } else { - config.devtool = 'eval-source-map'; - } + /** + * Devtool + * Reference: http://webpack.github.io/docs/configuration.html#devtool + * Type of sourcemap to use per build type + */ + if (isTest) { + config.devtool = 'inline-source-map'; + } else if (isProd) { + config.devtool = 'source-map'; + } else { + config.devtool = 'eval-source-map'; + } - // add debug messages - config.debug = !isProd || !isTest; + // add debug messages + config.debug = !isProd || !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 - }; + /** + * 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 - * Reference: http://webpack.github.io/docs/configuration.html#output - */ - config.output = isTest ? {} : { - path: root('dist'), - publicPath: isProd ? '/' : 'http://localhost:8080/', - filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js', - chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js' - }; + /** + * Output + * Reference: http://webpack.github.io/docs/configuration.html#output + */ + config.output = isTest ? {} : { + path: root('dist'), + publicPath: isProd ? '/' : 'http://localhost:8080/', + filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js', + chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js' + }; - /** - * Resolve - * Reference: http://webpack.github.io/docs/configuration.html#resolve - */ - config.resolve = { - cache: !isTest, - root: root(), - // only discover files that have those extensions - extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'], - alias: { - 'app': 'src/app', - 'common': 'src/common' - } - }; + /** + * Resolve + * Reference: http://webpack.github.io/docs/configuration.html#resolve + */ + config.resolve = { + cache: !isTest, + root: root(), + // only discover files that have those extensions + extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'], + alias: { + 'app': 'src/app', + 'common': 'src/common' + } + }; - /** - * Loaders - * Reference: http://webpack.github.io/docs/configuration.html#module-loaders - * List: http://webpack.github.io/docs/list-of-loaders.html - * This handles most of the magic responsible for converting modules - */ - config.module = { - preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}], - loaders: [ - // Support for .ts files. - { - test: /\.ts$/, - loader: 'ts', - query: { - 'ignoreDiagnostics': [ - 2403, // 2403 -> Subsequent variable declarations - 2300, // 2300 -> Duplicate identifier - 2374, // 2374 -> Duplicate number index signature - 2375, // 2375 -> Duplicate string index signature - 2502 // 2502 -> Referenced directly or indirectly - ] - }, - exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/] - }, + /** + * Loaders + * Reference: http://webpack.github.io/docs/configuration.html#module-loaders + * List: http://webpack.github.io/docs/list-of-loaders.html + * This handles most of the magic responsible for converting modules + */ + config.module = { + preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}], + loaders: [ + // Support for .ts files. + { + test: /\.ts$/, + loader: 'ts', + query: { + 'ignoreDiagnostics': [ + 2403, // 2403 -> Subsequent variable declarations + 2300, // 2300 -> Duplicate identifier + 2374, // 2374 -> Duplicate number index signature + 2375, // 2375 -> Duplicate string index signature + 2502 // 2502 -> Referenced directly or indirectly + ] + }, + exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/] + }, - // copy those assets to output - {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'}, + // copy those assets to output + {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'}, - // Support for *.json files. - {test: /\.json$/, loader: 'json'}, + // Support for *.json files. + {test: /\.json$/, loader: 'json'}, - // Support for CSS as raw text - // use 'null' loader in test mode (https://github.com/webpack/null-loader) - // all css in src/style will be bundled in an external css file - { - test: /\.css$/, - exclude: root('src', 'app'), - loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') - }, - // all css required in src/app files will be merged in js files - {test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'}, + // Support for CSS as raw text + // use 'null' loader in test mode (https://github.com/webpack/null-loader) + // all css in src/style will be bundled in an external css file + { + test: /\.css$/, + exclude: root('src', 'app'), + loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') + }, + // all css required in src/app files will be merged in js files + {test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'}, - // support for .scss files - // use 'null' loader in test mode (https://github.com/webpack/null-loader) - // all css in src/style will be bundled in an external css file - { - test: /\.scss$/, - exclude: root('src', 'app'), - loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass') - }, - // all css required in src/app files will be merged in js files - {test: /\.scss$/, exclude: root('src', 'style'), loader: 'raw!postcss!sass'}, + // support for .scss files + // use 'null' loader in test mode (https://github.com/webpack/null-loader) + // all css will be bundled in an external css file + { + test: /\.scss$/, + loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass') + }, - // support for .html as raw text - // todo: change the loader to something that adds a hash to images - {test: /\.html$/, loader: 'raw'} - ], - postLoaders: [], - noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/] - }; + // support for .html as raw text + // todo: change the loader to something that adds a hash to images + {test: /\.html$/, loader: 'raw'} + ], + postLoaders: [] + // noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/] + }; - if (isTest) { - // instrument only testing sources with Istanbul, covers js compiled files for now :-/ - config.module.postLoaders.push({ - test: /\.(js|ts)$/, - include: path.resolve('src'), - loader: 'istanbul-instrumenter-loader', - exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] - }) - } + if (isTest) { + // instrument only testing sources with Istanbul, covers js compiled files for now :-/ + config.module.postLoaders.push({ + test: /\.(js|ts)$/, + include: path.resolve('src'), + loader: 'istanbul-instrumenter-loader', + exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] + }) + } - /** - * Plugins - * Reference: http://webpack.github.io/docs/configuration.html#plugins - * List: http://webpack.github.io/docs/list-of-plugins.html - */ - config.plugins = [ - // Define env variables to help with builds - // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin - new webpack.DefinePlugin({ - // Environment helpers - 'process.env': { - ENV: JSON.stringify(ENV) - } - }) - ]; + /** + * Plugins + * Reference: http://webpack.github.io/docs/configuration.html#plugins + * List: http://webpack.github.io/docs/list-of-plugins.html + */ + config.plugins = [ + // Define env variables to help with builds + // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin + new webpack.DefinePlugin({ + // Environment helpers + 'process.env': { + ENV: JSON.stringify(ENV) + } + }), + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery' + }) + ]; - if (!isTest) { - config.plugins.push( - // Generate common chunks if necessary - // Reference: https://webpack.github.io/docs/code-splitting.html - // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin - new CommonsChunkPlugin({ - name: ['vendor', 'polyfills'] - }), + if (!isTest) { + config.plugins.push( + // Generate common chunks if necessary + // Reference: https://webpack.github.io/docs/code-splitting.html + // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin + new CommonsChunkPlugin({ + name: ['vendor', 'polyfills'] + }), - // Inject script and link tags into html files - // Reference: https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - template: './src/public/index.html', - chunksSortMode: 'dependency' - }), + // Inject script and link tags into html files + // Reference: https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + template: './src/public/index.html', + chunksSortMode: 'dependency' + }), - // Extract css files - // Reference: https://github.com/webpack/extract-text-webpack-plugin - // Disabled when in test mode or not in build mode - new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd}) - ); - } + // Extract css files + // Reference: https://github.com/webpack/extract-text-webpack-plugin + // Disabled when in test mode or not in build mode + new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd}) + ); + } - // Add build specific plugins - if (isProd) { - 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(), + // Add build specific plugins + if (isProd) { + 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(), - // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin - // Dedupe modules in the output - new webpack.optimize.DedupePlugin(), + // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin + // Dedupe modules in the output + new webpack.optimize.DedupePlugin(), - // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin - // Minify all javascript, switch loaders to minimizing mode - new webpack.optimize.UglifyJsPlugin({ - // Angular 2 is broken again, disabling mangle until beta 6 that should fix the thing - // Todo: remove this with beta 6 - mangle: false - }), + // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin + // Minify all javascript, switch loaders to minimizing mode + new webpack.optimize.UglifyJsPlugin({ + mangle: true + }), - // Copy assets from the public folder - // Reference: https://github.com/kevlened/copy-webpack-plugin - new CopyWebpackPlugin([{ - from: root('src/public') - }]) - ); - } + // Copy assets from the public folder + // Reference: https://github.com/kevlened/copy-webpack-plugin + new CopyWebpackPlugin([{ + from: root('src/public') + }]) + ); + } - /** - * PostCSS - * Reference: https://github.com/postcss/autoprefixer-core - * Add vendor prefixes to your css - */ - config.postcss = [ - autoprefixer({ - browsers: ['last 2 version'] - }) - ]; + /** + * PostCSS + * Reference: https://github.com/postcss/autoprefixer-core + * Add vendor prefixes to your css + */ + config.postcss = [ + autoprefixer({ + browsers: ['last 2 version'] + }) + ]; - /** - * Sass - * Reference: https://github.com/jtangelder/sass-loader - * Transforms .scss files to .css - */ - config.sassLoader = { - //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] - }; + /** + * Sass + * Reference: https://github.com/jtangelder/sass-loader + * Transforms .scss files to .css + */ + config.sassLoader = { + //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] + }; - /** - * Apply the tslint loader as pre/postLoader - * Reference: https://github.com/wbuchwalter/tslint-loader - */ - config.tslint = { - emitErrors: false, - failOnHint: false - }; + /** + * Apply the tslint loader as pre/postLoader + * Reference: https://github.com/wbuchwalter/tslint-loader + */ + config.tslint = { + emitErrors: false, + failOnHint: false + }; - /** - * Dev server configuration - * Reference: http://webpack.github.io/docs/configuration.html#devserver - * Reference: http://webpack.github.io/docs/webpack-dev-server.html - */ - config.devServer = { - contentBase: './src/public', - historyApiFallback: true, - stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose - }; + /** + * Dev server configuration + * Reference: http://webpack.github.io/docs/configuration.html#devserver + * Reference: http://webpack.github.io/docs/webpack-dev-server.html + */ + config.devServer = { + contentBase: './src/public', + historyApiFallback: true, + stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose + }; - return config; + return config; }(); // Helper functions function root(args) { - args = Array.prototype.slice.call(arguments, 0); - return path.join.apply(path, [__dirname].concat(args)); + args = Array.prototype.slice.call(arguments, 0); + return path.join.apply(path, [__dirname].concat(args)); }