JHipster - 创建一个新的 Angular 前端环境

Question

我在 NGnix 服务器上部署了一个 JHipster (6.10.1) 生成的 Angular FrontEnd。 我想根据一些特定的环境配置（dev、prod、staging 等）来部署这个 FrontEnd

我知道 Angular 可以通过使用/创建一些文件来自定义配置，例如：

• environment.dev.ts
• environment.prod.ts
• environment.staging.ts

并使用ng build --configuration=staging

我应该在 package.json 文件中添加什么样的参数来使用npm run build:<ENV> 命令选择正确的环境？

问候...

更新 08/09

谢谢你，我只想使用你描述的原生 Angular 解决方案。不幸的是，当我使用 JHipser 时，我最好只扩展已经存在的内容，而不是创建一种不同的方式来部署其他环境。这意味着最好有基于 webpack 的现有解决方案的对应解决方案。

尽管如此，angular.json 文件中的所有必要修改（您已描述）都已完成。 webpack.common.js 和 webpack.prod.js 中有很多插件和加载器，我希望在较低环境中部署时使用它们。

例如 webpack.common.js 中的那种插件：

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {            
                NODE_ENV: `'${options.env}'`,
                BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
                // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
                VERSION: `'${process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV'}'`,
                DEBUG_INFO_ENABLED: options.env === 'development',
                // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
                // If this URL is left empty (""), then it will be relative to the current context.
                // If you use an API server, in `prod` mode, you will need to enable CORS
                // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
                SERVER_API_URL: `''`
            }

        }),
        new CopyWebpackPlugin([
            { from: './node_modules/swagger-ui-dist/*.{js,css,html,png}', to: 'swagger-ui', flatten: true, ignore: ['index.html'] },
            { from: './node_modules/axios/dist/axios.min.js', to: 'swagger-ui' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/content/', to: 'content' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
            // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' }
        ]),
        new HtmlWebpackPlugin({
            template: './src/main/webapp/index.html',
            chunks: ['polyfills', 'main', 'global'],
            chunksSortMode: 'manual',
            inject: 'body'
        }),
        new BaseHrefWebpackPlugin({ baseHref: '/' }),
        new AngularCompilerPlugin{
            mainPath: utils.root('src/main/webapp/app/app.main.ts'),
            tsConfigPath: utils.root('tsconfig.app.json'),
            sourceMap: true
        })
    ]

有趣的插件是 DefinePlugin 和 AngularCompilerPlugin

要部署一个 Angular 应用程序，依赖于 webpack 和一些特定的配置，我想我需要加载一些从 environment..ts 文件中获取的变量，将它们发送到 DefinePlugin 提供 AngularCompilerPlugin 插件。

package.json 文件中有脚本：

"scripts": {
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,css,scss,yml}\"",
    "lint": "eslint . --ext .js,.ts",
    "lint:fix": "npm run lint -- --fix",
    "ngc": "ngc -p tsconfig.app.json",
    "cleanup": "rimraf target/classes/static/ target/classes/aot",
    "clean-www": "rimraf target/classes/static/app/{src,target/}",
    "start": "npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "serve": "npm run start",
    "build": "npm run webpack:prod",
    "test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
    "test:watch": "npm run test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-www",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  }

最后，最有可能的问题是： 如何通过以下命令以这种方式传递参数：

npm run webpack:staging:main

使用暂存环境配置部署应用程序？

弗雷德

Answer 1

您可以通过在 angular.json 文件中添加适当的配置来做到这一点。

在您的情况下，您可能希望在角度示意图中添加一个新块并添加如下内容：

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.staging.ts"
            }
          ],

对于您的新环境，我建议将其基于“生产”或“开发”块，具体取决于您期望的行为。 传递参数时要小心：

npm run build -- --staging

关于你的 package.json，我通常使用两个选项：outputPath 和 deleteOutputPath。第二个很高兴获得一个干净的目录。没必要，但很方便：

"build:staging": "ng build --staging --outputPath=YourOutputPath --deleteOutputPath=true",

这样你就可以做到：

npm run build:staging

如果您想将 SSR 添加到您的项目中，这将需要更多的工作，尽管它比当时容易得多。

完整的文档可能会有所帮助 => https://angular.io/cli/build