如何添加ProxyConfig以构建Angular7应用程序

Question

无法与代理配置一起构建应用程序。它按照NG服务或NPM运行开始的预期工作。我需要通过NPM运行构建或NG构建来完成这项工作。我可以将该文件夹部署到Tomcat WebApps并使其工作。谁可以帮我这个事？任何快速有帮助。

请找到下面的代码。

proxy.conf.json

const PROXY_CONFIG = [
    {
        context : [
            "/app-services"
        ],
        target : "http://52.0.0.0:8080",
        secure : false
    }
]
module.exports = PROXY_CONFIG;

angular.json

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

package.json

 {
      "name": "app-name",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve  --proxy-config proxy.conf.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "@ng-bootstrap/ng-bootstrap": "^4.0.1",
        "@yellowspot/ng-truncate": "1.4.0",
        "bootstrap": "^4.2.1",
        "core-js": "^2.5.4",
        "jquery": "^3.3.1",
        "ng2-file-upload": "^1.3.0",
        "ngx-cookie-service": "2.1.0",
        "ngx-pagination": "^3.2.1",
        "popper.js": "^1.14.6",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "videogular2": "^6.4.0",
        "zone.js": "~0.8.26",
        "guid-typescript": "1.0.9"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.11.0",
        "@angular/cli": "~7.1.4",
        "@angular/compiler-cli": "~7.1.0",
        "@angular/language-service": "~7.1.0",
        "@types/core-js": "^2.5.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.1.6"
      }
    }

Answer 1

您无法做到。

Angular CLI使用引擎盖下的Webpack Dev服务器通过ng serve为您的应用程序提供服务。但是，当您构建应用程序时，CLI仅使用应用程序的静态文件构建捆绑包，因此您需要使用G.E创建自定义服务器配置。Express。