angle-cli server - Festlegen des Standardports

ng serveWie kann ich mithilfe von angle-cli mit dem Befehl einen Standardport angeben, damit ich das --portFlag nicht jedes Mal manuell übergeben muss?

Ich möchte vom Standardport 4200 wechseln.

Update für @ angle / cli @ 9.x: und höher

In können angular.jsonSie einen Port pro "Projekt" angeben

"projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 1337
                }
            }
        }
    }
}

Alle verfügbaren Optionen:

https://angular.io/guide/workspace-config#project-tool-configuration-options

Alternativ können Sie den Port jedes Mal angeben, wenn Sie ng serve wie folgt ausführen:

ng serve --port 1337

Mit diesem Ansatz möchten Sie dies möglicherweise in ein Skript in Ihrer package.json einfügen, um die Ausführung jedes Mal zu vereinfachen / die Konfiguration mit anderen in Ihrem Team zu teilen:

"scripts": {
    "start": "ng serve --port 1337"
}

Erbe:

Update für @ angle / cli final:

Im Inneren können angular-cli.jsonSie den Port in den Standardeinstellungen angeben:

"defaults": {
  "serve": {
    "port": 1337
  }
}

Vermächtnis:

Getestet in [email protected]

Der Server angular-clikommt aus dem ember-cliProjekt. Erstellen Sie zum Konfigurieren des Servers eine .ember-cliDatei im Projektstamm. Fügen Sie dort Ihre JSON-Konfiguration hinzu:

{
   "port": 1337
}

Starten Sie den Server neu und er wird an diesem Port bereitgestellt.

Hier sind weitere Optionen angegeben: http://ember-cli.com/#runtime-configuration

{
  "skipGit" : true,
  "port" : 999,
  "host" : "0.1.0.1",
  "liveReload" : true,
  "environment" : "mock-development",
  "checkForUpdates" : false
}

In Angular 2 [email protected],

Um ein neues Projekt auf dem anderen Port auszuführen, müssen Sie den Port angeben, während Sie den Befehl ng serve ausführen.

ng serve --port 4201

oder auf die andere Weise können Sie den Teil des Skripts "package.json" bearbeiten und den Port wie unten erwähnt an Ihre Startvariable anhängen und dann einfach "npm start" ausführen.

 "scripts": {

    "ng": "ng",
    "start": "ng serve --port 4201",
    ... : ...,
    ... : ....
}

Dieser Weg ist viel besser, wenn Sie den Port nicht jedes Mal explizit definieren müssen.

Verwenden Sie stattdessen npm-Skripte ... Bearbeiten Sie Ihre package.json und fügen Sie den Befehl zum Skriptabschnitt hinzu.

{
  "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": "^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"
  }
}

Dann einfach ausführen npm start

Sie können den Port jetzt in der .angular-cli.json unter den Standardeinstellungen angeben:

"defaults": {
  "styleExt": "scss",
  "serve": {
    "port": 8080
  },
  "component": {}
}

Getestet in Angular-Cli v1.0.6

Für @ angle / cli v6.2.1

Die Projektkonfigurationsdatei kann angular.jsonmehrere Projekte (Arbeitsbereiche) verarbeiten, die einzeln bereitgestellt werden können.

ng config projects.my-test-project.targets.serve.options.port 4201

Wobei das my-test-projectTeil der Projektname ist, den Sie mit dem ng newBefehl wie hier festgelegt haben:

$ ng new my-test-project
$ cd my-test-project
$ ng config projects.my-test-project.targets.serve.options.port 4201
$ ng serve
** Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ **

Erbe:

Normalerweise verwende ich den ng setBefehl, um die Angular CLI-Einstellungen für die Projektebene zu ändern.

ng set defaults.serve.port=4201

Es ändert Änderungen an Ihrer .angular.cli.json und fügt die zuvor erwähnten Porteinstellungen hinzu .

Nach dieser Änderung können Sie einfach ng serveund es wird der bevorzugte Port verwendet, ohne ihn jedes Mal angeben zu müssen.

In Bezug auf Angular CLI: 7.1.4 gibt es zwei gängige Möglichkeiten, um den Standardport zu ändern .

Nr. 1

In dem angular.json, fügen Sie die --portOption zum serveTeil und verwenden Sie ng serveden Server zu starten.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "demos:build",
    "port": 1337
  },
  "configurations": {
    "production": {
      "browserTarget": "demos:build:production"
    }
  }
},

Nr. 2

In dem package.json, fügen Sie die --portOption ng serveverwenden , um npm startden Server zu starten.

  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 8000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }, 

Die Antwort von elwyn ist richtig. Sie sollten aber auch die Winkelmesserkonfiguration für e2e aktualisieren.

In angle.json,

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

In e2e / protractor.conf.js

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

Möglicherweise möchten Sie die Umgebungsvariable NodeJS verwenden, um den Angular CLI-Dev-Server-Port anzugeben. Eine der möglichen Lösungen besteht darin, den ausgeführten CLI-Entwicklungsserver in ein separates NodeJS-Skript zu verschieben, das den Portwert (z. B. aus der ENV-Datei) liest und ihn ng servemit folgenden portParametern ausführt :

// run-env.js
const dotenv = require('dotenv');
const child_process = require('child_process');

const config = dotenv.config()
const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || 4200;

const child = child_process.exec(`ng serve --port=${DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

Dann können Sie a) dieses Skript direkt über node run-envausführen, b) es über npm ausführen, indem Sie beispielsweise package.json aktualisieren

"scripts": {
  "start": "node run-env"
}

run-env.jssollte dem Repo verpflichtet sein, .envsollte nicht. Weitere Details zum Ansatz finden Sie in diesem Beitrag: So ändern Sie den Angular CLI Development Server-Port über .env .