迈向angularjs2系列(8):angular cli和angular2种子项目

文章目录

1.angular cli快速搭建项目

2.angular2-seed

3.手动配置

题外话:如何更好的阅读本篇文章

一: angular cli的安装

Angular-cli(命令行界面，全称为command line interface)工具于2015年发布，用于快速初始化新项目的目录结构，并提供了很多脚手架。

  

$ npm install -g @angular/cli    //全局安装cli工具

$ ng  -v  //非必须步骤,但很有趣,有一个好看的图形文字

//提示安装的cli、node和OS版本，我的是1.2版本。

//有版本信息，说明cli工具安装成功！

$  ng new my-app  //创建项目

$  cd my-app    //进入项目目录

$  ng serve     //启动项目

直接安装一直停在fetchMetaData上，选择astrill翻墙，光标动的很快，4分钟搞定。(是否翻墙，视网络情况定，翻墙软件也很多。这里只是做一个参考)。ng new命令分为安装ng(原文为installing ng)、安装工具包(原文为Installing packages for tooling via npm，第二个阶段占去了很多时间)2个阶段，astrill的支持下用了7分半得的时间，最后就就告知success了。

进入目录后运行Serve命令，浏览器输入localhost:4200，就可以浏览器项目了。

webstorm控制台,有说监听端口和成功字样

listening on localhost:4200
webpack: Compiled successfully.

浏览器

成功！

二: angular2种子项目

1.克隆种子项目

  

$ git clone --depth 1 https://github.com/AngularClass/angular2-seed.git  my-dream-app

//git cmd进入到项目目录后运行此命令，我的项目的名称为my-dream-app

$  cd angular-seed       //webstorm命令行进入项目目录

$  npm install

$  npm start

克隆项目走的是github网络还是非常快的。npm install命令安装node模块，报错。(这一次就没有使用代理，说明使用与否看情况咯)

(1)报错:addRemoteGit

解决方法:

是因为npm缓存目录去缓存了个 _git-remotes 目录
windows路径：C:\Users\youname\AppData\Roaming\npm-cache
删除_git-remotes 再继续npm install。

最后npm start，浏览器会自动打开种子项目的首页。不过想象是美好的。default检查有100多个错误，尽管webpack构建啥的都成功了。

(2)报错:cannot find name "promise"等等

根据stackoverflow的http://serve.3ezy.com/stackoverflow.com/a/36637886这篇回答，原因在于我的typescript的版本。

我的版本打印下来是1.8。那么重新安装typescript2版本咯。

step1:

安装typescript2版本

step2:

npm install --save-dev @types/core-js

step3:

tsconfig.ts

{
  "compilerOptions": {
     "lib": ["es6","dom"]
  }
}

step4:

npm install

直接安装，npm start之后default检查OK，然后打开localhost:3000。

浏览器的显示

控制台console打印

2.命令行的小技巧

●方向键  ↑ :   向上的箭头可以复制上一次的命令，从而直接敲回车。

●tab键:当输入目录或文件名时，只输入前面几个字母，然后敲tab键，就可以补全。

●迅速打开命令行:shift+右键，有命令行菜单

●迅速打开git bash:直接右键