检查数组值时Jhipster webpack编译错误

Question

我正在使用带有 Angular 的 Jhipster。我有一个方法试图检查用户是否以管理员身份。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { IPost } from 'app/shared/model/post.model';
import { AccountService } from 'app/core/auth/account.service';
import { Subscription } from 'rxjs';
import { Account } from 'app/core/user/account.model';

@Component({
  selector: 'jhi-post-detail',
  templateUrl: './post-detail.component.html'
})
export class PostDetailComponent implements OnInit {
  post: IPost | null = null;
  authSubscription!: Subscription;
  account: Account | null = null;

  constructor(protected activatedRoute: ActivatedRoute, private accountService: AccountService) { }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(({ post }) => (this.post = post));
    this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
  }

  previousState(): void {
    window.history.back();
  }

  private isAdmin(): boolean | undefined {
    return this.account?.authorities.includes('ROLE_ADMIN');
  }
}

编译代码时出现错误

ERROR in ./src/main/webapp/app/entities/post/post-detail.component.ts 21:30
Module parse failed: Unexpected token (21:30)
File was processed with these loaders:
 * ./node_modules/angular2-template-loader/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|     }
|     isAdmin() {
>         return this.account ? .authorities.includes('ROLE_ADMIN') : ;
|     }
| };
ℹ ｢wdm｣: Failed to compile.

作为一种解决方法，如果我只是在 isAdmin() 方法中将返回值硬编码为“true”，则它可以工作并编译。为什么只是检查数组是否包含某些东西会导致 webpack 崩溃？

Answer 1

Optional chaining 是在 Typescript 3.7 中引入的，当前的 JHipster 6.7.1 使用 Typescript 3.4.5，所以你的表达式没有被理解和翻译为三元运算符也就不足为奇了。

尝试升级 package.json 和 npm install 中的 typescript 版本，看看是否解决。