Angular/Ionic项目执行ng serve报错crbug/1173575求助

这个问题源于Chrome的已知解析bug，默认ng serve绑定localhost时会触发浏览器的非JS模块检测逻辑，换成127.0.0.1即可规避，以下是几种永久解决方法：

1. 单项目配置（仅当前项目生效） #

修改项目根目录下的angular.json文件：

• 定位到projects -> [你的项目名] -> architect -> serve -> options节点
• 添加"host": "127.0.0.1"配置，示例如下：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "testProject:build",
    "host": "127.0.0.1"
  },
  "configurations": {
    "production": {
      "browserTarget": "testProject:build:production"
    }
  }
}

保存后直接执行ng serve即可正常启动。

2. 全局配置（所有Angular/Ionic项目生效） #

配置全局Angular CLI默认参数，避免每个项目重复设置：

• 执行命令ng config --global defaults.serve.host 127.0.0.1，自动生成全局配置；
• 若需手动修改，找到全局配置文件：
  • Linux/macOS：~/.angular-config.json
  • Windows：%APPDATA%\angular\config.json
    添加如下节点：

"defaults": {
  "serve": {
    "host": "127.0.0.1"
  }
}

3. 系统hosts文件修正（可选） #

确保系统hosts文件中localhost正确指向127.0.0.1：

• Windows：编辑C:\Windows\System32\drivers\etc\hosts，添加或确保存在127.0.0.1 localhost
• Linux/macOS：编辑/etc/hosts，添加或确保存在127.0.0.1 localhost
• 保存后刷新DNS缓存：
  • Windows：执行ipconfig /flushdns
  • Linux/macOS：执行sudo dscacheutil -flushcache（macOS）或sudo systemctl restart nscd（Linux）

内容的提问来源于stack exchange，提问作者Dynames Gundam