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

如何解决JHipster-创建一个新的Angular前端环境

我已经在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

我应该在{strong> 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/',{ 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

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

package.json 文件中包含脚本：

"scripts": {
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,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

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

弗雷德

解决方法

您可以通过在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

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

如何解决JHipster-创建一个新的Angular前端环境

解决方法

相关推荐