blocks|key|4417104|text|在Angular+2+cli@2.3.1中，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4417105|要在不同的端口上运行新项目，一种方法是在运行ng+serve命令时指定端口。|4417106|ng+serve+--port+4201|code-block|syntax|javascript|4417107|或者以另一种方式，您可以编辑您的package.json文件脚本部分，并将端口附加到您的启动变量，就像我下面提到的，然后简单地运行"npm+start“|4417108|+"scripts":+{

++++"ng":+"ng",
++++"start":+"ng+serve+--port+4201",
++++...+:+...,
++++...+:+....
}|4417109|在不需要每次都显式定义端口的情况下，这种方法要好得多。|4417110|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In Angular 2 cli@2.3.1,

To run a new project on the different port, one way is to specify the port while you run ng serve command.

<pre><code>ng serve --port 4201
</code></pre>

or the other way, you can edit your package.json file scripts part and attached the port to your start variable like I mentioned below and then simply run "npm start"

<pre><code> "scripts": {

 "ng": "ng",
 "start": "ng serve --port 4201",
 ... : ...,
 ... : ....
}
</code></pre>

this way is much better where you don't need to define port explicitly every time.

blocks|key|4417136|text|改用npm脚本...编辑package.json并将命令添加到脚本部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4417137|{
++"name":+"my+new+project",
++"version":+"0.0.0",
++"license":+"MIT",
++"angular-cli":+{},
++"scripts":+{
++++"ng":+"ng",
++++"start":+"ng+serve+--host+0.0.0.0+--port+8080",
++++"lint":+"tslint+\"src/**/*.ts\"+--project+src/tsconfig.json+--type-check+&&+tslint+\"e2e/**/*.ts\"+--project+e2e/tsconfig.json+--type-check",
++++"test":+"ng+test",
++++"pree2e":+"webdriver-manager+update+--standalone+false+--gecko+false",
++++"e2e":+"protractor"
++},
++"private":+true,
++"dependencies":+{
++++"@angular/common":+"%5E2.3.1",
++++"@angular/compiler":+"%5E2.3.1",
++++"@angular/core":+"%5E2.3.1",
++++"@angular/forms":+"%5E2.3.1",
++++"@angular/http":+"%5E2.3.1",
++++"@angular/platform-browser":+"%5E2.3.1",
++++"@angular/platform-browser-dynamic":+"%5E2.3.1",
++++"@angular/router":+"%5E3.3.1",
++++"core-js":+"%5E2.4.1",
++++"rxjs":+"%5E5.0.1",
++++"ts-helpers":+"%5E1.1.1",
++++"zone.js":+"%5E0.7.2"
++},
++"devDependencies":+{
++++"@angular/compiler-cli":+"%5E2.3.1",
++++"@types/jasmine":+"2.5.38",
++++"@types/node":+"%5E6.0.42",
++++"angular-cli":+"1.0.0-beta.26",
++++"codelyzer":+"~2.0.0-beta.1",
++++"jasmine-core":+"2.5.2",
++++"jasmine-spec-reporter":+"2.5.0",
++++"karma":+"1.2.0",
++++"karma-chrome-launcher":+"%5E2.0.0",
++++"karma-cli":+"%5E1.0.1",
++++"karma-jasmine":+"%5E1.0.2",
++++"karma-remap-istanbul":+"%5E0.2.1",
++++"protractor":+"~4.0.13",
++++"ts-node":+"1.2.1",
++++"tslint":+"%5E4.3.0",
++++"typescript":+"~2.0.3"
++}
}|code-block|syntax|javascript|4417138|然后只需执行npm+start|offset|length|style|CODE|4417139|entityMap^0|0|0|6|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use npm scripts instead... Edit your package.json and add the command to script section.

<pre><code>{
 "name": "my new project",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
 "ng": "ng",
 "start": "ng serve --host 0.0.0.0 --port 8080",
 "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check &amp;&amp; tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
 "test": "ng test",
 "pree2e": "webdriver-manager update --standalone false --gecko false",
 "e2e": "protractor"
 },
 "private": true,
 "dependencies": {
 "@angular/common": "^2.3.1",
 "@angular/compiler": "^2.3.1",
 "@angular/core": "^2.3.1",
 "@angular/forms": "^2.3.1",
 "@angular/http": "^2.3.1",
 "@angular/platform-browser": "^2.3.1",
 "@angular/platform-browser-dynamic": "^2.3.1",
 "@angular/router": "^3.3.1",
 "core-js": "^2.4.1",
 "rxjs": "^5.0.1",
 "ts-helpers": "^1.1.1",
 "zone.js": "^0.7.2"
 },
 "devDependencies": {
 "@angular/compiler-cli": "^2.3.1",
 "@types/jasmine": "2.5.38",
 "@types/node": "^6.0.42",
 "angular-cli": "1.0.0-beta.26",
 "codelyzer": "~2.0.0-beta.1",
 "jasmine-core": "2.5.2",
 "jasmine-spec-reporter": "2.5.0",
 "karma": "1.2.0",
 "karma-chrome-launcher": "^2.0.0",
 "karma-cli": "^1.0.1",
 "karma-jasmine": "^1.0.2",
 "karma-remap-istanbul": "^0.2.1",
 "protractor": "~4.0.13",
 "ts-node": "1.2.1",
 "tslint": "^4.3.0",
 "typescript": "~2.0.3"
 }
}
</code></pre>

Then just execute <code>npm start</code>

blocks|key|4417175|text|现在，您可以在.angular-cli.json的默认设置下指定端口：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4417176|"defaults":+{
++"styleExt":+"scss",
++"serve":+{
++++"port":+8080
++},
++"component":+{}
}|code-block|syntax|javascript|4417177|在angular-cli+v1.0.6中测试|4417178|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can now specify the port in the .angular-cli.json under the defaults:

<pre><code>"defaults": {
 "styleExt": "scss",
 "serve": {
 "port": 8080
 },
 "component": {}
}
</code></pre>

Tested in angular-cli v1.0.6

blocks|key|4417075|text|elwyn提供的答案是正确的。但您还应该更新e2e的量角器配置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4417076|在angular.json中，|4417077|"serve":+{
++++++"builder":+"@angular-devkit/build-angular:dev-server",
++++++"options":+{
++++++++"port":+9000,
++++++++"browserTarget":+"app:build"
++++++}
++++}|code-block|syntax|javascript|4417078|在e2e/protractor.conf.js中|4417079|exports.config+=+{
++++allScriptsTimeout:+11000,
++++specs:+[
++++++++'./src/**/*.e2e-spec.ts'
++++],
++++capabilities:+{
++++++++'browserName':+'chrome'
++++},
++++directConnect:+true,
++++baseUrl:+'http://localhost:9000/'
}|4417080|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The answer provided by elwyn is correct. But you should also update protractor config for e2e.

In angular.json,

<pre><code>"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "port": 9000,
 "browserTarget": "app:build"
 }
 }
</code></pre>

In e2e/protractor.conf.js

<pre><code>exports.config = {
 allScriptsTimeout: 11000,
 specs: [
 './src/**/*.e2e-spec.ts'
 ],
 capabilities: {
 'browserName': 'chrome'
 },
 directConnect: true,
 baseUrl: 'http://localhost:9000/'
}
</code></pre>

blocks|key|4417228|text|对于Angular版本的12，这对我很有效。在angular.json更新中如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4417229|"serve":+{
++++++++++"builder":+"@angular-devkit/build-angular:dev-server",
++++++++++"configurations":+{
++++++++++++"production":+{
++++++++++++++"browserTarget":+"angular-website:build:production"
++++++++++++},
++++++++++++"development":+{
++++++++++++++"browserTarget":+"angular-website:build:development",
++++++++++++++"port":+5000
++++++++++++}
++++++++++},
++++++++++"defaultConfiguration":+"development"
++++++++},|code-block|syntax|javascript|4417230|entityMap^0|C|2|N|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

For Angular Version <code>12</code> this worked for me. In <code>angular.json</code> update like this
<pre><code>&quot;serve&quot;: {
 &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
 &quot;configurations&quot;: {
 &quot;production&quot;: {
 &quot;browserTarget&quot;: &quot;angular-website:build:production&quot;
 },
 &quot;development&quot;: {
 &quot;browserTarget&quot;: &quot;angular-website:build:development&quot;,
 &quot;port&quot;: 5000
 }
 },
 &quot;defaultConfiguration&quot;: &quot;development&quot;
 },
</code></pre>

Using angular-cli with the <code>ng serve</code> command, how can I specify a default port so I do not need to manually pass the <code>--port</code> flag every time?

I'd like to change from the default port 4200.

angular-cli server - how to specify default port

将angular-cli与ng serve命令配合使用时，如何指定默认端口，从而不需要每次都手动传递--port标志？我想更改默认端口4200。

问angular-cli服务器-如何指定默认端口
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular-cli服务器-如何指定默认端口EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular-cli服务器-如何指定默认端口
EN