mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Initial commit.
This commit is contained in:
smartapant
commit
6558ee2fc4
92 changed files with 3193 additions and 0 deletions
16
.editorconfig
Normal file
16
.editorconfig
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# @AngularClass
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
11
.github/CONTRIBUTING.md
vendored
Normal file
11
.github/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
## Read and contribute to the Wiki
|
||||
|
||||
Make sure you read the Wiki
|
||||
https://github.com/AngularClass/angular2-webpack-starter/wiki
|
||||
|
||||
## Submitting Pull Requests
|
||||
If you're changing the structure of the repository please create an issue first
|
||||
|
||||
## Submitting bug reports
|
||||
|
||||
Make sure you are on latest changes and that you ran this command `npm run clean:install` after updating your local repository. If you can, please provide more infomation about your environment such as browser, operating system, node version, and npm version
|
||||
36
.github/ISSUE_TEMPLATE.md
vendored
Normal file
36
.github/ISSUE_TEMPLATE.md
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
**Note: for support questions, please use one of these channels:** [Chat: AngularClass.slack](http://angularclass.com/member-join/) or [Twitter: @AngularClass](https://twitter.com/AngularClass)
|
||||
|
||||
* **I'm submitting a ...**
|
||||
[ ] bug report
|
||||
[ ] feature request
|
||||
[ ] question about the decisions made in the repository
|
||||
|
||||
* **Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
|
||||
|
||||
* **What is the current behavior?**
|
||||
|
||||
|
||||
|
||||
* **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** via
|
||||
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
|
||||
|
||||
|
||||
|
||||
* **What is the expected behavior?**
|
||||
|
||||
|
||||
|
||||
* **What is the motivation / use case for changing the behavior?**
|
||||
|
||||
|
||||
|
||||
* **Please tell us about your environment:**
|
||||
|
||||
- Angular version: 2.0.0-beta.X
|
||||
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
|
||||
|
||||
|
||||
|
||||
* **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
|
||||
13
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
13
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
|
||||
|
||||
|
||||
|
||||
* **What is the current behavior?** (You can also link to an open issue here)
|
||||
|
||||
|
||||
|
||||
* **What is the new behavior (if this is a feature change)?**
|
||||
|
||||
|
||||
|
||||
* **Other information**:
|
||||
61
.gitignore
vendored
Normal file
61
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
# @AngularClass
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Users Environment Variables
|
||||
.lock-wscript
|
||||
|
||||
# OS generated files #
|
||||
.DS_Store
|
||||
ehthumbs.db
|
||||
Icon?
|
||||
Thumbs.db
|
||||
|
||||
# Node Files #
|
||||
/node_modules
|
||||
/bower_components
|
||||
npm-debug.log
|
||||
|
||||
# Coverage #
|
||||
/coverage/
|
||||
|
||||
# Typing #
|
||||
/src/typings/tsd/
|
||||
/typings/
|
||||
/tsd_typings/
|
||||
|
||||
# Dist #
|
||||
/dist
|
||||
/public/__build__/
|
||||
/src/*/__build__/
|
||||
/__build__/**
|
||||
/public/dist/
|
||||
/src/*/dist/
|
||||
/dist/**
|
||||
.webpack.json
|
||||
|
||||
# Doc #
|
||||
/doc/
|
||||
|
||||
# IDE #
|
||||
.idea/
|
||||
*.swp
|
||||
22
LICENSE
Normal file
22
LICENSE
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-2016 AngularClass LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
347
README.md
Normal file
347
README.md
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
[](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">
|
||||
<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://angularclass.com/slack-join) [](https://gitter.im/angularclass/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
|
||||
> 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-)), [Material](https://github.com/angular/material2), [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), [TsLint](http://palantir.github.io/tslint/), [Codelyzer](https://github.com/mgechev/codelyzer), [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), 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/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)
|
||||
|
||||
> If you're looking for Webpack 2 version then see the experimental version [angular2-webpack2-starter](https://github.com/gdi2290/angular2-webpack2-starter) that will be merged
|
||||
|
||||
> If you're looking for something easier to get started with then see the offical angular2-seed that I also maintain [angular/angular2-seed](https://github.com/angular/angular2-seed)
|
||||
|
||||
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.
|
||||
* 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
|
||||
* Hot Module Replacement with Webpack
|
||||
* Material Design with [angular/material2](https://github.com/angular/material2)
|
||||
|
||||
### Quick start
|
||||
**Make sure you have Node version >= 4.0 and NPM >= 3**
|
||||
> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts)
|
||||
|
||||
```bash
|
||||
# clone our repo
|
||||
# --depth 1 removes all but one .git commit history
|
||||
git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git
|
||||
|
||||
# change directory to our repo
|
||||
cd angular2-webpack-starter
|
||||
|
||||
# add required global libraries
|
||||
npm install typings webpack-dev-server rimraf webpack -g
|
||||
|
||||
# install the repo with npm
|
||||
npm install
|
||||
|
||||
# start the server
|
||||
npm start
|
||||
|
||||
# use Hot Module Replacement
|
||||
npm run server:dev:hmr
|
||||
|
||||
# if you're in China use cnpm
|
||||
# https://github.com/cnpm/cnpm
|
||||
```
|
||||
go to [http://0.0.0.0:3000](http://0.0.0.0:3000) or [http://localhost:3000](http://localhost:3000) in your browser
|
||||
|
||||
# Table of Contents
|
||||
* [File Structure](#file-structure)
|
||||
* [Getting Started](#getting-started)
|
||||
* [Dependencies](#dependencies)
|
||||
* [Installing](#installing)
|
||||
* [Running the app](#running-the-app)
|
||||
* [Configuration](#configuration)
|
||||
* [Contributing](#contributing)
|
||||
* [TypeScript](#typescript)
|
||||
* [Typings](#typings)
|
||||
* [Frequently asked questions](#frequently-asked-questions)
|
||||
* [Support, Questions, or Feedback](#support-questions-or-feedback)
|
||||
* [License](#license)
|
||||
|
||||
|
||||
## File Structure
|
||||
We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
|
||||
```
|
||||
angular2-webpack-starter/
|
||||
├──config/ * our configuration
|
||||
| ├──helpers.js * helper functions for our configuration files
|
||||
| ├──spec-bundle.js * ignore this magic that sets up our angular 2 testing environment
|
||||
| ├──karma.conf.js * karma config for our unit tests
|
||||
| ├──protractor.conf.js * protractor config for our end-to-end tests
|
||||
│ ├──webpack.dev.js * our development webpack config
|
||||
│ ├──webpack.prod.js * our production webpack config
|
||||
│ └──webpack.test.js * our testing webpack config
|
||||
│
|
||||
├──src/ * our source files that will be compiled to javascript
|
||||
| ├──main.browser.ts * our entry file for our browser environment
|
||||
│ │
|
||||
| ├──index.html * Index.html: where we generate our index page
|
||||
│ │
|
||||
| ├──polyfills.ts * our polyfills file
|
||||
│ │
|
||||
| ├──vendor.ts * our vendor file
|
||||
│ │
|
||||
│ ├──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
|
||||
│ │
|
||||
│ └──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
|
||||
│
|
||||
│
|
||||
├──tslint.json * typescript lint config
|
||||
├──typedoc.json * typescript documentation generator
|
||||
├──tsconfig.json * config that webpack uses for typescript
|
||||
├──typings.json * our typings manager
|
||||
└──package.json * what npm uses to manage it's dependencies
|
||||
```
|
||||
|
||||
# Getting Started
|
||||
## Dependencies
|
||||
What you need to run this app:
|
||||
* `node` and `npm` (`brew install node`)
|
||||
* Ensure you're running the latest versions Node `v4.x.x`+ (or `v5.x.x`) and NPM `3.x.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`)
|
||||
* `karma` (`npm install --global karma-cli`)
|
||||
* `protractor` (`npm install --global protractor`)
|
||||
* `typings` (`npm install --global typings`)
|
||||
* `typescript` (`npm install --global typescript`)
|
||||
|
||||
## Installing
|
||||
* `fork` this repo
|
||||
* `clone` your fork
|
||||
* `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://0.0.0.0:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`).
|
||||
|
||||
### server
|
||||
```bash
|
||||
# development
|
||||
npm run server
|
||||
# production
|
||||
npm run build:prod
|
||||
npm run server:prod
|
||||
```
|
||||
|
||||
## Other commands
|
||||
|
||||
### build files
|
||||
```bash
|
||||
# development
|
||||
npm run build:dev
|
||||
# production
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
### hot module replacement
|
||||
```bash
|
||||
npm run server:dev:hmr
|
||||
```
|
||||
|
||||
### watch and build files
|
||||
```bash
|
||||
npm run watch
|
||||
```
|
||||
|
||||
### run tests
|
||||
```bash
|
||||
npm run test
|
||||
```
|
||||
|
||||
### watch and run our tests
|
||||
```bash
|
||||
npm run watch:test
|
||||
```
|
||||
|
||||
### run end-to-end tests
|
||||
```bash
|
||||
# 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
|
||||
```
|
||||
|
||||
# Configuration
|
||||
Configuration files live in `config/` we are currently using webpack, karma, and protractor for different stages of your application
|
||||
|
||||
# Contributing
|
||||
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
|
||||
|
||||
# TypeScript
|
||||
> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
|
||||
|
||||
## Use latest TypeScript compiler
|
||||
TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
|
||||
|
||||
```
|
||||
npm install --global typescript
|
||||
```
|
||||
|
||||
## Use a TypeScript-aware editor
|
||||
We have good experience using these editors:
|
||||
|
||||
* [Visual Studio Code](https://code.visualstudio.com/)
|
||||
* [Webstorm 10](https://www.jetbrains.com/webstorm/download/)
|
||||
* [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
|
||||
* [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
|
||||
|
||||
# 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
|
||||
```
|
||||
|
||||
## 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 prototyping 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 [How to include or create custom type definitions](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-or-create-custom-type-definitions) and [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?
|
||||
* see wiki [How-do-I-async-load-a-component-with-AsyncRoute](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-do-I-async-load-a-component-with-AsyncRoute)
|
||||
* Error: Cannot find module 'tapable'
|
||||
* Remove `node_modules/` and run `npm cache clean` then `npm install`
|
||||
* What about Webpack 2?
|
||||
* If you're looking for Webpack 2 version then see the [experimental version](https://github.com/gdi2290/angular2-webpack2-starter) that will be merged soon.
|
||||
* How do I turn on Hot Module Replacement
|
||||
* Run `npm run server:dev:hmr`
|
||||
* `RangeError: Maximum call stack size exceeded`
|
||||
* This is a problem with minifying Angular 2 and it's recent JIT templates. If you set `mangle` to `false` then you should be good.
|
||||
* Why is the size of my app larger in development?
|
||||
* We are using inline source-maps and hot module replacement which will increase the bundle size.
|
||||
* If you're in China
|
||||
* check out https://github.com/cnpm/cnpm
|
||||
|
||||
# Support, Questions, or Feedback
|
||||
> Contact us anytime for anything about this repo or Angular 2
|
||||
|
||||
* [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)
|
||||
|
||||
# Quick Start Guides
|
||||
|
||||
## Nitrous
|
||||
|
||||
You can quickly create a free development environment to get started using this
|
||||
starter kit in the cloud on [Nitrous](https://www.nitrous.io/):
|
||||
|
||||
<a href="https://www.nitrous.io/quickstart?repo=https://github.com/nitrous-io/angular2-webpack-starter">
|
||||
<img src="https://nitrous-image-icons.s3.amazonaws.com/quickstart.png" alt="Nitrous Quickstart" width=142 height=34>
|
||||
</a>
|
||||
|
||||
Simply run `HOST=0.0.0.0 npm start` from the terminal inside of
|
||||
`~/code/angular2-webpack-starter` and access your site via the "Preview > 3000"
|
||||
link in the IDE.
|
||||
___
|
||||
|
||||
enjoy — **AngularClass**
|
||||
|
||||
<br><br>
|
||||
|
||||
[](https://angularclass.com)
|
||||
##[AngularClass](https://angularclass.com)
|
||||
> 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)
|
||||
69
config/helpers.js
Normal file
69
config/helpers.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
var path = require('path');
|
||||
|
||||
// Helper functions
|
||||
var _root = path.resolve(__dirname, '..');
|
||||
|
||||
console.log('root directory:', root());
|
||||
|
||||
function hasProcessFlag(flag) {
|
||||
return process.argv.join('').indexOf(flag) > -1;
|
||||
}
|
||||
|
||||
function root(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return path.join.apply(path, [_root].concat(args));
|
||||
}
|
||||
|
||||
function rootNode(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return root.apply(path, ['node_modules'].concat(args));
|
||||
}
|
||||
|
||||
function prependExt(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 packageSort(packages) {
|
||||
// packages = ['polyfills', 'vendor', 'main']
|
||||
var len = packages.length - 1;
|
||||
var first = packages[0];
|
||||
var last = packages[len];
|
||||
return function sort(a, b) {
|
||||
// polyfills always first
|
||||
if (a.names[0] === first) {
|
||||
return -1;
|
||||
}
|
||||
// main always last
|
||||
if (a.names[0] === last) {
|
||||
return 1;
|
||||
}
|
||||
// vendor before app
|
||||
if (a.names[0] !== first && b.names[0] === last) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reverse(arr) {
|
||||
return arr.reverse();
|
||||
}
|
||||
|
||||
exports.reverse = reverse;
|
||||
exports.hasProcessFlag = hasProcessFlag;
|
||||
exports.root = root;
|
||||
exports.rootNode = rootNode;
|
||||
exports.prependExt = prependExt;
|
||||
exports.prepend = prependExt;
|
||||
exports.packageSort = packageSort;
|
||||
90
config/karma.conf.js
Normal file
90
config/karma.conf.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
module.exports = function(config) {
|
||||
var testWebpackConfig = require('./webpack.test.js');
|
||||
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (e.g. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
/*
|
||||
* Frameworks to use
|
||||
*
|
||||
* available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
*/
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [ ],
|
||||
|
||||
/*
|
||||
* list of files / patterns to load in the browser
|
||||
*
|
||||
* we are building the test environment in ./spec-bundle.js
|
||||
*/
|
||||
files: [ { pattern: './config/spec-bundle.js', watched: false } ],
|
||||
|
||||
/*
|
||||
* preprocess matching files before serving them to the browser
|
||||
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
*/
|
||||
preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
|
||||
|
||||
// Webpack Config at ./webpack.test.js
|
||||
webpack: testWebpackConfig,
|
||||
|
||||
coverageReporter: {
|
||||
dir : 'coverage/',
|
||||
reporters: [
|
||||
{ type: 'text-summary' },
|
||||
{ type: 'json' },
|
||||
{ type: 'html' }
|
||||
]
|
||||
},
|
||||
|
||||
// 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: [ 'mocha', 'coverage' ],
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
/*
|
||||
* level of logging
|
||||
* possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
*/
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
// 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: [
|
||||
// 'Chrome',
|
||||
'PhantomJS'
|
||||
],
|
||||
|
||||
/*
|
||||
* Continuous Integration mode
|
||||
* if true, Karma captures browsers, runs the tests and exits
|
||||
*/
|
||||
singleRun: true
|
||||
});
|
||||
|
||||
};
|
||||
51
config/protractor.conf.js
Normal file
51
config/protractor.conf.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
require('ts-node/register');
|
||||
var helpers = require('./helpers');
|
||||
|
||||
exports.config = {
|
||||
baseUrl: 'http://localhost:3000/',
|
||||
|
||||
// use `npm run e2e`
|
||||
specs: [
|
||||
helpers.root('src/**/**.e2e.ts'),
|
||||
helpers.root('src/**/*.e2e.ts')
|
||||
],
|
||||
exclude: [],
|
||||
|
||||
framework: 'jasmine2',
|
||||
|
||||
allScriptsTimeout: 110000,
|
||||
|
||||
jasmineNodeOpts: {
|
||||
showTiming: true,
|
||||
showColors: true,
|
||||
isVerbose: false,
|
||||
includeStackTrace: false,
|
||||
defaultTimeoutInterval: 400000
|
||||
},
|
||||
directConnect: true,
|
||||
|
||||
capabilities: {
|
||||
'browserName': 'chrome',
|
||||
'chromeOptions': {
|
||||
'args': ['show-fps-counter=true']
|
||||
}
|
||||
},
|
||||
|
||||
onPrepare: function() {
|
||||
browser.ignoreSynchronization = true;
|
||||
},
|
||||
|
||||
seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.52.0.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
|
||||
};
|
||||
59
config/spec-bundle.js
Normal file
59
config/spec-bundle.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
/*
|
||||
* When testing with webpack and ES6, we have to do some extra
|
||||
* things get testing to work right. Because we are gonna write test
|
||||
* in ES6 to, we have to compile those as well. That's handled in
|
||||
* karma.conf.js with the karma-webpack plugin. This is the entry
|
||||
* file for webpack test. Just like webpack will create a bundle.js
|
||||
* file for our client, when we run test, it well compile and bundle them
|
||||
* all here! Crazy huh. So we need to do some setup
|
||||
*/
|
||||
Error.stackTraceLimit = Infinity;
|
||||
|
||||
require('core-js');
|
||||
|
||||
// Typescript emit helpers polyfill
|
||||
require('ts-helpers');
|
||||
|
||||
require('zone.js/dist/zone');
|
||||
require('zone.js/dist/long-stack-trace-zone');
|
||||
require('zone.js/dist/jasmine-patch');
|
||||
|
||||
// RxJS
|
||||
require('rxjs/Rx');
|
||||
|
||||
var testing = require('angular2/testing');
|
||||
var browser = require('angular2/platform/testing/browser');
|
||||
|
||||
testing.setBaseTestProviders(
|
||||
browser.TEST_BROWSER_PLATFORM_PROVIDERS,
|
||||
browser.TEST_BROWSER_APPLICATION_PROVIDERS
|
||||
);
|
||||
|
||||
Object.assign(global, testing);
|
||||
|
||||
/*
|
||||
* Ok, this is kinda crazy. We can use the the context method on
|
||||
* require that webpack created in order to tell webpack
|
||||
* what files we actually want to require or import.
|
||||
* Below, context will be an function/object with file names as keys.
|
||||
* using that regex we are saying look in ./src/app and ./test then find
|
||||
* any file that ends with spec.js and get its path. By passing in true
|
||||
* we say do this recursively
|
||||
*/
|
||||
var testContext = require.context('../src', true, /\.spec\.ts/);
|
||||
|
||||
/*
|
||||
* get all the files, for each file, call the context function
|
||||
* that will require the file and load it up here. Context will
|
||||
* loop and require those spec files here
|
||||
*/
|
||||
function requireAll(requireContext) {
|
||||
return requireContext.keys().map(requireContext);
|
||||
}
|
||||
|
||||
// requires and returns all modules that match
|
||||
var modules = requireAll(testContext);
|
||||
255
config/webpack.common.js
Normal file
255
config/webpack.common.js
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
const webpack = require('webpack');
|
||||
const helpers = require('./helpers');
|
||||
|
||||
/*
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
|
||||
|
||||
/*
|
||||
* Webpack Constants
|
||||
*/
|
||||
const METADATA = {
|
||||
title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
|
||||
baseUrl: '/'
|
||||
};
|
||||
|
||||
/*
|
||||
* Webpack configuration
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cli
|
||||
*/
|
||||
module.exports = {
|
||||
|
||||
/*
|
||||
* Static metadata for index.html
|
||||
*
|
||||
* See: (custom attribute)
|
||||
*/
|
||||
metadata: METADATA,
|
||||
|
||||
/*
|
||||
* Cache generated modules and chunks to improve performance for multiple incremental builds.
|
||||
* This is enabled by default in watch mode.
|
||||
* You can pass false to disable it.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cache
|
||||
* cache: false,
|
||||
*
|
||||
* The entry point for the bundle
|
||||
* Our Angular.js app
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#entry
|
||||
*/
|
||||
entry: {
|
||||
|
||||
'polyfills': './src/polyfills.ts',
|
||||
'vendor': './src/vendor.ts',
|
||||
'main': './src/main.browser.ts'
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Options affecting the resolving of modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve
|
||||
*/
|
||||
resolve: {
|
||||
|
||||
/*
|
||||
* An array of extensions that should be used to resolve modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
|
||||
*/
|
||||
extensions: ['', '.ts', '.js'],
|
||||
|
||||
// Make sure root is src
|
||||
root: helpers.root('src'),
|
||||
|
||||
// remove other default values
|
||||
modulesDirectories: ['node_modules']
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Options affecting the normal modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module
|
||||
*/
|
||||
module: {
|
||||
|
||||
/*
|
||||
* An array of applied pre and post loaders.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
|
||||
*/
|
||||
preLoaders: [
|
||||
|
||||
/*
|
||||
* Tslint loader support for *.ts files
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
|
||||
|
||||
/*
|
||||
* Source map loader support for *.js files
|
||||
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
|
||||
*
|
||||
* See: https://github.com/webpack/source-map-loader
|
||||
*/
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'source-map-loader',
|
||||
exclude: [
|
||||
// these packages have problems with their sourcemaps
|
||||
helpers.root('node_modules/rxjs'),
|
||||
helpers.root('node_modules/@angular2-material')
|
||||
]
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
/*
|
||||
* An array of automatically applied loaders.
|
||||
*
|
||||
* IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
|
||||
* This means they are not resolved relative to the configuration file.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-loaders
|
||||
*/
|
||||
loaders: [
|
||||
|
||||
/*
|
||||
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader
|
||||
*/
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: 'awesome-typescript-loader',
|
||||
exclude: [/\.(spec|e2e)\.ts$/]
|
||||
},
|
||||
|
||||
/*
|
||||
* Json loader support for *.json files.
|
||||
*
|
||||
* See: https://github.com/webpack/json-loader
|
||||
*/
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
|
||||
/*
|
||||
* Raw loader support for *.css files
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'raw-loader'
|
||||
},
|
||||
|
||||
/* Raw loader support for *.html
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'raw-loader',
|
||||
exclude: [helpers.root('src/index.html')]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Add additional plugins to the compiler.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#plugins
|
||||
*/
|
||||
plugins: [
|
||||
|
||||
/*
|
||||
* Plugin: ForkCheckerPlugin
|
||||
* Description: Do type checking in a separate process, so webpack don't need to wait.
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
|
||||
*/
|
||||
new ForkCheckerPlugin(),
|
||||
|
||||
/*
|
||||
* Plugin: OccurenceOrderPlugin
|
||||
* Description: Varies the distribution of the ids to get the smallest id length
|
||||
* for often used ids.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
|
||||
* See: https://github.com/webpack/docs/wiki/optimization#minimize
|
||||
*/
|
||||
new webpack.optimize.OccurenceOrderPlugin(true),
|
||||
|
||||
/*
|
||||
* Plugin: CommonsChunkPlugin
|
||||
* Description: Shares common code between the pages.
|
||||
* It identifies common modules and put them into a commons chunk.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
|
||||
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
|
||||
*/
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: helpers.reverse(['polyfills', 'vendor'])
|
||||
}),
|
||||
|
||||
/*
|
||||
* Plugin: CopyWebpackPlugin
|
||||
* Description: Copy files and directories in webpack.
|
||||
*
|
||||
* Copies project static assets.
|
||||
*
|
||||
* See: https://www.npmjs.com/package/copy-webpack-plugin
|
||||
*/
|
||||
new CopyWebpackPlugin([{
|
||||
from: 'src/assets',
|
||||
to: 'assets'
|
||||
}]),
|
||||
|
||||
/*
|
||||
* Plugin: HtmlWebpackPlugin
|
||||
* Description: Simplifies creation of HTML files to serve your webpack bundles.
|
||||
* This is especially useful for webpack bundles that include a hash in the filename
|
||||
* which changes every compilation.
|
||||
*
|
||||
* See: https://github.com/ampedandwired/html-webpack-plugin
|
||||
*/
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
|
||||
})
|
||||
|
||||
],
|
||||
|
||||
/*
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: 'window',
|
||||
crypto: 'empty',
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
};
|
||||
162
config/webpack.dev.js
Normal file
162
config/webpack.dev.js
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
const helpers = require('./helpers');
|
||||
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
|
||||
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
|
||||
|
||||
/**
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
|
||||
const HMR = helpers.hasProcessFlag('hot');
|
||||
const METADATA = webpackMerge(commonConfig.metadata, {
|
||||
host: 'localhost',
|
||||
port: 3000,
|
||||
ENV: ENV,
|
||||
HMR: HMR
|
||||
});
|
||||
|
||||
/**
|
||||
* Webpack configuration
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cli
|
||||
*/
|
||||
module.exports = webpackMerge(commonConfig, {
|
||||
|
||||
/**
|
||||
* Merged metadata from webpack.common.js for index.html
|
||||
*
|
||||
* See: (custom attribute)
|
||||
*/
|
||||
metadata: METADATA,
|
||||
|
||||
/**
|
||||
* Switch loaders to debug mode.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#debug
|
||||
*/
|
||||
debug: true,
|
||||
|
||||
/**
|
||||
* Developer tool to enhance debugging
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#devtool
|
||||
* See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
|
||||
*/
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
|
||||
/**
|
||||
* Options affecting the output of the compilation.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output
|
||||
*/
|
||||
output: {
|
||||
|
||||
/**
|
||||
* The output directory as absolute path (required).
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-path
|
||||
*/
|
||||
path: helpers.root('dist'),
|
||||
|
||||
/**
|
||||
* Specifies the name of each output file on disk.
|
||||
* IMPORTANT: You must not specify an absolute path here!
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-filename
|
||||
*/
|
||||
filename: '[name].bundle.js',
|
||||
|
||||
/**
|
||||
* The filename of the SourceMaps for the JavaScript files.
|
||||
* They are inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
|
||||
*/
|
||||
sourceMapFilename: '[name].map',
|
||||
|
||||
/** The filename of non-entry chunks as relative path
|
||||
* inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
|
||||
*/
|
||||
chunkFilename: '[id].chunk.js'
|
||||
|
||||
},
|
||||
|
||||
plugins: [
|
||||
|
||||
/**
|
||||
* Plugin: DefinePlugin
|
||||
* Description: Define free variables.
|
||||
* Useful for having development builds with debug logging or adding global constants.
|
||||
*
|
||||
* Environment helpers
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
*/
|
||||
// NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
|
||||
new DefinePlugin({
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'NODE_ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
}
|
||||
})
|
||||
],
|
||||
|
||||
/**
|
||||
* Static analysis linter for TypeScript advanced options configuration
|
||||
* Description: An extensible linter for the TypeScript language.
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
tslint: {
|
||||
emitErrors: false,
|
||||
failOnHint: false,
|
||||
resourcePath: 'src'
|
||||
},
|
||||
|
||||
/**
|
||||
* Webpack Development Server configuration
|
||||
* Description: The webpack-dev-server is a little node.js Express server.
|
||||
* The server emits information about the compilation state to the client,
|
||||
* which reacts to those events.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/webpack-dev-server.html
|
||||
*/
|
||||
devServer: {
|
||||
port: METADATA.port,
|
||||
host: METADATA.host,
|
||||
historyApiFallback: true,
|
||||
watchOptions: {
|
||||
aggregateTimeout: 300,
|
||||
poll: 1000
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: 'window',
|
||||
crypto: 'empty',
|
||||
process: true,
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
});
|
||||
230
config/webpack.prod.js
Normal file
230
config/webpack.prod.js
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
const helpers = require('./helpers');
|
||||
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
|
||||
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
|
||||
|
||||
/**
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
|
||||
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
|
||||
const CompressionPlugin = require('compression-webpack-plugin');
|
||||
const WebpackMd5Hash = require('webpack-md5-hash');
|
||||
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
|
||||
const HOST = process.env.HOST || 'localhost';
|
||||
const PORT = process.env.PORT || 8080;
|
||||
const METADATA = webpackMerge(commonConfig.metadata, {
|
||||
host: HOST,
|
||||
port: PORT,
|
||||
ENV: ENV,
|
||||
HMR: false
|
||||
});
|
||||
|
||||
module.exports = webpackMerge(commonConfig, {
|
||||
|
||||
/**
|
||||
* Switch loaders to debug mode.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#debug
|
||||
*/
|
||||
debug: false,
|
||||
|
||||
/**
|
||||
* Developer tool to enhance debugging
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#devtool
|
||||
* See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
|
||||
*/
|
||||
devtool: 'source-map',
|
||||
|
||||
/**
|
||||
* Options affecting the output of the compilation.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output
|
||||
*/
|
||||
output: {
|
||||
|
||||
/**
|
||||
* The output directory as absolute path (required).
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-path
|
||||
*/
|
||||
path: helpers.root('dist'),
|
||||
|
||||
/**
|
||||
* Specifies the name of each output file on disk.
|
||||
* IMPORTANT: You must not specify an absolute path here!
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-filename
|
||||
*/
|
||||
filename: '[name].[chunkhash].bundle.js',
|
||||
|
||||
/**
|
||||
* The filename of the SourceMaps for the JavaScript files.
|
||||
* They are inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
|
||||
*/
|
||||
sourceMapFilename: '[name].[chunkhash].bundle.map',
|
||||
|
||||
/**
|
||||
* The filename of non-entry chunks as relative path
|
||||
* inside the output.path directory.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
|
||||
*/
|
||||
chunkFilename: '[id].[chunkhash].chunk.js'
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Add additional plugins to the compiler.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#plugins
|
||||
*/
|
||||
plugins: [
|
||||
|
||||
/**
|
||||
* Plugin: WebpackMd5Hash
|
||||
* Description: Plugin to replace a standard webpack chunkhash with md5.
|
||||
*
|
||||
* See: https://www.npmjs.com/package/webpack-md5-hash
|
||||
*/
|
||||
new WebpackMd5Hash(),
|
||||
|
||||
/**
|
||||
* Plugin: DedupePlugin
|
||||
* Description: Prevents the inclusion of duplicate code into your bundle
|
||||
* and instead applies a copy of the function at runtime.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
* See: https://github.com/webpack/docs/wiki/optimization#deduplication
|
||||
*/
|
||||
new DedupePlugin(),
|
||||
|
||||
/**
|
||||
* Plugin: DefinePlugin
|
||||
* Description: Define free variables.
|
||||
* Useful for having development builds with debug logging or adding global constants.
|
||||
*
|
||||
* Environment helpers
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
*/
|
||||
// NOTE: when adding more properties make sure you include them in custom-typings.d.ts
|
||||
new DefinePlugin({
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(METADATA.ENV),
|
||||
'NODE_ENV': JSON.stringify(METADATA.ENV),
|
||||
'HMR': METADATA.HMR,
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin: UglifyJsPlugin
|
||||
* Description: Minimize all JavaScript output of chunks.
|
||||
* Loaders are switched into minimizing mode.
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
|
||||
*/
|
||||
// NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
|
||||
new UglifyJsPlugin({
|
||||
// beautify: true, //debug
|
||||
// mangle: false, //debug
|
||||
// dead_code: false, //debug
|
||||
// unused: false, //debug
|
||||
// deadCode: false, //debug
|
||||
// compress: {
|
||||
// screw_ie8: true,
|
||||
// keep_fnames: true,
|
||||
// drop_debugger: false,
|
||||
// dead_code: false,
|
||||
// unused: false
|
||||
// }, // debug
|
||||
// comments: true, //debug
|
||||
|
||||
beautify: false, //prod
|
||||
|
||||
mangle: {
|
||||
screw_ie8 : true,
|
||||
keep_fnames: true
|
||||
}, //prod
|
||||
|
||||
compress: {
|
||||
screw_ie8: true
|
||||
}, //prod
|
||||
|
||||
comments: false //prod
|
||||
}),
|
||||
|
||||
/**
|
||||
* Plugin: CompressionPlugin
|
||||
* Description: Prepares compressed versions of assets to serve
|
||||
* them with Content-Encoding
|
||||
*
|
||||
* See: https://github.com/webpack/compression-webpack-plugin
|
||||
*/
|
||||
new CompressionPlugin({
|
||||
regExp: /\.css$|\.html$|\.js$|\.map$/,
|
||||
threshold: 2 * 1024
|
||||
})
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
* Static analysis linter for TypeScript advanced options configuration
|
||||
* Description: An extensible linter for the TypeScript language.
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
tslint: {
|
||||
emitErrors: true,
|
||||
failOnHint: true,
|
||||
resourcePath: 'src'
|
||||
},
|
||||
|
||||
/**
|
||||
* Html loader advanced options
|
||||
*
|
||||
* See: https://github.com/webpack/html-loader#advanced-options
|
||||
*/
|
||||
// TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
|
||||
htmlLoader: {
|
||||
minimize: true,
|
||||
removeAttributeQuotes: false,
|
||||
caseSensitive: true,
|
||||
customAttrSurround: [
|
||||
[/#/, /(?:)/],
|
||||
[/\*/, /(?:)/],
|
||||
[/\[?\(?/, /(?:)/]
|
||||
],
|
||||
customAttrAssign: [/\)?\]?=/]
|
||||
},
|
||||
|
||||
/*
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: 'window',
|
||||
crypto: 'empty',
|
||||
process: false,
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
});
|
||||
233
config/webpack.test.js
Normal file
233
config/webpack.test.js
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
const helpers = require('./helpers');
|
||||
|
||||
/**
|
||||
* Webpack Plugins
|
||||
*/
|
||||
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
|
||||
const DefinePlugin = require('webpack/lib/DefinePlugin');
|
||||
|
||||
/**
|
||||
* Webpack Constants
|
||||
*/
|
||||
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
|
||||
|
||||
/**
|
||||
* Webpack configuration
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#cli
|
||||
*/
|
||||
module.exports = {
|
||||
|
||||
/**
|
||||
* Source map for Karma from the help of karma-sourcemap-loader & karma-webpack
|
||||
*
|
||||
* Do not change, leave as is or it wont work.
|
||||
* See: https://github.com/webpack/karma-webpack#source-maps
|
||||
*/
|
||||
devtool: 'inline-source-map',
|
||||
|
||||
/**
|
||||
* Options affecting the resolving of modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve
|
||||
*/
|
||||
resolve: {
|
||||
|
||||
/**
|
||||
* An array of extensions that should be used to resolve modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
|
||||
*/
|
||||
extensions: ['', '.ts', '.js'],
|
||||
|
||||
/**
|
||||
* Make sure root is src
|
||||
*/
|
||||
root: helpers.root('src'),
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Options affecting the normal modules.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module
|
||||
*/
|
||||
module: {
|
||||
|
||||
/**
|
||||
* An array of applied pre and post loaders.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
|
||||
*/
|
||||
preLoaders: [
|
||||
|
||||
/**
|
||||
* Tslint loader support for *.ts files
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: 'tslint-loader',
|
||||
exclude: [helpers.root('node_modules')]
|
||||
},
|
||||
|
||||
/**
|
||||
* Source map loader support for *.js files
|
||||
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
|
||||
*
|
||||
* See: https://github.com/webpack/source-map-loader
|
||||
*/
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'source-map-loader',
|
||||
exclude: [
|
||||
// these packages have problems with their sourcemaps
|
||||
helpers.root('node_modules/rxjs'),
|
||||
helpers.root('node_modules/@angular2-material')
|
||||
]}
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
* An array of automatically applied loaders.
|
||||
*
|
||||
* IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
|
||||
* This means they are not resolved relative to the configuration file.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-loaders
|
||||
*/
|
||||
loaders: [
|
||||
|
||||
/**
|
||||
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
|
||||
*
|
||||
* See: https://github.com/s-panferov/awesome-typescript-loader
|
||||
*/
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: 'awesome-typescript-loader',
|
||||
query: {
|
||||
compilerOptions: {
|
||||
|
||||
// Remove TypeScript helpers to be injected
|
||||
// below by DefinePlugin
|
||||
removeComments: true
|
||||
|
||||
}
|
||||
},
|
||||
exclude: [/\.e2e\.ts$/]
|
||||
},
|
||||
|
||||
/**
|
||||
* Json loader support for *.json files.
|
||||
*
|
||||
* See: https://github.com/webpack/json-loader
|
||||
*/
|
||||
{ test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] },
|
||||
|
||||
/**
|
||||
* Raw loader support for *.css files
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{ test: /\.css$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
|
||||
|
||||
/**
|
||||
* Raw loader support for *.html
|
||||
* Returns file content as string
|
||||
*
|
||||
* See: https://github.com/webpack/raw-loader
|
||||
*/
|
||||
{ test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
* An array of applied pre and post loaders.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
|
||||
*/
|
||||
postLoaders: [
|
||||
|
||||
/**
|
||||
* Instruments JS files with Istanbul for subsequent code coverage reporting.
|
||||
* Instrument only testing sources.
|
||||
*
|
||||
* See: https://github.com/deepsweet/istanbul-instrumenter-loader
|
||||
*/
|
||||
{
|
||||
test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
|
||||
include: helpers.root('src'),
|
||||
exclude: [
|
||||
/\.(e2e|spec)\.ts$/,
|
||||
/node_modules/
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* Add additional plugins to the compiler.
|
||||
*
|
||||
* See: http://webpack.github.io/docs/configuration.html#plugins
|
||||
*/
|
||||
plugins: [
|
||||
|
||||
/**
|
||||
* Plugin: DefinePlugin
|
||||
* Description: Define free variables.
|
||||
* Useful for having development builds with debug logging or adding global constants.
|
||||
*
|
||||
* Environment helpers
|
||||
*
|
||||
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||
*/
|
||||
// NOTE: when adding more properties make sure you include them in custom-typings.d.ts
|
||||
new DefinePlugin({
|
||||
'ENV': JSON.stringify(ENV),
|
||||
'HMR': false,
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(ENV),
|
||||
'NODE_ENV': JSON.stringify(ENV),
|
||||
'HMR': false,
|
||||
}
|
||||
}),
|
||||
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
* Static analysis linter for TypeScript advanced options configuration
|
||||
* Description: An extensible linter for the TypeScript language.
|
||||
*
|
||||
* See: https://github.com/wbuchwalter/tslint-loader
|
||||
*/
|
||||
tslint: {
|
||||
emitErrors: false,
|
||||
failOnHint: false,
|
||||
resourcePath: 'src'
|
||||
},
|
||||
|
||||
/**
|
||||
* Include polyfills or mocks for various node stuff
|
||||
* Description: Node configuration
|
||||
*
|
||||
* See: https://webpack.github.io/docs/configuration.html#node
|
||||
*/
|
||||
node: {
|
||||
global: 'window',
|
||||
process: false,
|
||||
crypto: 'empty',
|
||||
module: false,
|
||||
clearImmediate: false,
|
||||
setImmediate: false
|
||||
}
|
||||
|
||||
};
|
||||
6
karma.conf.js
Normal file
6
karma.conf.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
// Look in ./config for karma.conf.js
|
||||
module.exports = require('./config/karma.conf.js');
|
||||
144
package.json
Normal file
144
package.json
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
{
|
||||
"name": "angular2-webpack-starter",
|
||||
"version": "5.0.4",
|
||||
"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": {
|
||||
"rimraf": "rimraf",
|
||||
"tslint": "tslint",
|
||||
"typedoc": "typedoc",
|
||||
"typings": "typings",
|
||||
"webpack": "webpack",
|
||||
"webpack-dev-server": "webpack-dev-server",
|
||||
"webdriver-manager": "webdriver-manager",
|
||||
"protractor": "protractor",
|
||||
|
||||
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
|
||||
"clean:dist": "npm run 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": "npm run build:dev -- --watch",
|
||||
"watch:dev:hmr": "npm run watch:dev -- --hot",
|
||||
"watch:test": "npm run test -- --auto-watch --no-single-run",
|
||||
"watch:prod": "npm run build:prod -- --watch",
|
||||
|
||||
"build": "npm run build:dev",
|
||||
"prebuild:dev": "npm run clean:dist",
|
||||
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
|
||||
"prebuild:prod": "npm run clean:dist",
|
||||
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
|
||||
|
||||
"server": "npm run server:dev",
|
||||
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
|
||||
"server:dev:hmr": "npm run server:dev -- --hot",
|
||||
"server:prod": "http-server dist --cors",
|
||||
|
||||
"webdriver:update": "npm run webdriver-manager update",
|
||||
"webdriver:start": "npm run webdriver-manager start",
|
||||
|
||||
"lint": "npm run tslint 'src/**/*.ts'",
|
||||
|
||||
"pree2e": "npm run webdriver:update -- --standalone",
|
||||
"e2e": "npm run protractor",
|
||||
"e2e:live": "npm run e2e -- --elementExplorer",
|
||||
|
||||
"test": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
|
||||
|
||||
"ci": "npm run e2e && npm run test",
|
||||
|
||||
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
|
||||
|
||||
"start": "npm run server:dev",
|
||||
"start:hmr": "npm run server:dev:hmr",
|
||||
|
||||
"postinstall": "npm run typings -- install",
|
||||
|
||||
"preversion": "npm test",
|
||||
"version": "npm run build",
|
||||
"postversion": "git push && git push --tags"
|
||||
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular2-material/button": "2.0.0-alpha.2",
|
||||
"@angular2-material/card": "2.0.0-alpha.2",
|
||||
"@angular2-material/checkbox": "2.0.0-alpha.2",
|
||||
"@angular2-material/core": "2.0.0-alpha.2",
|
||||
"@angular2-material/input": "2.0.0-alpha.2",
|
||||
"@angular2-material/list": "2.0.0-alpha.2",
|
||||
"@angular2-material/progress-circle": "2.0.0-alpha.2",
|
||||
"@angular2-material/radio": "2.0.0-alpha.2",
|
||||
"@angular2-material/sidenav": "2.0.0-alpha.2",
|
||||
"@angular2-material/toolbar": "2.0.0-alpha.2",
|
||||
"angular2": "2.0.0-beta.15",
|
||||
"core-js": "^2.2.2",
|
||||
"normalize.css": "^4.1.1",
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"zone.js": "~0.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"angular2-hmr": "~0.5.5",
|
||||
"awesome-typescript-loader": "~0.16.2",
|
||||
"codelyzer": "0.0.12",
|
||||
"compression-webpack-plugin": "^0.3.1",
|
||||
"copy-webpack-plugin": "^1.1.1",
|
||||
"css-loader": "^0.23.1",
|
||||
"es6-promise": "^3.1.2",
|
||||
"es6-promise-loader": "^1.0.1",
|
||||
"es6-shim": "^0.35.0",
|
||||
"es7-reflect-metadata": "^1.6.0",
|
||||
"exports-loader": "^0.6.3",
|
||||
"expose-loader": "^0.7.1",
|
||||
"file-loader": "^0.8.5",
|
||||
"html-webpack-plugin": "^2.15.0",
|
||||
"http-server": "^0.9.0",
|
||||
"imports-loader": "^0.6.5",
|
||||
"istanbul-instrumenter-loader": "^0.2.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"karma": "^0.13.22",
|
||||
"karma-chrome-launcher": "^0.2.3",
|
||||
"karma-coverage": "^0.5.5",
|
||||
"karma-jasmine": "^0.3.8",
|
||||
"karma-mocha-reporter": "^2.0.0",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-webpack": "1.7.0",
|
||||
"parse5": "^2.1.5",
|
||||
"phantomjs-polyfill": "0.0.2",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"protractor": "^3.2.2",
|
||||
"raw-loader": "0.5.1",
|
||||
"remap-istanbul": "^0.5.1",
|
||||
"rimraf": "^2.5.2",
|
||||
"source-map-loader": "^0.1.5",
|
||||
"style-loader": "^0.13.1",
|
||||
"ts-helpers": "1.1.0",
|
||||
"ts-node": "^0.7.1",
|
||||
"tslint": "^3.7.1",
|
||||
"tslint-loader": "^2.1.3",
|
||||
"typedoc": "^0.3.12",
|
||||
"typescript": "~1.8.9",
|
||||
"typings": "^0.7.12",
|
||||
"url-loader": "^0.5.7",
|
||||
"webpack": "^1.12.14",
|
||||
"webpack-dev-server": "^1.14.1",
|
||||
"webpack-md5-hash": "^0.0.5",
|
||||
"webpack-merge": "^0.8.4"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.2.1",
|
||||
"npm": ">= 3"
|
||||
}
|
||||
}
|
||||
6
protractor.conf.js
Normal file
6
protractor.conf.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
// look in ./config for protractor.conf.js
|
||||
exports.config = require('./config/protractor.conf.js').config;
|
||||
55
src/app/about/about.component.ts
Normal file
55
src/app/about/about.component.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import {Component} from 'angular2/core';
|
||||
|
||||
/*
|
||||
* We're loading this component asynchronously
|
||||
* We are using some magic with es6-promise-loader that will wrap the module with a Promise
|
||||
* see https://github.com/gdi2290/es6-promise-loader for more info
|
||||
*/
|
||||
|
||||
console.log('`About` component loaded asynchronously');
|
||||
|
||||
@Component({
|
||||
selector: 'about',
|
||||
styles: [`
|
||||
h1 {
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
}
|
||||
`],
|
||||
template: `
|
||||
<md-card>
|
||||
<h1>
|
||||
patrick@AngularClass.com
|
||||
</h1>
|
||||
</md-card>
|
||||
|
||||
`
|
||||
})
|
||||
export class About {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('hello `About` component');
|
||||
// static data that is bundled
|
||||
// var mockData = require('assets/mock-data/mock-data.json');
|
||||
// console.log('mockData', mockData);
|
||||
// if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
|
||||
// this.asyncDataWithWebpack();
|
||||
}
|
||||
asyncDataWithWebpack() {
|
||||
// you can also async load mock data with 'es6-promise-loader'
|
||||
// you would do this if you don't want the mock-data bundled
|
||||
// remember that 'es6-promise-loader' is a promise
|
||||
// var asyncMockDataPromiseFactory = require('es6-promise!assets/mock-data/mock-data.json');
|
||||
// setTimeout(() => {
|
||||
//
|
||||
// let asyncDataPromise = asyncMockDataPromiseFactory();
|
||||
// asyncDataPromise.then(json => {
|
||||
// console.log('async mockData', json);
|
||||
// });
|
||||
//
|
||||
// });
|
||||
}
|
||||
|
||||
}
|
||||
29
src/app/about/about.spec.ts
Normal file
29
src/app/about/about.spec.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import {
|
||||
it,
|
||||
inject,
|
||||
injectAsync,
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
|
||||
import {Component, provide} from 'angular2/core';
|
||||
|
||||
// Load the implementations that should be tested
|
||||
import {About} from './about.component';
|
||||
|
||||
describe('About', () => {
|
||||
// provide our implementations or mocks to the dependency injector
|
||||
beforeEachProviders(() => [
|
||||
About
|
||||
]);
|
||||
|
||||
it('should log ngOnInit', inject([ About ], (about) => {
|
||||
spyOn(console, 'log');
|
||||
expect(console.log).not.toHaveBeenCalled();
|
||||
|
||||
about.ngOnInit();
|
||||
expect(console.log).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
});
|
||||
1
src/app/about/index.ts
Normal file
1
src/app/about/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './about.component';
|
||||
99
src/app/app.component.ts
Normal file
99
src/app/app.component.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* Angular 2 decorators and services
|
||||
*/
|
||||
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||
import {RouteConfig, Router} from 'angular2/router';
|
||||
|
||||
import {Home} from './home';
|
||||
import {AppState} from './app.service';
|
||||
import {RouterActive} from './router-active';
|
||||
|
||||
/*
|
||||
* App Component
|
||||
* Top Level Component
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app',
|
||||
pipes: [ ],
|
||||
providers: [ ],
|
||||
directives: [ RouterActive ],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [
|
||||
require('normalize.css'),
|
||||
`
|
||||
md-toolbar ul {
|
||||
display: inline;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
}
|
||||
md-toolbar li {
|
||||
display: inline;
|
||||
}
|
||||
md-toolbar li.active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
`],
|
||||
template: `
|
||||
<header>
|
||||
<md-toolbar color="primary">
|
||||
<span>{{ name }}</span>
|
||||
<nav>
|
||||
<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>
|
||||
</md-toolbar>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
||||
<pre>this.appState.state = {{ appState.state | json }}</pre>
|
||||
|
||||
<footer>
|
||||
WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a>
|
||||
<div>
|
||||
<img [src]="angularclassLogo" width="10%">
|
||||
</div>
|
||||
</footer>
|
||||
`
|
||||
})
|
||||
@RouteConfig([
|
||||
{ path: '/', name: 'Index', component: Home, useAsDefault: true },
|
||||
{ path: '/home', name: 'Home', component: Home },
|
||||
// Async load a component using Webpack's require with es6-promise-loader and webpack `require`
|
||||
{ path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') }
|
||||
])
|
||||
export class App {
|
||||
angularclassLogo = 'assets/img/angularclass-avatar.png';
|
||||
name = 'Angular 2 Webpack Starter';
|
||||
url = 'https://twitter.com/AngularClass';
|
||||
|
||||
constructor(public appState: AppState) {}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('Initial App State', this.appState.state);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* 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
|
||||
*/
|
||||
32
src/app/app.e2e.ts
Normal file
32
src/app/app.e2e.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
describe('App', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
browser.get('/');
|
||||
});
|
||||
|
||||
|
||||
it('should have a title', () => {
|
||||
let subject = browser.getTitle();
|
||||
let result = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
it('should have <header>', () => {
|
||||
let subject = element(by.css('app header')).isPresent();
|
||||
let result = true;
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
it('should have <main>', () => {
|
||||
let subject = element(by.css('app main')).isPresent();
|
||||
let result = true;
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
it('should have <footer>', () => {
|
||||
let subject = element(by.css('app footer')).getText();
|
||||
let result = 'WebPack Angular 2 Starter by @AngularClass';
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
});
|
||||
39
src/app/app.service.ts
Normal file
39
src/app/app.service.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import {Injectable} from 'angular2/core';
|
||||
import {HmrState} from 'angular2-hmr';
|
||||
|
||||
@Injectable()
|
||||
export class AppState {
|
||||
// HmrState uis used by HMR to track the any state during reloading
|
||||
@HmrState() _state = {};
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
// already return a clone of the current state
|
||||
get state() {
|
||||
return this._state = this._clone(this._state);
|
||||
}
|
||||
// never allow mutation
|
||||
set state(value) {
|
||||
throw new Error('do not mutate the `.state` directly');
|
||||
}
|
||||
|
||||
|
||||
get(prop?: any) {
|
||||
// use our state getter for the clone
|
||||
const state = this.state;
|
||||
return state[prop] || state;
|
||||
}
|
||||
|
||||
set(prop: string, value: any) {
|
||||
// internally mutate our state
|
||||
return this._state[prop] = value;
|
||||
}
|
||||
|
||||
|
||||
_clone(object) {
|
||||
// simple object clone
|
||||
return JSON.parse(JSON.stringify( object ));
|
||||
}
|
||||
}
|
||||
24
src/app/app.spec.ts
Normal file
24
src/app/app.spec.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import {
|
||||
it,
|
||||
inject,
|
||||
injectAsync,
|
||||
beforeEachProviders,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
|
||||
// Load the implementations that should be tested
|
||||
import {App} from './app.component';
|
||||
import {AppState} from './app.service';
|
||||
|
||||
describe('App', () => {
|
||||
// provide our implementations or mocks to the dependency injector
|
||||
beforeEachProviders(() => [
|
||||
AppState,
|
||||
App
|
||||
]);
|
||||
|
||||
it('should have a url', inject([ App ], (app) => {
|
||||
expect(app.url).toEqual('https://twitter.com/AngularClass');
|
||||
}));
|
||||
|
||||
});
|
||||
46
src/app/home/home.component.ts
Normal file
46
src/app/home/home.component.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import {Component} from 'angular2/core';
|
||||
import {AppState} from '../app.service';
|
||||
|
||||
import {Title} from './title';
|
||||
import {XLarge} from './x-large';
|
||||
|
||||
@Component({
|
||||
// The selector is what angular internally uses
|
||||
// for `document.querySelectorAll(selector)` in our index.html
|
||||
// where, in this case, selector is the string 'home'
|
||||
selector: 'home', // <home></home>
|
||||
// We need to tell Angular's Dependency Injection which providers are in our app.
|
||||
providers: [
|
||||
Title
|
||||
],
|
||||
// We need to tell Angular's compiler which directives are in our template.
|
||||
// Doing so will allow Angular to attach our behavior to an element
|
||||
directives: [
|
||||
XLarge
|
||||
],
|
||||
// We need to tell Angular's compiler which custom pipes are in our template.
|
||||
pipes: [ ],
|
||||
// Our list of styles in our component. We may add more to compose many styles together
|
||||
styles: [ require('./home.css') ],
|
||||
// Every Angular template is first compiled by the browser before Angular runs it's compiler
|
||||
template: require('./home.html')
|
||||
})
|
||||
export class Home {
|
||||
// Set our default values
|
||||
localState = { value: '' };
|
||||
// TypeScript public modifiers
|
||||
constructor(public appState: AppState, public title: Title) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('hello `Home` component');
|
||||
// this.title.getData().subscribe(data => this.data = data);
|
||||
}
|
||||
|
||||
submitState(value) {
|
||||
console.log('submitState', value);
|
||||
this.appState.set('value', value);
|
||||
}
|
||||
|
||||
}
|
||||
0
src/app/home/home.css
Normal file
0
src/app/home/home.css
Normal file
22
src/app/home/home.e2e.ts
Normal file
22
src/app/home/home.e2e.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
describe('App', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
// change hash depending on router LocationStrategy
|
||||
browser.get('/#/home');
|
||||
});
|
||||
|
||||
|
||||
it('should have a title', () => {
|
||||
let subject = browser.getTitle();
|
||||
let result = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
it('should have `your content here` x-large', () => {
|
||||
let subject = element(by.css('[x-large]')).getText();
|
||||
let result = 'Your Content Here';
|
||||
expect(subject).toEqual(result);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
31
src/app/home/home.html
Normal file
31
src/app/home/home.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<md-card>
|
||||
<md-card-content>
|
||||
<span x-large>Your Content Here</span>
|
||||
|
||||
<form (ngSubmit)="submitState(localState.value)" autocomplete="off">
|
||||
|
||||
<md-input
|
||||
placeholder="Submit Local State to App State"
|
||||
[value]="localState.value"
|
||||
(input)="localState.value = $event.target.value"
|
||||
autofocus>
|
||||
</md-input>
|
||||
|
||||
<button md-raised-button color="primary">Submit Value</button>
|
||||
</form>
|
||||
<!--
|
||||
<input type="text" [value]="localState.value" (input)="localState.value = $event.target.value" autofocus>
|
||||
Rather than wiring up two-way data-binding ourselves with [value] and (input)
|
||||
we can use Angular's [(ngModel)] syntax
|
||||
<input type="text" [(ngModel)]="localState.value" autofocus>
|
||||
-->
|
||||
<md-card>
|
||||
For hot module reloading run
|
||||
<pre>npm run start:hmr</pre>
|
||||
</md-card>
|
||||
|
||||
<hr>
|
||||
<pre>this.localState = {{ localState | json }}</pre>
|
||||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
52
src/app/home/home.spec.ts
Normal file
52
src/app/home/home.spec.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import {
|
||||
it,
|
||||
inject,
|
||||
injectAsync,
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {BaseRequestOptions, Http} from 'angular2/http';
|
||||
import {MockBackend} from 'angular2/http/testing';
|
||||
|
||||
// Load the implementations that should be tested
|
||||
import {Home} from './home.component';
|
||||
import {Title} from './title';
|
||||
import {AppState} from '../app.service';
|
||||
|
||||
describe('Home', () => {
|
||||
// provide our implementations or mocks to the dependency injector
|
||||
beforeEachProviders(() => [
|
||||
BaseRequestOptions,
|
||||
MockBackend,
|
||||
provide(Http, {
|
||||
useFactory: function(backend, defaultOptions) {
|
||||
return new Http(backend, defaultOptions);
|
||||
},
|
||||
deps: [MockBackend, BaseRequestOptions]
|
||||
}),
|
||||
|
||||
AppState,
|
||||
Title,
|
||||
Home
|
||||
]);
|
||||
|
||||
it('should have default data', inject([ Home ], (home) => {
|
||||
expect(home.localState).toEqual({ value: '' });
|
||||
}));
|
||||
|
||||
it('should have a title', inject([ Home ], (home) => {
|
||||
expect(!!home.title).toEqual(true);
|
||||
}));
|
||||
|
||||
it('should log ngOnInit', inject([ Home ], (home) => {
|
||||
spyOn(console, 'log');
|
||||
expect(console.log).not.toHaveBeenCalled();
|
||||
|
||||
home.ngOnInit();
|
||||
expect(console.log).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
});
|
||||
1
src/app/home/index.ts
Normal file
1
src/app/home/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './home.component';
|
||||
1
src/app/home/title/index.ts
Normal file
1
src/app/home/title/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './title.service';
|
||||
20
src/app/home/title/title.service.ts
Normal file
20
src/app/home/title/title.service.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import {Injectable} from 'angular2/core';
|
||||
import {Http} from 'angular2/http';
|
||||
|
||||
@Injectable()
|
||||
export class Title {
|
||||
value = 'Angular 2';
|
||||
constructor(public http: Http) {
|
||||
|
||||
}
|
||||
|
||||
getData() {
|
||||
console.log('Title#getData(): Get Data');
|
||||
// return this.http.get('/assets/data.json')
|
||||
// .map(res => res.json());
|
||||
return {
|
||||
value: 'AngularClass'
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
44
src/app/home/title/title.spec.ts
Normal file
44
src/app/home/title/title.spec.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import {
|
||||
it,
|
||||
inject,
|
||||
injectAsync,
|
||||
beforeEachProviders,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {BaseRequestOptions, Http} from 'angular2/http';
|
||||
import {MockBackend} from 'angular2/http/testing';
|
||||
|
||||
|
||||
import {Title} from './title.service';
|
||||
|
||||
describe('Title', () => {
|
||||
beforeEachProviders(() => [
|
||||
BaseRequestOptions,
|
||||
MockBackend,
|
||||
provide(Http, {
|
||||
useFactory: function(backend, defaultOptions) {
|
||||
return new Http(backend, defaultOptions);
|
||||
},
|
||||
deps: [MockBackend, BaseRequestOptions]
|
||||
}),
|
||||
|
||||
Title
|
||||
]);
|
||||
|
||||
|
||||
it('should have http', inject([ Title ], (title) => {
|
||||
expect(!!title.http).toEqual(true);
|
||||
}));
|
||||
|
||||
it('should get data from the server', inject([ Title ], (title) => {
|
||||
spyOn(console, 'log');
|
||||
expect(console.log).not.toHaveBeenCalled();
|
||||
|
||||
title.getData();
|
||||
expect(console.log).toHaveBeenCalled();
|
||||
expect(title.getData()).toEqual({ value: 'AngularClass' });
|
||||
}));
|
||||
|
||||
});
|
||||
1
src/app/home/x-large/index.ts
Normal file
1
src/app/home/x-large/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './x-large.directive';
|
||||
18
src/app/home/x-large/x-large.directive.ts
Normal file
18
src/app/home/x-large/x-large.directive.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import {Directive, Component, ElementRef, Renderer} from 'angular2/core';
|
||||
/*
|
||||
* Directive
|
||||
* XLarge is a simple directive to show how one is made
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[x-large]' // using [ ] means selecting attributes
|
||||
})
|
||||
export class XLarge {
|
||||
constructor(element: ElementRef, renderer: Renderer) {
|
||||
// simple DOM manipulation to set font size to x-large
|
||||
// `nativeElement` is the direct reference to the DOM element
|
||||
// element.nativeElement.style.fontSize = 'x-large';
|
||||
|
||||
// for server/webworker support use the renderer
|
||||
renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
|
||||
}
|
||||
}
|
||||
34
src/app/home/x-large/x-large.spec.ts
Normal file
34
src/app/home/x-large/x-large.spec.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import {
|
||||
it,
|
||||
inject,
|
||||
injectAsync,
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {BaseRequestOptions, Http} from 'angular2/http';
|
||||
import {MockBackend} from 'angular2/http/testing';
|
||||
|
||||
// Load the implementations that should be tested
|
||||
import {XLarge} from './x-large.directive';
|
||||
|
||||
describe('x-large directive', () => {
|
||||
// Create a test component to test directives
|
||||
@Component({
|
||||
template: '',
|
||||
directives: [ XLarge ]
|
||||
})
|
||||
class TestComponent {}
|
||||
|
||||
it('should sent font-size to x-large', injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.overrideTemplate(TestComponent, '<div x-large>Content</div>')
|
||||
.createAsync(TestComponent).then((fixture: any) => {
|
||||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement.children[0];
|
||||
expect(compiled.style.fontSize).toBe('x-large');
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
10
src/app/index.ts
Normal file
10
src/app/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// App
|
||||
export * from './app.component';
|
||||
export * from './app.service';
|
||||
|
||||
import {AppState} from './app.service';
|
||||
|
||||
// Application wide providers
|
||||
export const APP_PROVIDERS = [
|
||||
AppState
|
||||
];
|
||||
2
src/app/router-active/index.ts
Normal file
2
src/app/router-active/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// Application level directive
|
||||
export * from './router-active.directive';
|
||||
73
src/app/router-active/router-active.directive.ts
Normal file
73
src/app/router-active/router-active.directive.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import {Router} from 'angular2/router';
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import {
|
||||
Directive,
|
||||
Query,
|
||||
QueryList,
|
||||
Attribute,
|
||||
ElementRef,
|
||||
Renderer,
|
||||
Optional,
|
||||
Input
|
||||
} from 'angular2/core';
|
||||
import {Instruction, RouterLink} from 'angular2/router';
|
||||
|
||||
/**
|
||||
* RouterActive dynamically finds the first element with routerLink and toggles the active class
|
||||
*
|
||||
* ## Use
|
||||
*
|
||||
* ```
|
||||
* <li router-active="active"><a [routerLink]=" ['/Home'] ">Home</a></li>
|
||||
* <li [routerActive]=" activeStringValue "><a [routerLink]=" ['/Home'] ">Home</a></li>
|
||||
* ```
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[router-active]'
|
||||
})
|
||||
export class RouterActive {
|
||||
@Input() routerActive: string = undefined;
|
||||
routerActiveAttr: string = 'active';
|
||||
|
||||
constructor(
|
||||
public router: Router,
|
||||
public element: ElementRef,
|
||||
public renderer: Renderer,
|
||||
@Query(RouterLink) public routerLink: QueryList<RouterLink>,
|
||||
@Optional() @Attribute('router-active') routerActiveAttr?: string) {
|
||||
|
||||
this.routerActiveAttr = this._defaultAttrValue(routerActiveAttr);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.routerLink.changes.subscribe(() => {
|
||||
if (this.routerLink.first) {
|
||||
this._updateClass();
|
||||
this._findRootRouter().subscribe(() => {
|
||||
this._updateClass();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private _findRootRouter(): Router {
|
||||
let router: Router = this.router;
|
||||
while (isPresent(router.parent)) {
|
||||
router = router.parent;
|
||||
}
|
||||
return router;
|
||||
}
|
||||
|
||||
private _updateClass() {
|
||||
let active = this.routerLink.first.isRouteActive;
|
||||
this.renderer.setElementClass(this.element.nativeElement, this._attrOrProp(), active);
|
||||
}
|
||||
|
||||
private _defaultAttrValue(attr?: string) {
|
||||
return this.routerActiveAttr = attr || this.routerActiveAttr;
|
||||
}
|
||||
|
||||
private _attrOrProp() {
|
||||
return isPresent(this.routerActive) ? this.routerActive : this.routerActiveAttr;
|
||||
}
|
||||
}
|
||||
1
src/assets/css/.gitkeep
Normal file
1
src/assets/css/.gitkeep
Normal file
|
|
@ -0,0 +1 @@
|
|||
@AngularClass
|
||||
3
src/assets/data.json
Normal file
3
src/assets/data.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"value": "AngularClass"
|
||||
}
|
||||
17
src/assets/humans.txt
Normal file
17
src/assets/humans.txt
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
|
||||
# THANKS
|
||||
|
||||
<name>
|
||||
PatrickJS -- @gdi2290
|
||||
AngularClass -- @AngularClass
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
HTML5, CSS3
|
||||
Angular2, TypeScript, Webpack
|
||||
BIN
src/assets/icon/android-icon-144x144.png
Normal file
BIN
src/assets/icon/android-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/icon/android-icon-192x192.png
Normal file
BIN
src/assets/icon/android-icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/icon/android-icon-36x36.png
Normal file
BIN
src/assets/icon/android-icon-36x36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/icon/android-icon-48x48.png
Normal file
BIN
src/assets/icon/android-icon-48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/icon/android-icon-72x72.png
Normal file
BIN
src/assets/icon/android-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/icon/android-icon-96x96.png
Normal file
BIN
src/assets/icon/android-icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/icon/apple-icon-114x114.png
Normal file
BIN
src/assets/icon/apple-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/assets/icon/apple-icon-120x120.png
Normal file
BIN
src/assets/icon/apple-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/icon/apple-icon-144x144.png
Normal file
BIN
src/assets/icon/apple-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/icon/apple-icon-152x152.png
Normal file
BIN
src/assets/icon/apple-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/icon/apple-icon-180x180.png
Normal file
BIN
src/assets/icon/apple-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/icon/apple-icon-57x57.png
Normal file
BIN
src/assets/icon/apple-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/icon/apple-icon-60x60.png
Normal file
BIN
src/assets/icon/apple-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/icon/apple-icon-72x72.png
Normal file
BIN
src/assets/icon/apple-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/icon/apple-icon-76x76.png
Normal file
BIN
src/assets/icon/apple-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/icon/apple-icon-precomposed.png
Normal file
BIN
src/assets/icon/apple-icon-precomposed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/icon/apple-icon.png
Normal file
BIN
src/assets/icon/apple-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
2
src/assets/icon/browserconfig.xml
Normal file
2
src/assets/icon/browserconfig.xml
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
||||
BIN
src/assets/icon/favicon-16x16.png
Normal file
BIN
src/assets/icon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/icon/favicon-32x32.png
Normal file
BIN
src/assets/icon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
src/assets/icon/favicon-96x96.png
Normal file
BIN
src/assets/icon/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/icon/favicon.ico
Normal file
BIN
src/assets/icon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/icon/ms-icon-144x144.png
Normal file
BIN
src/assets/icon/ms-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/icon/ms-icon-150x150.png
Normal file
BIN
src/assets/icon/ms-icon-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
src/assets/icon/ms-icon-310x310.png
Normal file
BIN
src/assets/icon/ms-icon-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/icon/ms-icon-70x70.png
Normal file
BIN
src/assets/icon/ms-icon-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
src/assets/img/angular-logo.png
Normal file
BIN
src/assets/img/angular-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/img/angularclass-avatar.png
Normal file
BIN
src/assets/img/angularclass-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/img/angularclass-logo.png
Normal file
BIN
src/assets/img/angularclass-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
41
src/assets/manifest.json
Normal file
41
src/assets/manifest.json
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "App",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/icon/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image/png",
|
||||
"density": 0.75
|
||||
},
|
||||
{
|
||||
"src": "/assets/icon/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image/png",
|
||||
"density": 1.0
|
||||
},
|
||||
{
|
||||
"src": "/assets/icon/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png",
|
||||
"density": 1.5
|
||||
},
|
||||
{
|
||||
"src": "/assets/icon/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png",
|
||||
"density": 2.0
|
||||
},
|
||||
{
|
||||
"src": "/assets/icon/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png",
|
||||
"density": 3.0
|
||||
},
|
||||
{
|
||||
"src": "/assets/icon/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"density": 4.0
|
||||
}
|
||||
]
|
||||
}
|
||||
3
src/assets/mock-data/mock-data.json
Normal file
3
src/assets/mock-data/mock-data.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[
|
||||
{"res": "data"}
|
||||
]
|
||||
3
src/assets/robots.txt
Normal file
3
src/assets/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# robotstxt.org
|
||||
|
||||
User-agent: *
|
||||
1
src/assets/service-worker.js
Normal file
1
src/assets/service-worker.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
// This file is intentionally without code.
|
||||
119
src/custom-typings.d.ts
vendored
Normal file
119
src/custom-typings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
* 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
|
||||
|
||||
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
|
||||
*
|
||||
|
||||
declare var assert: any;
|
||||
|
||||
*
|
||||
* If you're importing a module that uses Node.js modules which are CommonJS you need to import as
|
||||
*
|
||||
|
||||
import * as _ from 'lodash'
|
||||
|
||||
* You can include your type definitions in this file until you create one for the typings registry
|
||||
* see https://github.com/typings/registry
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
|
||||
declare var ENV: string;
|
||||
declare var HMR: boolean;
|
||||
interface GlobalEnvironment {
|
||||
ENV;
|
||||
HMR;
|
||||
}
|
||||
|
||||
interface WebpackModule {
|
||||
hot: {
|
||||
data?: any,
|
||||
idle: any,
|
||||
accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
|
||||
decline(dependencies?: string | string[]): void;
|
||||
dispose(callback?: (data?: any) => void): void;
|
||||
addDisposeHandler(callback?: (data?: any) => void): void;
|
||||
removeDisposeHandler(callback?: (data?: any) => void): void;
|
||||
check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
|
||||
apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
|
||||
status(callback?: (status?: string) => void): void | string;
|
||||
removeStatusHandler(callback?: (status?: string) => void): void;
|
||||
};
|
||||
}
|
||||
|
||||
interface WebpackRequire {
|
||||
context(file: string, flag?: boolean, exp?: RegExp): any;
|
||||
}
|
||||
|
||||
|
||||
interface ErrorStackTraceLimit {
|
||||
stackTraceLimit: number;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Extend typings
|
||||
interface NodeRequire extends WebpackRequire {}
|
||||
interface ErrorConstructor extends ErrorStackTraceLimit {}
|
||||
interface NodeModule extends WebpackModule {}
|
||||
interface Global extends GlobalEnvironment {}
|
||||
|
||||
|
||||
declare namespace Reflect {
|
||||
function decorate(decorators: ClassDecorator[], target: Function): Function;
|
||||
function decorate(
|
||||
decorators: (PropertyDecorator | MethodDecorator)[],
|
||||
target: Object,
|
||||
targetKey: string | symbol,
|
||||
descriptor?: PropertyDescriptor): PropertyDescriptor;
|
||||
|
||||
function metadata(metadataKey: any, metadataValue: any): {
|
||||
(target: Function): void;
|
||||
(target: Object, propertyKey: string | symbol): void;
|
||||
};
|
||||
function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
|
||||
function defineMetadata(
|
||||
metadataKey: any,
|
||||
metadataValue: any,
|
||||
target: Object,
|
||||
targetKey: string | symbol): void;
|
||||
function hasMetadata(metadataKey: any, target: Object): boolean;
|
||||
function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
|
||||
function hasOwnMetadata(metadataKey: any, target: Object): boolean;
|
||||
function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
|
||||
function getMetadata(metadataKey: any, target: Object): any;
|
||||
function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
|
||||
function getOwnMetadata(metadataKey: any, target: Object): any;
|
||||
function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
|
||||
function getMetadataKeys(target: Object): any[];
|
||||
function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
|
||||
function getOwnMetadataKeys(target: Object): any[];
|
||||
function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
|
||||
function deleteMetadata(metadataKey: any, target: Object): boolean;
|
||||
function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
|
||||
}
|
||||
|
||||
|
||||
// We need this here since there is a problem with Zone.js typings
|
||||
interface Thenable<T> {
|
||||
then<U>(
|
||||
onFulfilled?: (value: T) => U | Thenable<U>,
|
||||
onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
|
||||
then<U>(
|
||||
onFulfilled?: (value: T) => U | Thenable<U>,
|
||||
onRejected?: (error: any) => void): Thenable<U>;
|
||||
catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
|
||||
}
|
||||
63
src/index.html
Normal file
63
src/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
|
||||
<title><%= webpackConfig.metadata.title %></title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="<%= webpackConfig.metadata.title %>">
|
||||
|
||||
<!-- use http://www.favicon-generator.org/ to replace files in public/icon-->
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/assets/icon/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/assets/icon/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/assets/icon/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/assets/icon/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/assets/icon/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/assets/icon/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/assets/icon/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/assets/icon/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/assets/icon/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/assets/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#00bcd4">
|
||||
<meta name="msapplication-TileImage" content="/assets/icon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#00bcd4">
|
||||
<!-- end favicon -->
|
||||
|
||||
<!-- base url -->
|
||||
<base href="<%= webpackConfig.metadata.baseUrl %>">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<app>
|
||||
Loading...
|
||||
</app>
|
||||
|
||||
<!-- Google Analytics: change UA-71073175-1 to be your site's ID -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-71073175-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
<% if (webpackConfig.metadata.ENV === 'development') { %>
|
||||
<!-- Webpack Dev Server reload -->
|
||||
<script src="/webpack-dev-server.js"></script>
|
||||
<% } %>
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
58
src/main.browser.ts
Normal file
58
src/main.browser.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/*
|
||||
* Providers provided by Angular
|
||||
*/
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
/*
|
||||
* Platform and Environment
|
||||
* our providers/directives/pipes
|
||||
*/
|
||||
import {DIRECTIVES, PIPES, PROVIDERS} from './platform/browser';
|
||||
import {ENV_PROVIDERS} from './platform/environment';
|
||||
|
||||
/*
|
||||
* App Component
|
||||
* our top level component that holds all of our components
|
||||
*/
|
||||
import {App, APP_PROVIDERS} from './app';
|
||||
|
||||
/*
|
||||
* Bootstrap our Angular app with a top level component `App` and inject
|
||||
* our Services and Providers into Angular's dependency injection
|
||||
*/
|
||||
export function main(initialHmrState?: any): Promise<any> {
|
||||
|
||||
return bootstrap(App, [
|
||||
...PROVIDERS,
|
||||
...ENV_PROVIDERS,
|
||||
...DIRECTIVES,
|
||||
...PIPES,
|
||||
...APP_PROVIDERS
|
||||
])
|
||||
.catch(err => console.error(err));
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Vendors
|
||||
* For vendors for example jQuery, Lodash, angular2-jwt just import them anywhere in your app
|
||||
* You can also import them in vendors to ensure that they are bundled in one file
|
||||
* Also see custom-typings.d.ts as you also need to do `typings install x` where `x` is your module
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Hot Module Reload
|
||||
* experimental version by @gdi2290
|
||||
*/
|
||||
if ('development' === ENV && HMR === true) {
|
||||
// activate hot module reload
|
||||
let ngHmr = require('angular2-hmr');
|
||||
ngHmr.hotModuleReplacement(main, module);
|
||||
} else {
|
||||
// bootstrap when documetn is ready
|
||||
document.addEventListener('DOMContentLoaded', () => main());
|
||||
}
|
||||
37
src/platform/browser/angular2-material2/index.ts
Normal file
37
src/platform/browser/angular2-material2/index.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import {MdButton, MdAnchor} from '@angular2-material/button';
|
||||
import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
|
||||
import {MdCheckbox} from '@angular2-material/checkbox';
|
||||
import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav';
|
||||
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
|
||||
import {MD_LIST_DIRECTIVES} from '@angular2-material/list';
|
||||
import {MdRadioGroup, MdRadioButton, MdRadioDispatcher} from '@angular2-material/radio';
|
||||
import {MdSpinner, MdProgressCircle} from '@angular2-material/progress-circle';
|
||||
import {MdToolbar} from '@angular2-material/toolbar';
|
||||
|
||||
/*
|
||||
* we are grouping the module so we only need to manage the imports in one location
|
||||
*/
|
||||
|
||||
export const MATERIAL_PIPES = [
|
||||
|
||||
];
|
||||
|
||||
export const MATERIAL_DIRECTIVES = [
|
||||
...MD_SIDENAV_DIRECTIVES,
|
||||
...[
|
||||
MdAnchor,
|
||||
MdButton,
|
||||
MdToolbar,
|
||||
MdCheckbox,
|
||||
MdRadioButton,
|
||||
MdSpinner,
|
||||
MdProgressCircle
|
||||
],
|
||||
...MD_INPUT_DIRECTIVES,
|
||||
...MD_LIST_DIRECTIVES,
|
||||
...MD_CARD_DIRECTIVES
|
||||
];
|
||||
|
||||
export const MATERIAL_PROVIDERS = [
|
||||
MdRadioDispatcher
|
||||
];
|
||||
22
src/platform/browser/directives.ts
Normal file
22
src/platform/browser/directives.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* These are globally available directives in any template
|
||||
*/
|
||||
|
||||
import {provide, PLATFORM_DIRECTIVES} from 'angular2/core';
|
||||
|
||||
// Angular 2 Router
|
||||
import {ROUTER_DIRECTIVES} from 'angular2/router';
|
||||
|
||||
// Angular 2 Material 2
|
||||
// TODO(gdi2290): replace with @angular2-material/all
|
||||
import {MATERIAL_DIRECTIVES} from './angular2-material2';
|
||||
|
||||
// application_directives: directives that are global through out the application
|
||||
export const APPLICATION_DIRECTIVES = [
|
||||
...ROUTER_DIRECTIVES,
|
||||
...MATERIAL_DIRECTIVES
|
||||
];
|
||||
|
||||
export const DIRECTIVES = [
|
||||
provide(PLATFORM_DIRECTIVES, { multi: true, useValue: APPLICATION_DIRECTIVES })
|
||||
];
|
||||
3
src/platform/browser/index.ts
Normal file
3
src/platform/browser/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from './directives';
|
||||
export * from './pipes';
|
||||
export * from './providers';
|
||||
14
src/platform/browser/pipes.ts
Normal file
14
src/platform/browser/pipes.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* These are globally available pipes in any template
|
||||
*/
|
||||
|
||||
import {provide, PLATFORM_PIPES} from 'angular2/core';
|
||||
|
||||
// application_pipes: pipes that are global through out the application
|
||||
export const APPLICATION_PIPES = [
|
||||
|
||||
];
|
||||
|
||||
export const PIPES = [
|
||||
provide(PLATFORM_PIPES, { multi: true, useValue: APPLICATION_PIPES })
|
||||
];
|
||||
34
src/platform/browser/providers.ts
Normal file
34
src/platform/browser/providers.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
* These are globally available services in any component or any other service
|
||||
*/
|
||||
|
||||
|
||||
import {provide} from 'angular2/core';
|
||||
|
||||
// Angular 2
|
||||
import {FORM_PROVIDERS} from 'angular2/common';
|
||||
|
||||
// Angular 2 Http
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
// Angular 2 Router
|
||||
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
|
||||
|
||||
// Angular 2 Material
|
||||
// TODO(gdi2290): replace with @angular2-material/all
|
||||
import {MATERIAL_PROVIDERS} from './angular2-material2';
|
||||
|
||||
/*
|
||||
* Application Providers/Directives/Pipes
|
||||
* providers/directives/pipes that only live in our browser environment
|
||||
*/
|
||||
export const APPLICATION_PROVIDERS = [
|
||||
...FORM_PROVIDERS,
|
||||
...HTTP_PROVIDERS,
|
||||
...MATERIAL_PROVIDERS,
|
||||
...ROUTER_PROVIDERS,
|
||||
provide(LocationStrategy, { useClass: HashLocationStrategy })
|
||||
];
|
||||
|
||||
export const PROVIDERS = [
|
||||
...APPLICATION_PROVIDERS
|
||||
];
|
||||
34
src/platform/environment.ts
Normal file
34
src/platform/environment.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// Angular 2 browser
|
||||
import {
|
||||
ELEMENT_PROBE_PROVIDERS,
|
||||
ELEMENT_PROBE_PROVIDERS_PROD_MODE
|
||||
} from 'angular2/platform/browser';
|
||||
|
||||
// Angular 2
|
||||
import {enableProdMode} from 'angular2/core';
|
||||
|
||||
// Environment Providers
|
||||
let PROVIDERS = [];
|
||||
|
||||
if ('production' === ENV) {
|
||||
// Production
|
||||
enableProdMode();
|
||||
|
||||
PROVIDERS = [
|
||||
...PROVIDERS,
|
||||
ELEMENT_PROBE_PROVIDERS_PROD_MODE
|
||||
];
|
||||
|
||||
} else {
|
||||
// Development
|
||||
PROVIDERS = [
|
||||
...PROVIDERS,
|
||||
ELEMENT_PROBE_PROVIDERS
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
|
||||
export const ENV_PROVIDERS = [
|
||||
...PROVIDERS
|
||||
];
|
||||
28
src/polyfills.ts
Normal file
28
src/polyfills.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// Polyfills
|
||||
// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
|
||||
|
||||
// import 'ie-shim'; // Internet Explorer
|
||||
// import 'es6-shim';
|
||||
// import 'es6-promise';
|
||||
// import 'es7-reflect-metadata';
|
||||
|
||||
// Prefer CoreJS over the polyfills above
|
||||
import 'core-js/es6';
|
||||
import 'core-js/es7/reflect';
|
||||
require('zone.js/dist/zone');
|
||||
|
||||
// Typescript emit helpers polyfill
|
||||
import 'ts-helpers';
|
||||
|
||||
if ('production' === ENV) {
|
||||
// Production
|
||||
|
||||
|
||||
} else {
|
||||
// Development
|
||||
|
||||
Error.stackTraceLimit = Infinity;
|
||||
|
||||
require('zone.js/dist/long-stack-trace-zone');
|
||||
|
||||
}
|
||||
36
src/vendor.ts
Normal file
36
src/vendor.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
|
||||
// chunking vendors files for async loading. You would need to import the async loaded vendors
|
||||
// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
|
||||
// run `typings install x` where `x` is your module
|
||||
|
||||
// Angular 2
|
||||
import 'angular2/platform/browser';
|
||||
import 'angular2/platform/common_dom';
|
||||
import 'angular2/core';
|
||||
import 'angular2/common';
|
||||
import 'angular2/http';
|
||||
import 'angular2/router';
|
||||
|
||||
// RxJS
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/mergeMap';
|
||||
|
||||
// Angular 2 Material 2
|
||||
// TODO(gdi2290): uncomment when material is fixed
|
||||
// import '@angular2-material/sidenav';
|
||||
// import '@angular2-material/toolbar';
|
||||
// import '@angular2-material/button';
|
||||
// import '@angular2-material/checkbox';
|
||||
// import '@angular2-material/radio';
|
||||
// import '@angular2-material/progress-circle';
|
||||
// import '@angular2-material/card';
|
||||
// look in platform/directives and platform/providers
|
||||
|
||||
if ('production' === ENV) {
|
||||
// Production
|
||||
|
||||
|
||||
} else {
|
||||
// Development
|
||||
|
||||
}
|
||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"sourceMap": true,
|
||||
"noEmitHelpers": true
|
||||
},
|
||||
"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"
|
||||
],
|
||||
"awesomeTypescriptLoaderOptions": {
|
||||
"resolveGlobs": true,
|
||||
"forkChecker": true
|
||||
},
|
||||
"compileOnSave": false,
|
||||
"buildOnSave": false,
|
||||
"atom": { "rewriteTsconfig": false }
|
||||
}
|
||||
151
tslint.json
Normal file
151
tslint.json
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
{
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer/dist/src"
|
||||
],
|
||||
"rules": {
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
"public-before-private",
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-any": false,
|
||||
"no-inferrable-types": false,
|
||||
"no-internal-module": true,
|
||||
"no-var-requires": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
},
|
||||
{
|
||||
"call-signature": "space",
|
||||
"index-signature": "space",
|
||||
"parameter": "space",
|
||||
"property-declaration": "space",
|
||||
"variable-declaration": "space"
|
||||
}
|
||||
],
|
||||
|
||||
"ban": false,
|
||||
"curly": false,
|
||||
"forin": true,
|
||||
"label-position": true,
|
||||
"label-undefined": true,
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-conditional-assignment": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-key": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-empty": false,
|
||||
"no-eval": true,
|
||||
"no-null-keyword": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unreachable": true,
|
||||
"no-unused-expression": true,
|
||||
"no-unused-variable": false,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"radix": true,
|
||||
"switch-default": true,
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"use-strict": [
|
||||
true,
|
||||
"check-module"
|
||||
],
|
||||
|
||||
"eofline": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"max-line-length": [
|
||||
true,
|
||||
100
|
||||
],
|
||||
"no-require-imports": false,
|
||||
"no-trailing-whitespace": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"trailing-comma": [
|
||||
true,
|
||||
{
|
||||
"multiline": "never",
|
||||
"singleline": "never"
|
||||
}
|
||||
],
|
||||
|
||||
"align": false,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"interface-name": false,
|
||||
"jsdoc-format": true,
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-constructor-vars": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-finally",
|
||||
"check-whitespace"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single",
|
||||
"avoid-escape"
|
||||
],
|
||||
"semicolon": [true, "always"],
|
||||
"variable-name": [
|
||||
true,
|
||||
"check-format",
|
||||
"allow-leading-underscore",
|
||||
"ban-keywords"
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
|
||||
"directive-selector-name": [true, "kebab-case"],
|
||||
"component-selector-name": [true, "kebab-case"],
|
||||
"directive-selector-type": [true, "attribute"],
|
||||
"component-selector-type": [true, "element"],
|
||||
"directive-selector-prefix": false,
|
||||
"component-selector-prefix": false,
|
||||
"host-parameter-decorator": true,
|
||||
"input-parameter-decorator": true,
|
||||
"output-parameter-decorator": true,
|
||||
"attribute-parameter-decorator": false,
|
||||
"input-property-directive": true,
|
||||
"output-property-directive": true,
|
||||
"call-forward-ref":true
|
||||
}
|
||||
}
|
||||
15
typedoc.json
Normal file
15
typedoc.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"mode": "modules",
|
||||
"out": "doc",
|
||||
"theme": "default",
|
||||
"ignoreCompilerErrors": "true",
|
||||
"experimentalDecorators": "true",
|
||||
"emitDecoratorMetadata": "true",
|
||||
"target": "ES5",
|
||||
"moduleResolution": "node",
|
||||
"preserveConstEnums": "true",
|
||||
"stripInternal": "true",
|
||||
"suppressExcessPropertyErrors": "true",
|
||||
"suppressImplicitAnyIndexErrors": "true",
|
||||
"module": "commonjs"
|
||||
}
|
||||
15
typings.json
Normal file
15
typings.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ambientDependencies": {
|
||||
"angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",
|
||||
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
|
||||
"hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",
|
||||
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",
|
||||
"node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",
|
||||
"selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",
|
||||
"webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"
|
||||
}
|
||||
}
|
||||
19
webpack.config.js
Normal file
19
webpack.config.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author: @AngularClass
|
||||
*/
|
||||
|
||||
// Look in ./config folder for webpack.dev.js
|
||||
switch (process.env.NODE_ENV) {
|
||||
case 'prod':
|
||||
case 'production':
|
||||
module.exports = require('./config/webpack.prod');
|
||||
break;
|
||||
case 'test':
|
||||
case 'testing':
|
||||
module.exports = require('./config/webpack.test');
|
||||
break;
|
||||
case 'dev':
|
||||
case 'development':
|
||||
default:
|
||||
module.exports = require('./config/webpack.dev');
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue