angular: Switch to Angular CLI

jhipster · Oct 25, 2020 · 805e5cc · 805e5cc
1 parent 1833467
commit 805e5cc
Show file tree

Hide file tree

Showing 31 changed files with 417 additions and 646 deletions.
diff --git a/generators/cleanup.js b/generators/cleanup.js
@@ -20,7 +20,7 @@
 const constants = require('./generator-constants');
 const { languageSnakeCase, languageToJavaLanguage } = require('./utils');
 
-const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, SERVER_MAIN_RES_DIR, ANGULAR_DIR, REACT_DIR, VUE_DIR } = constants;
+const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, SERVER_MAIN_RES_DIR, ANGULAR_DIR, REACT_DIR, VUE_DIR, CLIENT_WEBPACK_DIR } = constants;
 
 const { ANGULAR, REACT, VUE } = constants.SUPPORTED_CLIENT_FRAMEWORKS;
 
@@ -119,11 +119,19 @@ function cleanupOldFiles(generator) {
             generator.removeFile(`${ANGULAR_DIR}shared/login/login.component.ts`);
             generator.removeFile(`${ANGULAR_DIR}shared/login/login.component.html`);
             generator.removeFile(`${ANGULAR_DIR}core/auth/user-route-access-service.ts`);
+            generator.removeFile(`${CLIENT_WEBPACK_DIR}webpack.common.js`);
+            generator.removeFile(`${CLIENT_WEBPACK_DIR}webpack.dev.js`);
+            generator.removeFile(`${CLIENT_WEBPACK_DIR}webpack.prod.js`);
+            generator.removeFile(`${CLIENT_WEBPACK_DIR}utils.js`);
             generator.removeFile('tsconfig.base.json');
+            generator.removeFile('postcss.config.js');
+            generator.removeFile('proxy.conf.json');
             generator.removeFile(`${CLIENT_TEST_SRC_DIR}spec/app/admin/audits/audits.component.spec.ts`);
             generator.removeFile(`${CLIENT_TEST_SRC_DIR}spec/app/admin/audits/audits.service.spec.ts`);
             generator.removeFile(`${CLIENT_TEST_SRC_DIR}spec/app/shared/login/login.component.spec.ts`);
             generator.removeFile(`${CLIENT_TEST_SRC_DIR}spec/test.module.ts`);
+            generator.removeFile(`${CLIENT_TEST_SRC_DIR}jest.ts`);
+            generator.removeFile(`${CLIENT_TEST_SRC_DIR}jest-global-mocks.ts`);
             generator.removeFolder(`${CLIENT_TEST_SRC_DIR}spec/helpers`);
             generator.removeFile('tslint.json');
         } else if (generator.jhipsterConfig.clientFramework === REACT) {

diff --git a/generators/client/files-angular.js b/generators/client/files-angular.js
@@ -29,16 +29,15 @@ const files = {
         {
             templates: [
                 'package.json',
-                'proxy.conf.json',
                 'tsconfig.json',
                 'tsconfig.app.json',
+                'tsconfig.spec.json',
                 '.eslintrc.json',
                 'angular.json',
-                'webpack/utils.js',
-                'webpack/webpack.common.js',
-                'webpack/webpack.dev.js',
-                'webpack/webpack.prod.js',
-                'postcss.config.js',
+                'ngsw-config.json',
+                'webpack/proxy.conf.js',
+                'webpack/webpack.custom.js',
+                '.browserslistrc',
                 { file: 'webpack/logo-jhipster.png', method: 'copy' },
             ],
         },
@@ -359,8 +358,6 @@ const files = {
             path: CLIENT_TEST_SRC_DIR,
             templates: [
                 'jest.conf.js',
-                'jest.ts',
-                'jest-global-mocks.ts',
                 'spec/app/admin/configuration/configuration.component.spec.ts',
                 'spec/app/admin/configuration/configuration.service.spec.ts',
                 'spec/app/admin/health/health.component.spec.ts',

diff --git a/generators/client/needle-api/needle-client-webpack.js b/generators/client/needle-api/needle-client-webpack.js
@@ -20,11 +20,15 @@ const needleClient = require('./needle-client');
 const constants = require('../../generator-constants');
 
 const CLIENT_WEBPACK_DIR = constants.CLIENT_WEBPACK_DIR;
+const SUPPORTED_CLIENT_FRAMEWORKS = constants.SUPPORTED_CLIENT_FRAMEWORKS;
 
 module.exports = class extends needleClient {
     copyExternalAssets(source, target) {
         const errorMessage = 'Resource path not added to JHipster app.';
-        const webpackDevPath = `${CLIENT_WEBPACK_DIR}/webpack.common.js`;
+        const webpackDevPath =
+            this.clientFramework === SUPPORTED_CLIENT_FRAMEWORKS.ANGULAR
+                ? `${CLIENT_WEBPACK_DIR}/webpack.custom.js`
+                : `${CLIENT_WEBPACK_DIR}/webpack.common.js`;
         let assetBlock = '';
         if (source && target) {
             assetBlock = `{ from: '${source}', to: '${target}' },`;

diff --git a/generators/client/needle-api/needle-client.js b/generators/client/needle-api/needle-client.js
@@ -23,6 +23,7 @@ module.exports = class extends needleBase {
         super(generator);
 
         this.CLIENT_MAIN_SRC_DIR = generator.CLIENT_MAIN_SRC_DIR;
+        this.clientFramework = generator.clientFramework;
 
         if (!this.CLIENT_MAIN_SRC_DIR) {
             generator.error('Client destination folder is missing');

diff --git a/generators/client/templates/angular/.browserslistrc.ejs b/generators/client/templates/angular/.browserslistrc.ejs
@@ -0,0 +1,36 @@
+<%#
+ Copyright 2013-2020 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/generators/client/templates/angular/angular.json.ejs b/generators/client/templates/angular/angular.json.ejs
@@ -25,6 +25,76 @@
       "root": "",
       "sourceRoot": "<%= MAIN_SRC_DIR.replace(/\/$/, "") %>",
       "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./webpack/webpack.custom.js"
+            },
+            "outputPath": "<%= DIST_DIR %>",
+            "index": "<%= MAIN_SRC_DIR %>index.html",
+            "main": "<%= MAIN_SRC_DIR %>app/app.main.ts",
+            "polyfills": "<%= MAIN_SRC_DIR %>app/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "<%= MAIN_SRC_DIR %>content",
+              "<%= MAIN_SRC_DIR %>favicon.ico",
+              "<%= MAIN_SRC_DIR %>manifest.webapp",
+              { "glob": "*.{js,css,html,png}", "input": "./node_modules/swagger-ui-dist", "output": "swagger-ui", "ignore": ["**/index.html"]  },
+              { "glob": "axios.min.js", "input": "./node_modules/axios/dist", "output": "swagger-ui" },
+              { "glob": "**/*", "input": "<%= MAIN_SRC_DIR %>swagger-ui/", "output": "swagger-ui" }
+            ],
+            "styles": ["<%= MAIN_SRC_DIR %>content/scss/global.scss", "<%= MAIN_SRC_DIR %>content/scss/vendor.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json",
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "browserTarget": "<%= dasherizedBaseName %>:build",
+            "proxyConfig": "./webpack/proxy.conf.js"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "<%= dasherizedBaseName %>:build:production"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run",
+          "options": {
+            "configPath": "<%= CLIENT_TEST_SRC_DIR %>jest.conf.js"
+          }
+        }
+      },
       "schematics": {
         "@schematics/angular:component": {
           "skipTests": true,
@@ -43,8 +113,7 @@
           "skipTests": true
         }
       },
-      "prefix": "<%= jhiPrefixDashed %>",
-      "architect": {}
+      "prefix": "<%= jhiPrefixDashed %>"
     }
   },
   "defaultProject": "<%= dasherizedBaseName %>",

diff --git a/generators/client/templates/angular/ngsw-config.json.ejs b/generators/client/templates/angular/ngsw-config.json.ejs
@@ -0,0 +1,30 @@
+{
+    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+    "index": "/index.html",
+    "assetGroups": [
+        {
+            "name": "app",
+            "installMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/favicon.ico",
+                    "/index.html",
+                    "/manifest.webapp",
+                    "/*.css",
+                    "/*.js"
+                ]
+            }
+        },
+        {
+            "name": "assets",
+            "installMode": "lazy",
+            "updateMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/content/**",
+                    "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+                ]
+            }
+        }
+    ]
+}
diff --git a/generators/client/templates/angular/package.json b/generators/client/templates/angular/package.json
@@ -19,36 +19,16 @@
   },
   "devDependencies": {
     "@angular/cli": "10.2.0",
-    "autoprefixer": "9.8.6",
+    "@angular-builders/custom-webpack": "10.0.1",
     "browser-sync": "2.26.13",
     "browser-sync-webpack-plugin": "2.2.2",
     "codelyzer": "6.0.1",
     "copy-webpack-plugin": "6.2.1",
-    "css-loader": "3.6.0",
     "eslint-loader": "4.0.2",
-    "file-loader": "6.1.1",
     "friendly-errors-webpack-plugin": "1.7.0",
-    "html-loader": "1.3.2",
-    "html-webpack-plugin": "4.5.0",
     "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "1.1.2",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
-    "postcss-loader": "3.0.0",
-    "sass": "1.27.0",
-    "sass-loader": "10.0.4",
     "simple-progress-webpack-plugin": "1.1.2",
-    "style-loader": "2.0.0",
-    "terser-webpack-plugin": "4.2.3",
-    "thread-loader": "3.0.0",
-    "to-string-loader": "1.1.6",
-    "ts-loader": "8.0.5",
-    "webpack": "4.44.2",
     "webpack-bundle-analyzer": "3.9.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.0",
-    "webpack-merge": "5.2.0",
-    "webpack-notifier": "1.8.0",
-    "workbox-webpack-plugin": "5.1.4",
-    "write-file-webpack-plugin": "4.5.1"
+    "webpack-notifier": "1.8.0"
   }
 }