Angular 13: Uncaught ReferenceError: Cannot access '' before initialization

Question

I'm having an issue while developing Angular.

The code looks fine in the compiler (IntelliJ), but I encounter some problems when running it on the web page.

I have a QueryUser object that inherits from the BaseRequest object. It works fine within the component, but when I try to instantiate QueryUser inside a service, I get the error message "Uncaught ReferenceError: Cannot access '' before initialization" when opening the web page.

Environment:

Angular: 13.1.3

Node: 16.17.1

UserComponent.ts

@Component({
  selector: 'app-user-info',
  templateUrl: './user-info.component.html',
  styleUrls: ['./user-info.component.css']
})
export class UserComponent implements OnInit {
  constructor(
    private userService: UserService,
  ) {
  }

  ngOnInit(): void {
    this.generateInfo().then();
  }

  private async generateInfo(): Promise<void> {
    await this.userService.queryUserInfo(this.createRequest()).
        then()
  }

  private createRequest(): QueryUser {
    return new QueryUser();
  }
}

ToastService.ts

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  constructor(
    private toastrService: ToastrService,
    private router: Router,
    private translate: TranslateService,
    private userService: UserService,
  ) {
  }

  toasts: any[] = [];

  async handleReminder(): Promise<void> {
    const userResponse: QueryUserResponse = await this.userService.queryUserInfo(this.createRequest());
    if (!userResponse.isValid) {
      // some logic
    }
  }

  private createRequest(): QueryUser {
    return new QueryUser();
  }
}

QueryUser.ts (Not Work)

export class QueryUser implements BaseRequest {
  accessToken: string;
  httpMethod: number;
  timeStamp: number;

  constructor() {
    this.accessToken = getAccessToken();
    this.httpMethod = OperationType.GET;
    this.timeStamp = Math.round(convertMilliSecondToSecond(new Date().valueOf()));
  }

  url(): string {
    return UrlUtil.transObjectToParameter(UnAuthenticatedApi.GET_USER, this);
  }
}

BaseRequest.ts

export class BaseRequest {
  accessToken: string;
  httpMethod: number;
  timeStamp: number;

  constructor(httpMethod: number) {
    this.accessToken = getAccessToken();
    this.httpMethod = httpMethod;
    this.timeStamp = Math.round(convertMilliSecondToSecond(new Date().valueOf()));
  }

  url(): string {
    return "";
  }
}

Assuming I change QueryUser to implement BaseRequest, the web page operated without any errors.

QueryUser.ts (Work)

export class QueryUser extends BaseRequest {
  constructor() {
    super(OperationType.GET);
  }

  override url(): string {
    return UrlUtil.transObjectToParameter(AuthenticatedApi.GET_USER, this);
  }
}

Answer 1

Often the issue is circular dependencies, ya know, imports that import a file that eventually through some import re-imports the original file.

You typically just need to move exports around into isolated files.

To reveal circular dependencies, use the following magical cli command:

npx madge --circular --extensions ts ./