Angular 11 和 Zuul Gateway 开发热重载问题

如何解决Angular 11 和 Zuul Gateway 开发热重载问题

我正在使用 Angular 11 开发一个 Angular 应用程序。应用程序以开发模式在 http://localhost:4200 中运行。后端应用程序位于使用 Zuul 2.2 配置的网关后面，网址为 https://localhost:8447。当询问登录页面（或任何其他页面）时，我看到一些对 wss://localhost:8447 的请求被拒绝，并且此错误出现在浏览器中：

WebSocket connection to 'wss://localhost:8447/ui/sockjs-node/197/jxkw5ek0/websocket' Failed: Error during WebSocket handshake: Unexpected response code: 400

我想 Angular 正试图在 4200 端口对 Node 服务器进行热模式重新加载。

我在 package.json

做了这个修改

"start": "ng serve --base-href /ui/ --public-host http://localhost:4200/sockjs-node"

但是在这种情况下，浏览器中会出现这个错误：

zone-evergreen.js:2845 GET https://localhost:4200/ui/sockjs-node/info?t=1611158080859 net::ERR_SSL_PROTOCOL_ERROR

URL https://localhost:4200 不正确，因为 Angular 部署在非安全端口

有什么问题吗？这是由于 Webpack 或 Angular 中的错误造成的吗？

package.json
{
  "name": "xxxx","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve --base-href /ui/","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"
  },"private": true,"dependencies": {
    "@angular/animations": "~11.0.5","@angular/common": "~11.0.5","@angular/compiler": "~11.0.5","@angular/core": "~11.0.5","@angular/forms": "~11.0.5","@angular/platform-browser": "~11.0.5","@angular/platform-browser-dynamic": "~11.0.5","@angular/router": "~11.0.5","rxjs": "~6.6.0","tslib": "^2.0.0","zone.js": "~0.10.2"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5","@angular/cli": "~11.0.5","@angular/compiler-cli": "~11.0.5","@types/jasmine": "~3.6.0","@types/node": "^12.11.1","codelyzer": "^6.0.0","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.1.0","karma-chrome-launcher": "~3.1.0","karma-coverage": "~2.0.3","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~4.0.2"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "otaplatform-ui": {
      "projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist/xxxxxxx","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
              "src/favicon.ico","src/assets"
            ],"styles": [
              "src/styles.css"
            ],"scripts": []
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "2mb","maximumError": "5mb"
                },{
                  "type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
                }
              ]
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "xxxxxxxxxxx:build"
          },"configurations": {
            "production": {
              "browserTarget": "xxxxxxxxxxx:build:production"
            }
          }
        },"extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n","options": {
            "browserTarget": "xxxxxxxxxxx:build"
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","scripts": []
          }
        },"lint": {
          "builder": "@angular-devkit/build-angular:tslint","options": {
            "tsConfig": [
              "tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        },"e2e": {
          "builder": "@angular-devkit/build-angular:protractor","options": {
            "protractorConfig": "e2e/protractor.conf.js","devServerTarget": "xxxxxxxxxxx:serve"
          },"configurations": {
            "production": {
              "devServerTarget": "xxxxxxxxxxx:serve:production"
            }
          }
        }
      }
    }
  },"defaultProject": "xxxxxxxxxxx"
}

解决方法

最后我决定使用 --ssl 标志

"start": "ng serve --base-href /ui/ --ssl --ssl-key ssl/localhost.key --ssl-cert ssl/localhost.crt --public-host localhost:4200"

并重定向到 Zuul 中的 https://localhost:4200 以解决问题。

这不是最好的解决方案，但它有效。可能这个问题是 Angular 11 版本的问题，我没查