Comprehensive Guide to Configuring Default Host and Port for Angular CLI Development Server

Overview of Angular CLI Configuration

In Angular development, configuring the development server is a crucial aspect of project setup. Proper configuration of development server parameters can significantly enhance development efficiency and team collaboration.

Angular CLI 6+ Configuration Method

For Angular CLI 6 and later versions, development server configuration is primarily implemented through the angular.json file. This file serves as the core configuration file for Angular workspaces, containing various build and development settings for projects.

The basic structure for configuring development server ports in angular.json is as follows:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "options": {
            "port": 4444
          }
        }
      }
    }
  }
}

The key path in the configuration is projects["project-name"].architect["serve"].options, where multiple server options can be set.

Complete Configuration Options

In addition to port configuration, the development server supports various configuration options:

{
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "options": {
            "port": 8080,
            "host": "localhost",
            "ssl": true,
            "sslKey": "./ssl/server.key",
            "sslCert": "./ssl/server.crt"
          }
        }
      }
    }
  }
}

Host configuration allows specifying the network interface the server listens on. Setting it to a specific IP address or hostname can control access permissions.

Using ng config Command

Angular CLI provides the ng config command for dynamic configuration management:

ng config projects["my-project"].architect["serve"].options.port 4444

This command directly modifies the corresponding configuration items in the angular.json file, making it suitable for use in automation scripts.

Configuration Methods for Earlier Versions

For versions prior to Angular CLI 6, configuration was located in the angular-cli.json file:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

This configuration method requires migration to the new configuration structure when upgrading projects to newer versions.

Alternative Configuration Approaches

Beyond configuration files, other methods can simplify development server startup:

Package.json Script Configuration

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

Using the npm start command starts the pre-configured development server.

System Alias Configuration

In Unix-like systems, shell aliases can simplify commands:

alias ngserve="ng serve --host foo.bar --port 80"

This approach is suitable for development environments requiring consistent configuration across multiple projects.

Configuration Best Practices

In actual project development, it's recommended to choose appropriate configuration methods based on team needs and deployment environments:

• Team development projects are recommended to use angular.json configuration files
• Personal projects may consider using package.json scripts to simplify operations
• Cross-project unified configuration is suitable for system aliases

Proper development server configuration not only improves development efficiency but also ensures consistency in team collaboration.