angular - 努力使用生产配置启动 Angular 应用程序

Question

我创建了一个 angular 8 应用程序并使用 docker 为其提供服务。
我使用 RUN npm run build --env=prod --prod以生产模式构建应用程序，如多个在线教程中所述。

如果我使用 Dockerfile 和 npm run build --prod 启动我的应用程序命令始终将使用开发配置(使用 localhost:7000/api 调用 api 例如，而不是 some_url.de/api ..)

我不知道我做错了什么。在所有只有构建标签的教程中，正确的配置被选择了..

Dockerfile

FROM node:alpine AS build-stage

ARG env=prod

WORKDIR /app

# to use cache on node_modules
COPY package*.json /app/
RUN npm install

COPY . /app/
RUN npm run build --prod

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist/ /usr/share/nginx/html/

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

events {}

http{
    server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
        }
    }
}

在我的 main.ts我有这个片段:

if (environment.production) {
  enableProdMode();
}

在文件夹 src/app/environments我必须环境配置:

environment.ts

export const environment = {
  production: false,
  appURL: 'http://localhost:7000/api',
  dev_mode: false,
  show_all_tabs: true,
};

environment.prod.ts

export const environment = {
    production: true,
    appURL: 'http://some_url.de/api',
    dev_mode: false,
    show_all_tabs: true,
  };

package.json

{
  "name": "test",
  "version": "1.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "5.2.2",
    "@angular/common": "5.2.2",
    "@angular/compiler": "5.2.2",
    "@angular/compiler-cli": "5.2.2",
    "@angular/core": "5.2.2",
    "@angular/forms": "5.2.2",
    "@angular/http": "5.2.2",
    "@angular/platform-browser": "5.2.2",
    "@angular/platform-browser-dynamic": "5.2.2",
    "@angular/platform-server": "5.2.2",
    "@angular/router": "5.2.2",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-charts": "^7.3.0",
    "@types/angular": "^1.6.54",
    "@types/file-saver": "^1.3.1",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "angular-2-local-storage": "^2.0.0",
    "angular2-multiselect-dropdown": "2.1.2",
    "bootstrap": "^4.3.1",
    "copy-webpack-plugin": "^4.5.3",
    "core-js": "2.4.1",
    "express": "^4.16.3",
    "file-saver": "^2.0.0-rc.4",
    "font-awesome": "4.7.0",
    "jquery": "^3.4.1",
    "jw-bootstrap-switch-ng2": "1.0.10",
    "ng2-nouislider": "1.6.1",
    "ng5-slider": "^1.2.1",
    "ngx-chips": "1.6.3",
    "ngx-gallery": "3.1.4",
    "ngx-pagination": "^4.0.0",
    "ngx-spinner": "^2.0.0",
    "nouislider": "9.2.0",
    "popper.js": "1.12.6",
    "rellax": "1.4.0",
    "rxjs": "5.5.6",
    "typescript": "2.6.1",
    "xlsx": "^0.15.5",
    "xml-writer": "^1.7.0",
    "zone.js": "0.8.4",
    "node-sass": "^4.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "5.2.2",
    "@angular/language-service": "4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.6.1"
  }
}

Answer 1

您需要将参数传递给 ng 构建，并且不能将它们直接传递给 npm。添加 --让 npm 知道接下来的参数不是针对它的，而是针对在脚本 package.json 中运行的 ng 命令。然后你可以通过--prod使用您的 environment.prod.ts 的参数。
例如RUN npm run build -- --prod