Angular--Port 4200 is already in use. Use '--port' to specify a different port.

前言

因为之前对前端设置这方面有一定的学习,认为这方面学起来非常有意思,但是因为自己可能是菜鸟,所以出现的错误也不少。在网上总是能看到很多前端大神提起Angular,但是我对这方面不太了解,所以就想学,丰富自己对前端的认识,因为之前没有接触过这方面的知识,所以出现错误的概率很大,接下来我就介绍一下我遇到的这个bug,希望对大家有帮助

内容

搭建好Angular环境,因为教程里面是用cmd搭建,然后给出了查看搭建结果的的代码:ng serve,所以我就尝试了一下,出现的内容是这样的,如下:
这里写图片描述
这说明环境已经搭建好了,而且已经成功执行了。这个时候我的WebStorm也安装好了,于是我点击进去,找到相关文件打开,点击运行,打不开网站,并出现下面错误。

"D:\Program Files\JetBrains\WebStorm 2018.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run start --scripts-prepend-node-path=auto

> auction@0.0.0 start C:\Users\ITLuoxiaojun\auction
> ng serve

Port 4200 is already in use. Use '--port' to specify a different port.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! auction@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the auction@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ITLuoxiaojun\AppData\Roaming\npm-cache\_logs\2018-07-30T09_15_51_923Z-debug.log

进程已结束,退出代码1

这里写图片描述
因为我是刚刚才开始学习Angular的,所以觉得懵逼了,因为刚下载,什么东西都没有敲,直接运行的话应该可以的啊!但问题就是我运行不了,而且报出了上面的错误,没办法,百度一下,给出的答案是:我已经启动了该项目,所以无法再次打开,原来这样。
解决方法:
将cmd命令窗口关闭,然后再在WS中运行,这次成功了。在WS中部署完代码,然后成功加载,显示的内容如下:

"D:\Program Files\JetBrains\WebStorm 2018.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run start --scripts-prepend-node-path=auto

> auction@0.0.0 start C:\Users\ITLuoxiaojun\auction
> ng serve

** NG Live Development Server is running on http://localhost:4200 **
  0% compiling
 10% building modules 3/3 modules 0 active
 10% building modules 3/6 modules 3 active ...s\ITLuoxiaojun\auction\src\styles.css
 10% building modules 4/6 modules 2 active ...ITLuoxiaojun\auction\src\polyfills.ts
 10% building modules 4/8 modules 4 active ...s\ITLuoxiaojun\auction\src\styles.css
 10% building modules 5/8 modules 3 active ...s\ITLuoxiaojun\auction\src\styles.css
 10% building modules 5/9 modules 4 active ...ode_modules\style-loader\addStyles.js
 10% building modules 6/9 modules 3 active ...ode_modules\style-loader\addStyles.js
 10% building modules 7/9 modules 2 active ...ode_modules\style-loader\addStyles.js
 10% building modules 8/9 modules 1 active ...ode_modules\style-loader\addStyles.js
 11% building modules 9/9 modules 0 active
 11% building modules 9/11 modules 2 active ...xiaojun\auction\src\app\app.module.ts
 11% building modules 9/12 modules 3 active ...ction\src\environments\environment.ts
 11% building modules 9/15 modules 6 active ...aojun\auction\node_modules\url\url.js
 11% building modules 10/15 modules 5 active ...aojun\auction\node_modules\url\url.js
 11% building modules 11/15 modules 4 active ...aojun\auction\node_modules\url\url.js
 11% building modules 12/16 modules 4 active ...n\node_modules\core-js\es6\reflect.js
 11% building modules 12/17 modules 5 active ...n\node_modules\core-js\es7\reflect.js
 11% building modules 12/18 modules 6 active ...ion\node_modules\zone.js\dist\zone.js
 11% building modules 13/18 modules 5 active ...ion\node_modules\zone.js\dist\zone.js
 11% building modules 14/18 modules 4 active ...ion\node_modules\zone.js\dist\zone.js
 11% building modules 15/18 modules 3 active ...ion\node_modules\zone.js\dist\zone.js
 11% building modules 15/19 modules 4 active ...n\node_modules\webpack\hot\emitter.js
 11% building modules 15/20 modules 5 active ...es\@angular\core\@angular\core.es5.js
 11% building modules 15/21 modules 6 active ...gular\platform-browser-dynamic.es5.js
 11% building modules 15/22 modules 7 active ...ojun\auction\src\app\app.component.ts
 12% building modules 17/22 modules 5 active ...ojun\auction\src\app\app.component.ts
 12% building modules 18/22 modules 4 active ...ojun\auction\src\app\app.component.ts
 12% building modules 19/22 modules 3 active ...ojun\auction\src\app\app.component.ts
 12% building modules 20/22 modules 2 active ...ojun\auction\src\app\app.component.ts
 12% building modules 21/22 modules 1 active ...ojun\auction\src\app\app.component.ts
 12% building modules 21/23 modules 2 active ...tion\node_modules\strip-ansi\index.js
 12% building modules 22/23 modules 1 active ...tion\node_modules\strip-ansi\index.js
 12% building modules 23/27 modules 4 active ...node_modules\querystring-es3\index.js
 12% building modules 23/28 modules 5 active ...ode_modules\webpack\buildin\global.js
 12% building modules 23/29 modules 6 active ...un\auction\src\app\app.component.html
 12% building modules 24/29 modules 5 active ...un\auction\src\app\app.component.html
 13% building modules 25/29 modules 4 active ...un\auction\src\app\app.component.html
 13% building modules 26/29 modules 3 active ...un\auction\src\app\app.component.html
 13% building modules 27/29 modules 2 active ...un\auction\src\app\app.component.html
 13% building modules 27/36 modules 9 active ...s\modules\es7.reflect.has-metadata.js
 13% building modules 27/37 modules 10 active ...dules\es7.reflect.has-own-metadata.js
 13% building modules 27/44 modules 17 active ...e-js\modules\es6.reflect.enumerate.js
 13% building modules 27/45 modules 18 active ...es\core-js\modules\es6.reflect.get.js
 13% building modules 27/46 modules 19 active ...eflect.get-own-property-descriptor.js
 13% building modules 27/48 modules 21 active ...es\core-js\modules\es6.reflect.has.js
 13% building modules 27/
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值