Angular4.0 起步

版权声明：本文为原创文章，未经博主允许不得转载，欢迎各种交流，共同进步。 https://blog.csdn.net/sinat_15951543/article/details/71215856

第一步，首先准备，安装Node.js 和 TypeScript。

           Node.js 的安装方式很多，具体可以看Node.js的官网了解。这里不做解释，提供官网（https://nodejs.org/en/）。

这里值得注意的是，有很多同学都碰到的同一个问题就是，没留意nodejs的版本，官方说明了，  node 6.9.x 和 npm 3.x.x 以上的版本， 在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证，如果不是这个版本以上的，是安装有问题滴。

关于TypeScript，Angluar没有强制要求用户使用ts，所以并不是非它不可，但是，TypeScript真的很好，让Angluar写起来更简单。

        安装TypeScript

npm install -g typescript

第二步，安装cli。

安装angular-cli，这个是Angular 的一个命令行工具。安装命令：

npm install -g @angular/cli

第三步，创建新项目

安装完毕后，就可以开始第一个Angular4的项目了。

运行ng命令，创建一个新的ng项目：

ng new angular4_hello_world

安装完毕后，进入项目根目录，

cd angular4_hello_world

运行ng命令， 开启应用

ng serve --open

浏览器自动打开，http://localhost:4200/，当你修改文件的时候，浏览器会自动刷新，到这里。就起步完成啦！

这里要值得注意的一下是端口，默认端口是4200，如果要发布到生产环境的话，可能要更换端口号。

这里有两个更换端口方法提供给大家，

第一个，找到node_modules/angular-cli/lib/config/schema.json，default值就是默认的端口

"serve": {
 "description": "Properties to be passed to the serve command", 
 "type": "object", 
 "properties": { 
                "port": { 
                          "description": "The port the application will be served on", 
                          "type": "number",
                          "default": 4200 },
                          "host": {
                                   "description": "The host the application will be served on", 
                                   "type": "string", "default": "localhost"
                          }
                 }
            }
}

第二个，也可以通过命令行方式修改，如：

ng serve --port 4201