GitHub - xgqfrms-GitHub/angular-cli: CLI tool for Angular2

Angular 2应用程序的 CLI 的原型是基于ember-cli 项目的.

注意

这个项目仍然是一个正在进行的工作。

CLI现在处于测试阶段.

If you wish to collaborate while the project is still young, check out our issue list.

Before submitting new issues, have a look at issues marked with the type: faq label.

Webpack 更新 (SystemJS => Webpack)

We changed the build system between beta.10 and beta.14, from SystemJS to Webpack. And with it comes a lot of benefits. To take advantage of these, your app built with the old beta will need to migrate.

You can update your beta.10 projects to beta.14 by following these instructions.

先决条件

Both the CLI and generated project have dependencies that require Node 4 or higher, together with NPM 3 or higher.

安装

在安装之前: 请阅读先决条件

npm install -g angular-cli

用法

生成和服务Angular2项目,通过一个开发服务器

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

导航到 http://localhost:4200/. 如果你更改任何源文件，应用程序将自动重新加载。

你可以使用两个命令行选项配置默认HTTP端口和LiveReload服务器使用的端口 :

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

生成组件，指令，管道和服务

你可以使用 ng generate (或只是 ng g) 命令生成 Angular 组件:

ng generate component my-new-component
ng g component my-new-component # using the alias

# 组件支持相对路径生成

# 如果在目录中 src/app/feature/ 你运行
ng g component new-cmp
# 你的组件将生成在 src/app/feature/new-cmp
# 但如果你要运行
ng g component ../newer-cmp
# 你的组件将生成在 src/app/newer-cmp

你可以找到所有可能的蓝图,在下表中:

脚手架	用法
Component	`ng g component my-new-component`
Directive	`ng g directive my-new-directive`
Pipe	`ng g pipe my-new-pipe`
Service	`ng g service my-new-service`
Class	`ng g class my-new-class`
Interface	`ng g interface my-new-interface`
Enum	`ng g enum my-new-enum`
Module	`ng g module my-module`

生成一个路由

Generating routes in the CLI has been disabled for the time being. A new router and new route generation blueprints are coming.

You can read the official documentation for the new Router here: https://angular.io/docs/ts/latest/guide/router.html. Please note that even though route generation is disabled, building your projects with routing is still fully supported.

创建一个构建

The build artifacts will be stored in the dist/ directory.

构建目标和环境文件

ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.

The mapping used to determine which environment file is used can be found in angular-cli.json:

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production.

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

You can also add your own env files other than dev and prod by doing the following:

create a src/environments/environment.NAME.ts
add { "NAME": 'src/environments/environment.NAME.ts' } to the the apps[0].environments object in angular-cli.json
use them via the --env=NAME flag on the build/serve commands.

基本标记处理,在index.html中

When building you can modify base tag (<base href="/">) in your index.html with --base-href your-url option.

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/

捆绑

All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.

运行单元测试

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

运行端到端测试

Before running the tests make sure you are serving the app via ng serve.

End-to-end tests are run via Protractor.

代理到后端

Using the proxying support in webpack's dev server we can highjack certain urls and send them to a backend server. We do this by passing a file to --proxy-config

Say we have a server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.

We create a file next to projects package.json called proxy.conf.json with the content

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

You can read more about what options are available here webpack-dev-server proxy settings

and then we edit the package.json file's start script to be

"start": "ng serve --proxy-config proxy.conf.json",

now run it with npm start

通过 GitHub 页面部署应用程序

You can deploy your apps quickly via:

ng github-pages:deploy --message "Optional commit message"

This will do the following:

creates GitHub repo for the current project if one doesn't exist
rebuilds the app in production mode at the current HEAD
creates a local gh-pages branch if one doesn't exist
moves your app to the gh-pages branch and creates a commit
edit the base tag in index.html to support github pages
pushes the gh-pages branch to github
returns back to the original HEAD

Creating the repo requires a token from github, and the remaining functionality relies on ssh authentication for all git operations that communicate with github.com. To simplify the authentication, be sure to setup your ssh keys.

If you are deploying a user or organization page, you can instead use the following command:

ng github-pages:deploy --user-page --message "Optional commit message"

This command pushes the app to the master branch on the github repo instead of pushing to gh-pages, since user and organization pages require this.

Linting和格式化代码

You can lint your app code by running ng lint. This will use the lint npm script that in generated projects uses tslint.

You can modify the these scripts in package.json to run whatever tool you prefer.

支持离线应用程序

The --mobile flag has been disabled temporarily. Sorry for the inconvenience.

Angular-CLI includes support for offline applications via the -- flag on ng new. Support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.

命令自动完成

To turn on auto completion use the following commands:

For bash:

ng completion 1>> ~/.bashrc 2>>&1
source ~/.bashrc

For zsh:

ng completion 1>> ~/.zshrc 2>>&1
source ~/.zshrc

Windows users using gitbash:

ng completion 1>> ~/.bash_profile 2>>&1
source ~/.bash_profile

项目资产

You use the assets array in angular-cli.json to list files or folders you want to copy as-is when building your project:

"assets": [
  "assets",
  "favicon.ico"
]

全局样式

The styles.css file allows users to add global styles and supports CSS imports.

If the project is created with the --style=sass option, this will be a .sass file instead, and the same applies to scss/less/styl.

You can add more global styles via the apps[0].styles property in angular-cli.json.

CSS预处理器集成

Angular-CLI supports all major CSS preprocessors:

To use these prepocessors simply add the file to your component's styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

ng set defaults.styleExt scss

第三方库安装

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev

If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

// in src/typings.d.ts
declare module 'typeless-package';

// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();

全局库安装

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

As an example, to use Boostrap 4 this is what you need to do:

First install Bootstrap from npm:

npm install bootstrap@next

Then add the needed script files to apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

更新 angular-cli

To update angular-cli to a new version, you must update both the global package and your project's local package.

Global package:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

Local project package:

rm -rf node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init

Running ng init will check for changes in all the auto-generated files created by ng new and allow you to update yours. You are offered four choices for each changed file: y (overwrite), n (don't overwrite), d (show diff between your file and the updated file) and h (help).

Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after ng init finishes.

The main cause of errors after an update is failing to incorporate these updates into your code.

You can find more details about changes between versions in CHANGELOG.md.

开发提示for hacking on angular-cli

与 master 工作

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link

npm link is very similar to npm install -g except that instead of downloading the package from the repo, the just cloned angular-cli/ folder becomes the global package. Any changes to the files in the angular-cli/ folder will immediately affect the global angular-cli package, allowing you to quickly test any changes you make to the cli project.

Now you can use angular-cli via the command line:

ng new foo
cd foo
npm link angular-cli
ng serve

npm link angular-cli is needed because by default the globally installed angular-cli just loads the local angular-cli from the project which was fetched remotely from npm. npm link angular-cli symlinks the global angular-cli package to the local angular-cli package. Now the angular-cli you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the angular-cli project you just created.

You can also use ng new foo --link-cli to automatically link the angular-cli package.

Please read the official npm-link documentation and the npm-link cheatsheet for more information.

许可

MIT