我如何在 angular 6 通用中获得环境 process.NODE_ENV=server.ts 中的开发

Question

app.listen(PORT, () => {
  console.log("process.env.NODE_ENV", process.env.NODE_ENV);
  console.log(`Node server listening on http://localhost:${PORT}`);
});

我正在控制台process.env.NODE_ENV 'none'

构建命令

npm run build:alpha:ssr NODE_ENV=alpha

我的package.json文件

{
  "name": "mobilesite-ecommerce",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -c local",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod --deploy-url=##scripturl## && ng run mobilesite-ecommerce:server:production",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "generate:prerender": "cd dist && node prerender",
    "serve:prerender": "cd dist/browser && http-server",
    "build:local:ssr": "npm run build:local:client-and-server-bundles && npm run webpack:local:server",
    "serve:local:ssr": "node dist/server",
    "build:local:client-and-server-bundles": "ng build -c local && ng run mobilesite-ecommerce:server:local",
    "webpack:local:server": "webpack --config webpack.server.config.js --progress --colors",
    "build:development:ssr": "npm run build:development:client-and-server-bundles && npm run webpack:development:server",
    "serve:development:ssr": "node dist/server",
    "build:development:client-and-server-bundles": "ng build -c development && ng run mobilesite-ecommerce:server:development",
    "webpack:development:server": "webpack --config webpack.server.config.js --progress --colors",
    "build:alpha:ssr": "npm run build:alpha:client-and-server-bundles && npm run webpack:alpha:server",
    "serve:alpha:ssr": "node dist/server",
    "build:alpha:client-and-server-bundles": "ng build --prod -c alpha --deploy-url=##scripturl## && ng run mobilesite-ecommerce:server:alpha",
    "webpack:alpha:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.6",
    "@angular/common": "6.0.6",
    "@angular/compiler": "6.0.6",
    "@angular/core": "6.0.6",
    "@angular/forms": "6.0.6",
    "@angular/http": "6.0.6",
    "@angular/platform-browser": "6.0.6",
    "@angular/platform-browser-dynamic": "6.0.6",
    "@angular/platform-server": "^6.0.6",
    "@angular/router": "6.0.6",
    "@angular/service-worker": "6.0.6",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-brands-svg-icons": "^5.1.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
    "@ng-bootstrap/ng-bootstrap": "^2.1.1",
    "@nguniversal/common": "^6.0.0",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-share/core": "^6.0.1",
    "angular-6-social-login": "^1.1.1",
    "bootstrap": "^4.1.1",
    "compression": "^1.7.3",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hiredis": "^0.5.0",
    "localstorage-polyfill": "^1.0.1",
    "mock-browser": "^0.92.14",
    "ng-lazyload-image": "^4.0.0",
    "ngx-swiper-wrapper": "^6.3.0",
    "node-sass": "^4.7.2",
    "redis": "^2.8.0",
    "redis-server": "^1.2.2",
    "rxjs": "^6.2.1",
    "sourcebuster": "^1.1.0",
    "ts-loader": "^4.4.1",
    "webpack-cli": "^3.0.8",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "6.0.6",
    "@angular/language-service": "6.0.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/youtube": "0.0.31",
    "codelyzer": "^4.0.1",
    "express": "^4.16.3",
    "http-server": "^0.11.1",
    "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.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.7.2"
  }
}

Answer 1

您需要在命令前设置环境变量：

NODE_ENV=alpha npm run build:alpha:ssr

Answer 2

有一个 webpack 插件可以让你定义环境变量。

我在 webpack.server.config.ts 中将其添加到我的插件中，它为我解决了这个问题：

module.exports = {
    ...
    plugins: [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ],
    ...
};

文档参考： https://webpack.js.org/plugins/environment-plugin/

Answer 3

webpack = require("webpack"); 
env = process.env.NODE_ENV || 'none'; 
module.exports = { plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(env) }) ] };

NODE_ENV=alpha npm run build:alpha:ssr

我如何在 angular 6 通用中获得环境 process.NODE_ENV=server.ts 中的开发

How do I get environmment process.NODE_ENV=development in server.ts in angular 6 universal

variables

environment

server-side-rendering

angular-universal