时间戳

首页 > 解决方案 > JHipster - Create a new Angular Front End Environment

angular - JHipster - Create a new Angular Front End Environment

问题描述

I have deployed on a NGnix server a JHipster (6.10.1) generated Angular FrontEnd. I would like to deploy this FrontEnd relying on some specific environment configuration(dev, prod, staging, etc.)

I know it is possible with Angular to customize the configuration by using/creating some files like :

and using the ng build --configuration=staging

What kind of parameters should I add in the package.json file to select the correct environment using a npm run build:<ENV> command?

Regards...

UPDATE 08/09

Thank you millenion, I would like to use only native Angular solution as you've described. Unfortunately, as I use JHipser, it would be better that I just extend what does already exist instead of creating a different way to deploy others environments. That means it would be better to have counterpart solution to the existing ones, based on webpack.

Nonetheless, all the necessary modifications (that you've described) in the angular.json file had already been done. There are many plugins and loaders in the webpack.common.js and in the webpack.prod.js that I would like to be used while deploying in lower environments.

For example there are the kind of plugins in the 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
        })
    ]

The interesting plugins are DefinePlugin and AngularCompilerPlugin

To deploy an Angular app, relying on webpack and some specific configurations, I guess I need to load some variables took from the environment.<env_name>.ts file, send them to the DefinePlugin which feeds the AngularCompilerPlugin plugin.

There are the scripts located in the package.json file :

"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"
  }

Finally, the question, is most likely : How can I pass parameters in such a way the following command :

npm run webpack:staging:main

deploys the app with the staging environment configuration?

Fred

标签： angularwebpackconfigurationjhipsterenvironment

解决方案

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

推荐阅读