generator-jhipster 7.5.0 → 7.6.0

package/generators/client/templates/react/tsconfig.e2e.json.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/tsconfig.json.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/tsconfig.test.json.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/webpack/environment.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/webpack/utils.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/webpack/webpack.common.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/react/webpack/webpack.dev.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.
@@ -114,8 +114,8 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
         host: 'localhost',
         port: 9000,
         proxy: {
-          target: `http${options.tls ? 's' : ''}://localhost:<%= devServerPort %>`<% if (communicationSpringWebsocket) { %>,
-          ws: true<% } %>,
+          target: `http${options.tls ? 's' : ''}://localhost:<%= devServerPort %>`,
+          ws: true,
           proxyOptions: {
               changeOrigin: false  //pass the Host header to the backend unchanged  https://github.com/Browsersync/browser-sync/issues/430
           }

package/generators/client/templates/react/webpack/webpack.prod.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/vue/.eslintrc.js.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.
@@ -16,32 +16,32 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
+require("@rushstack/eslint-patch/modern-module-resolution");
+
 module.exports = {
-    root: true,
-    env: {
-      node: true,
-    },
-    extends: [
-      'plugin:vue/essential',
-      'eslint:recommended',
-      '@vue/typescript/recommended',
-      '@vue/prettier',
-      '@vue/prettier/@typescript-eslint',
-    ],
-    parserOptions: {
-      ecmaVersion: 2020,
-      project: ['./tsconfig.spec.json'],
-    },
-    rules: {
-      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'vue/multi-word-component-names': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-var-requires': 'off',
-    },
-    'ignorePatterns': ['<%= BUILD_DIR %>'],
-  };
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    project: ['./tsconfig.spec.json'],
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+  },
+  'ignorePatterns': ['<%= BUILD_DIR %>'],
+};

package/generators/client/templates/vue/package.json

@@ -3,68 +3,67 @@
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "2.0.6",
-    "axios": "0.24.0",
+    "axios": "0.25.0",
     "bootstrap": "4.6.1",
     "bootstrap-vue": "2.21.2",
     "bootswatch": "5.1.3",
-    "swagger-ui-dist": "4.1.3",
+    "swagger-ui-dist": "4.2.1",
     "vue": "2.6.14",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
     "vue-router": "3.5.3",
-    "vue-i18n": "8.26.8",
+    "vue-i18n": "8.27.0",
     "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.7",
     "vuex": "3.6.2",
     "vue2-filters": "0.14.0"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "1.1.0",
     "@types/jest": "27.4.0",
-    "@types/node": "16.11.17",
-    "@types/sinon": "10.0.6",
+    "@types/node": "16.11.21",
+    "@types/sinon": "10.0.8",
     "@types/vuelidate": "0.7.15",
-    "@typescript-eslint/eslint-plugin": "5.8.1",
-    "@typescript-eslint/parser": "5.8.1",
-    "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "9.1.0",
+    "@vue/eslint-config-prettier": "7.0.0",
+    "@vue/eslint-config-typescript": "10.0.0",
     "@vue/vue2-jest": "27.0.0-alpha.3",
     "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.4.1",
+    "autoprefixer": "10.4.2",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.0",
+    "copy-webpack-plugin": "10.2.1",
     "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "3.3.1",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "folder-hash": "4.0.1",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "html-webpack-plugin": "5.5.0",
-    "jest": "27.4.5",
+    "jest": "27.4.7",
     "jest-junit": "13.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.4.5",
+    "mini-css-extract-plugin": "2.5.2",
     "numeral": "2.0.6",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.45.2",
+    "sass": "1.49.0",
     "sass-loader": "12.4.0",
     "sinon": "12.0.1",
     "terser-webpack-plugin": "5.3.0",
-    "ts-jest": "27.1.2",
+    "ts-jest": "27.1.3",
     "ts-loader": "9.2.6",
-    "eslint": "8.5.0",
-    "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-vue": "8.2.0",
-    "typescript": "4.5.4",
-    "webpack": "5.65.0",
+    "eslint": "8.7.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-vue": "8.3.0",
+    "typescript": "4.5.5",
+    "webpack": "5.66.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.7.2",
+    "webpack-dev-server": "4.7.3",
     "webpack-merge": "5.8.0",
     "workbox-webpack-plugin": "6.4.2",
     "vue-jest": "3.0.7",

package/generators/client/templates/vue/package.json.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.
@@ -38,8 +38,9 @@
     "dayjs": "<%= dependabotPackageJson.dependencies['dayjs'] %>",
     "swagger-ui-dist": "<%= dependabotPackageJson.dependencies['swagger-ui-dist'] %>",
 <%_ if (communicationSpringWebsocket) { _%>
-    "sockjs-client": "1.1.4",
-    "webstomp-client": "1.2.0",
+    "sockjs-client": "1.5.2",
+    "@stomp/rx-stomp": "1.1.4",
+    "rxjs": "7.4.0",
 <%_ } _%>
     "vue": "<%= dependabotPackageJson.dependencies['vue'] %>",
     "vue-class-component": "<%= dependabotPackageJson.dependencies['vue-class-component'] %>",
@@ -66,12 +67,11 @@
     "ts-node": "8.10.1",
     "webdriver-manager": "12.1.8",
 <%_ } _%>
+    "@rushstack/eslint-patch": "<%= dependabotPackageJson.devDependencies['@rushstack/eslint-patch'] %>",
     "@types/jest": "<%= dependabotPackageJson.devDependencies['@types/jest'] %>",
     "@types/node": "<%= dependabotPackageJson.devDependencies['@types/node'] %>",
     "@types/sinon": "<%= dependabotPackageJson.devDependencies['@types/sinon'] %>",
     "@types/vuelidate": "<%= dependabotPackageJson.devDependencies['@types/vuelidate'] %>",
-    "@typescript-eslint/eslint-plugin": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/eslint-plugin'] %>",
-    "@typescript-eslint/parser": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/parser'] %>",
     "@vue/eslint-config-prettier": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-prettier'] %>",
     "@vue/eslint-config-typescript": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= dependabotPackageJson.devDependencies['@vue/test-utils'] %>",

package/generators/client/templates/vue/src/main/webapp/app/account/account.service.ts.ejs

@@ -5,10 +5,6 @@ import VueRouter from 'vue-router';
 import TranslationService from '@/locale/translation.service';
 <%_ } _%>
 
-<%_ if (communicationSpringWebsocket) { _%>
-import TrackerService from '@/admin/tracker/tracker.service';
-<%_ } _%>
-
 export default class AccountService {
 
   constructor(
@@ -18,9 +14,6 @@ export default class AccountService {
 <%_ } _%>
 <%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>
     private cookie: any,
-<%_ } _%>
-<%_ if (communicationSpringWebsocket) { _%>
-    private trackerService: TrackerService,
 <%_ } _%>
     private router: VueRouter
   ) {
@@ -60,9 +53,6 @@ export default class AccountService {
             this.router.replace(sessionStorage.getItem("requested-url"));
             sessionStorage.removeItem("requested-url");
           }
-<%_ if (communicationSpringWebsocket) { _%>
-          this.trackerService.connect();
-<%_ } _%>
         } else {
           this.store.commit('logout');
           if (this.router.currentRoute.path !== '/') {

package/generators/client/templates/vue/src/main/webapp/app/admin/tracker/tracker.component.ts.ejs

@@ -1,4 +1,5 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
+import { Subscription } from 'rxjs';
 
 import TrackerService from './tracker.service';
 
@@ -6,6 +7,7 @@ import TrackerService from './tracker.service';
 export default class <%=jhiPrefixCapitalized%>TrackerComponent extends Vue {
 
   public activities: any[] = [];
+  private subscription?: Subscription;
 
   @Inject('trackerService') private trackerService: () => TrackerService;
 
@@ -14,16 +16,16 @@ export default class <%=jhiPrefixCapitalized%>TrackerComponent extends Vue {
   }
 
   public destroyed(): void {
-    this.trackerService().unsubscribe();
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
   }
 
   public init(): void {
-    this.trackerService().subscribe();
-    this.trackerService()
-      .receive()
-      .subscribe(activity => {
-        this.showActivity(activity);
-      });
+    this.subscription = this.trackerService().subscribe(activity => {
+      this.showActivity(activity);
+    });
   }
 
   public showActivity(activity: any): void {

package/generators/client/templates/vue/src/main/webapp/app/admin/tracker/tracker.service.ts.ejs

@@ -1,107 +1,113 @@
 import * as SockJS from 'sockjs-client';
-import * as Stomp from 'webstomp-client';
-import { Observable, Observer } from 'rxjs';
+import { Observer, map } from 'rxjs';
 import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import { RxStomp } from '@stomp/rx-stomp';
 
-export default class TrackerService {
-
-  public stompClient: Stomp.Client = null;
-  public subscriber: any = null;
-  public connection: Promise<any>;
-  public connectedPromise: any = null;
-  public listener: Observable<any>;
-  public listenerObserver: Observer<any> = null;
-  public alreadyConnectedOnce = false;
+import { AccountStateStorable } from '@/shared/config/store/account-store';
 
-  private router: VueRouter;
+const DESTINATION_TRACKER = '/topic/tracker';
+const DESTINATION_ACTIVITY = '/topic/activity';
 
-  constructor(router: VueRouter<%_ if (authenticationTypeSession) { _%>, private cookie: any<%_ } _%>) {
-    this.router = router;
-    this.connection = this.createConnection();
-    this.listener = this.createListener();
-  }
+export default class TrackerService {
+  private rxStomp: RxStomp;
 
-  public connect(): void {
-    if (this.connectedPromise === null) {
-      this.connection = this.createConnection();
-    }
-    // building absolute path so that websocket doesn't fail when deploying with a context path
-    const loc = window.location;
-    const baseHref = document.querySelector('base').getAttribute('href');
-<%_ if (authenticationTypeJwt) { _%>
-    let url = '//' + loc.host + baseHref + 'websocket/tracker';
-    const authToken = localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken');
-    if (authToken) {
-      url += '?access_token=' + authToken;
-    }
-<%_ } else { _%>
-    const url = '//' + loc.host + baseHref + 'websocket/tracker';
-<%_ } _%>
-    const socket = new SockJS(url);
-    this.stompClient = Stomp.over(socket, { protocols: ['v12.stomp'] });
-    const headers = {};
+  constructor(
+      private router: VueRouter,
+      private store: Store<AccountStateStorable>,
 <%_ if (authenticationTypeSession) { _%>
-    headers['X-XSRF-TOKEN'] = this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN');
+      private cookie: any,
 <%_ } _%>
-    this.stompClient.connect(headers, () => this.afterConnect());
+    ) {
+    this.stomp = new RxStomp();
+    this.router.afterEach(() => this.sendActivity());
+
+    this.store.watch(
+      (_state, getters) => getters.authenticated,
+      (value, oldValue) => {
+        if (value === oldValue) return;
+        if (value) {
+          return this.connect();
+        }
+        return this.disconnect();
+      }
+    );
   }
 
-  public afterConnect() {
-    this.connectedPromise('success');
-    this.connectedPromise = null;
-    this.sendActivity();
-    if (!this.alreadyConnectedOnce) {
-      this.router.afterEach(() => this.sendActivity());
-      this.alreadyConnectedOnce = true;
-    }
+  get stomp() {
+    return this.rxStomp;
   }
 
-  public disconnect(): void {
-    if (this.stompClient !== null) {
-      this.stompClient.disconnect();
-      this.stompClient = null;
-    }
-    this.router.afterEach(() => {});
-    this.alreadyConnectedOnce = false;
+  set stomp(rxStomp) {
+    this.rxStomp = rxStomp;
+    this.rxStomp.configure({
+      debug: (msg: string): void => {
+        console.log(new Date(), msg);
+      },
+    });
+    this.rxStomp.connected$.subscribe(() => {
+      this.sendActivity();
+    });
   }
 
-  public receive(): Observable<any> {
-    return this.listener;
+  private connect(): void {
+    this.updateCredentials();
+    return this.rxStomp.activate();
   }
 
-  public sendActivity(): void {
-    if (this.stompClient !== null && this.stompClient.connected) {
-      this.stompClient.send(
-        '/topic/activity', // destination
-        JSON.stringify({ page: this.router.currentRoute.fullPath }), // body
-        {} // header
-      );
-    }
+  private disconnect(): Promise<void> {
+    return this.rxStomp.deactivate();
   }
+<%_ if (authenticationTypeJwt) { _%>
 
-  public subscribe(): void {
-    this.connection.then(() => {
-      this.subscriber = this.stompClient.subscribe('/topic/tracker', data => {
-        this.listenerObserver.next(JSON.parse(data.body));
-      });
-    });
+  private getAuthToken() {
+    const authToken = localStorage.getItem('jhi-authenticationToken') || sessionStorage.getItem('jhi-authenticationToken');
+  <%_ if (clientFrameworkAngular || clientFrameworkReact) { _%>
+    return JSON.parse(authToken);
+  <%_ } else { _%>
+    return authToken;
+  <%_ } _%>
   }
+<%_ } _%>
 
-  public unsubscribe(): any {
-    if (this.subscriber !== null) {
-      this.subscriber.unsubscribe();
+  private buildUrl(): string {
+    // building absolute path so that websocket doesn't fail when deploying with a context path
+    const loc = window.location;
+    const baseHref = document.querySelector('base').getAttribute('href');
+    const url = '//' + loc.host + baseHref + 'websocket/tracker';
+<%_ if (authenticationTypeJwt) { _%>
+    const authToken = this.getAuthToken();
+    if (authToken) {
+      return `${url}?access_token=${authToken}`;
     }
-    this.listener = this.createListener();
+<%_ } _%>
+    return url;
   }
 
-  public createListener(): any {
-    return new Observable(observer => {
-      this.listenerObserver = observer;
+  private updateCredentials(): void {
+    this.rxStomp.configure({
+      webSocketFactory: () => {
+        return new SockJS(this.buildUrl());
+      },
+<%_ if (authenticationTypeSession) { _%>
+      connectHeaders: {
+        ['X-XSRF-TOKEN']: this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'),
+      }
+<%_ } _%>
     });
   }
 
-  public createConnection(): Promise<any> {
-    return new Promise((resolve, reject) => (this.connectedPromise = resolve));
+  private sendActivity(): void {
+    this.rxStomp.publish({
+      destination: DESTINATION_ACTIVITY,
+      body: JSON.stringify({ page: this.router.currentRoute.fullPath }),
+    });
   }
 
+  public subscribe(observer) {
+    return this.rxStomp
+      .watch(DESTINATION_TRACKER)
+      .pipe(map(imessage => JSON.parse(imessage.body)))
+      .subscribe(observer);
+  }
 };

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-edit.component.ts.ejs

@@ -37,7 +37,7 @@ const validations: any = {
   validations
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public userAccount: IUser;

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-view.component.ts.ejs

@@ -5,7 +5,7 @@ import AlertService from '@/shared/alert/alert.service';
 
 @Component
 export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public user: any = null;

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -7,7 +7,7 @@ import AlertService from '@/shared/alert/alert.service';
   mixins: [Vue2Filters.mixin]
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends Vue {
-  @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('userManagementService') private userManagementService: () => UserManagementService;
   @Inject('alertService') private alertService: () => AlertService;
 
   public error = '';

package/generators/client/templates/vue/src/main/webapp/app/constants.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/vue/src/main/webapp/app/declarations.d.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/vue/src/main/webapp/app/index.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/vue/src/main/webapp/app/main.ts.ejs

@@ -20,6 +20,7 @@ import ConfigurationService from '@/admin/configuration/configuration.service';
 <%_ if (!skipUserManagement) { _%>
 import ActivateService from './account/activate/activate.service';
 import RegisterService from './account/register/register.service';
+import UserManagementService from './admin/user-management/user-management.service';
 <%_ } _%>
 import LoginService from './account/login.service';
 import AccountService from './account/account.service';
@@ -57,13 +58,13 @@ const i18n = config.initI18N(Vue);
 const store = config.initVueXStore(Vue);
 
 <%_ if (communicationSpringWebsocket) { _%>
-const trackerService = new TrackerService(router<%_ if (authenticationTypeSession) { _%>, (<any>Vue).cookie<%_ } _%>);
+const trackerService = new TrackerService(router, store<%_ if (authenticationTypeSession) { _%>, (<any>Vue).cookie<%_ } _%>);
 <%_ } _%>
 <%_ if (enableTranslation) { _%>
 const translationService = new TranslationService(store, i18n);
 <%_ } _%>
 const loginService = new LoginService();
-const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%><%_ if (communicationSpringWebsocket) { _%>trackerService, <%_ } _%>router);
+const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%>router);
 
 router.beforeEach(async (to, from, next) => {
   if (!to.matched.length) {
@@ -102,6 +103,7 @@ new Vue({
 <%_ if (!skipUserManagement) { _%>
     activateService: () => new ActivateService(),
     registerService: () => new RegisterService(),
+    userManagementService: () => new UserManagementService(),
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { %>
     gatewayService: () => new GatewayService(),

package/generators/client/templates/vue/src/main/webapp/app/shared/config/axios-interceptor.ts.ejs

@@ -1,5 +1,5 @@
 <%#
- Copyright 2013-2021 the original author or authors from the JHipster project.
+ Copyright 2013-2022 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.

package/generators/client/templates/vue/src/main/webapp/app/shared/config/formatter.ts.ejs

@@ -27,8 +27,8 @@ export default class <%=jhiPrefixCapitalized%>Formatter {
 
   constructor() {
       this.caches = Object.create(null);
-      this.leftBraces = new RegExp("{{ |{{", "g");
-      this.rightBraces = new RegExp(" }}|}}", "g");
+      this.leftBraces = /{{ |{{/g;
+      this.rightBraces = / }}|}}/g;
   }
 
   interpolate(message: string, values: any): Array<any> {