模块解析失败：Angular 项目中出现意外字符“#”

Question

I am getting this error when I try to use private fields in an Angular Project.

Error: ./src/app/_helpers/sample.js 6:11
Module parse failed: Unexpected character '#' (6:11)
File was processed with these loaders:

./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
./node_modules/@ngtools/webpack/src/ivy/index.js
./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.

sample.js file:

class Sample {

constructor() {
   this.#reloadConfig(); // 6th line
}

#reloadConfig() {
}

EDIT : Was able to resolve it by upgrading Angular from 11 to 12, seems Angular 11 doesn't support private methods declared in a JS file.

Answer 1

You just need to use private keyword and remove the #

class Sample {
   constructor() {
      this.reloadConfig();
   }

   private reloadConfig() {
   }
}

TypeScript's private -declared properties work with all targets — even ECMAScript 3! — Microsoft DevBlog