Angular6学习笔记2: 启动应用

在Angular4学习笔记1中，创建了一个Demo的Project，现在要启动它

一.在命令行中启动

1.切换到项目目录下：

cd demo

2.启动这个应用：

ng server --open

--open ： 在启动后自动打开浏览器，当然也可以不加，不过在启动完成后要手动的在浏览器中输入：http://localhost:4200/

启动完成后，会出现如下内容

 此时说明应用已经成功启动。

二.使用IDE启动（推荐使用Webstorm）

在Webstorm中：

1.file--> open 在弹出的对话框中找到项目的路径，点击Open

2.在左侧的文件列表中找到： package.json 这个文件，

3.右键点击： Show npm Scripts 会出现如下

4.点击start就启动应用

在Webstorm中默认是不会打开浏览器的，需要在浏览器中手动输入，http://localhost:4200.

也可以在Webstorm启动的过程中点击

 

如果觉得每次点击太麻烦，修改 package.json 中scripts.start 字段的   ng serve 修改为 ng serve --open 即可。

 

三.同时启动两个甚至更多的应用

有时会遇到需要同时启动两个应用的时候，当启动第二个应用的时候会出现如下的错误：

这是因为： 在启动第一个应用的时候，已经占用并监听端口号：4200，当启动第二个时候，默认会继续使用4200，此时就会报错。

解决方案：在package.json 文件中 scripts.start 字段的   ng serve 后增加 --port 8000(可以改变) 即可。如下图所示：

 然后在启动应用就不会出现错误的情况。