angular2 webpack starter

An Angular Starter kit featuring Angular 2 and Angular 4 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack 2 by @AngularClass https://angularclass.github.io/angula…

一个Angular入门工具包包括Angular 2和Angular 4（路由器，Http，窗体，服务，测试，E2E，Dev / Prod，HMR，Async / Lazy路由，AoT通过ngc），Karma，量角器，Jasmine，伊斯坦布尔，TypeScript 2， TsLint，Codelyzer，Hot Module Replacement，@types和Webpack 2 by @AngularClass https://angularclass.github.io/angula...

If you're looking for Angular 1.x please use NG6-starter If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools If you're looking to learn TypeScript see TypeStrong/learn-typescript If you're looking for something easier to get started with then see the angular2-seed that I also maintain angular/angular2-seed
如果你正在寻找Angular 1.x请使用NG6-starter如果你想了解Webpack和ES6构建工具检查ES6-build-tools如果你正在寻找学习TypeScript参见TypeStrong / learn-typescript If 你正在寻找更容易开始的事情，然后看到angular2种子，我也保持angular / angular2种子

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 2 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.
这个种子repo作为Angular 2启动器，任何人想要启动和运行Angular 2和TypeScript快。 使用Webpack 2构建我们的文件和协助样板。 我们还使用量角器用于我们的端到端故事，并使用Karma进行我们的单元测试。

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.
Ahead of Time (AoT) compile for rapid page loads of your production builds.
Tree shaking to automatically remove unused code from your production bundle.
Webpack DLLs dramatically speed your development builds.
Testing Angular 2 code with Jasmine and Karma.
Coverage with Istanbul and Karma
End-to-end Angular 2 code using Protractor.
Type manager with @types
Hot Module Replacement with Webpack and @angularclass/hmr and @angularclass/hmr-loader
Material Design with angular/material2
Angular 4 support via changing package.json and any future Angular versions
Angular 2文件和应用程序组织的最佳实践。
准备好使用Webpack构建系统以使用TypeScript。
Angular 2示例，当使用Angular 2进行实验时就准备好了。
任何人谁想要开始他们的项目伟大的Angular 2种子回购。
超前时间（AoT）编译用于快速加载您的生产构建。
树摇动以从生产捆绑包中自动删除未使用的代码。
Webpack DLL极大地加快了开发构建速度。
用Jasmine和Karma测试Angular 2代码。
覆盖与伊斯坦布尔和Karma
使用量角器的端到端角2代码。
类型管理器与@types
热模块更换与Webpack和@ angularclass / hmr和@ angularclass / hmr-loader
带角/材料的材料设计2
Angular 4支持通过更改package.json和任何未来的Angular版本

Quick start
Make sure you have Node version >= 5.0 and NPM >= 3
Clone/Download the repo then edit app.component.ts inside /src/app/app.component.ts
'# 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
'# 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 or http://localhost:3000 in your browser

Table of Contents
File Structure
Getting Started
Dependencies
Installing
Running the app
Configuration
AoT Don'ts
External Stylesheets
Contributing
TypeScript
@Types
Frequently asked questions
Support, Questions, or Feedback
License
目录

文件结构
入门
依赖
安装
运行应用程序
组态
AoT不要
外部样式表
贡献
TypeScript
@Types
经常问的问题
支持，问题或反馈
执照

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:
我们在启动器中使用组件方法。这是开发Angular应用程序的新标准，是通过封装我们的行为逻辑来确保可维护代码的一个很好的方法。组件基本上是一个自包含的应用程序，通常在单个文件或文件夹中，每个关注作为一个文件：style，template，specs，e2e和组件类。下面是它的外观：

我们的配置
 | ├──helpers.js* 配置文件的帮助功能
 | ├──spec-bundle.js 忽略建立我们的angular 2测试环境的魔法
 | ├──karma.conf.js karma配置为我们的单元测试
 | ├──protractor.conf.js量角器配置为我们的端到端测试
 │├──webpack.dev.js我们开发webpack配置
 │├──webpack.prod.js我们的生产webpack配置
 │└──webpack.test.js我们测试webpack配置
 │  ├──src/ 我们的源文件将被编译为javascript
 | ├──main.browser.ts我们的浏览器环境的入口文件
 ││  | ├──index.html* Index.html：我们生成索引页的位置
 ││  | ├──polyfills.ts我们的polyfills文件
 ││  │├──app/ * WebApp：文件夹
 ││├──app.component.spec.ts在app.component.ts中组件的简单测试
 ││├──app.e2e.ts一个简单的端到端测试/
 ││└──app.component.ts我们的App组件组件的简单版本
 ││  │└──assets/ 这里提供静态资产
 │├──icon/ 我们的图标列表，请访问www.favicon-generator.org
 │├──service-worker.js 忽略此。尚未完成的Web应用程序服务工作者
 │├──robots.txt用于搜索引擎抓取您的网站
 │└──humans.txt让人们知道开发人员是谁
 │  │  ├──tslint.json typescript lint config
 ├──typedoc.json* typescript文档生成器
 ├──tsconfig.json* typescript在webpack外部使用
 ├──tsconfig.webpack.json* webpack用于typescript的配置
 ├──package.json* npm用来管理它的依赖
 └──webpack.config.js* webpack主配置文件

Getting Started
入门 Dependencies
依赖 What you need to run this app:
您需要运行此应用程序：
node and npm (brew install node)
node和npm（brew安装node）
Ensure you're running the latest versions Node v4.x.x+ (or v5.x.x) and NPM 3.x.x+
确保您运行的是最新版本的Node v4.x.x +（或v5.x.x）和NPM 3.x.x +
If you have nvm installed, which is highly recommended (brew install nvm) you can do a nvm install --lts && nvm use in $ to run with the latest Node LTS. You can also have this zsh done for you automatically
如果你有nvm安装，这是强烈推荐（brew install nvm），你可以做一个nvm install --lts && nvm在$中使用运行与最新的node LTS。 你也可以自动完成这个zsh一旦你有这些，你应该安装这些全局与npm install --global： 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)
typescript (npm install --global typescript)

Installing安装

fork this repo
clone your fork
npm install webpack-dev-server rimraf webpack -g to install required global dependencies
npm install to install all dependencies or yarn
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/).
安装所有依赖项后，您现在可以运行应用程序。 运行npm运行服务器以使用webpack-dev-server启动本地服务器，它将为您监视，构建（内存中）和重新加载。 该端口将显示为http://0.0.0.0:3000（或者如果您喜欢IPv6，如果您使用的是express服务器，则为http：// [:: 1]：3000 /）。
server
服务器
'# development
开发
npm run server
'# production
生产
npm run build:prod
npm run server:prod
Other commands
其他命令
build files
构建文件
'# development
开发
npm run build:dev
'# production (jit)
生产
npm run build:prod
'# AoT
提前编译
'npm run build:aot