检查数组值时 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() 方法中将 return 值硬编码为 'true'，它就可以工作并编译。为什么只是检查数组是否包含某些东西会导致 webpack 崩溃？

Answer 1

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

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

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

Jhipster webpack compilation error when checking an array value

arrays

typescript

jhipster

webpack

angular