Async / await on ngOninit()

Issue

I'm trying to use the async/await (for the first time) and I can't wrap my head around it.

What am I doing wrong here:

tree.component.ts

export class TreeComponent implements OnInit {

  private routeSub: any;
  acronym: string;
  flare: any[];

  constructor(
    private location: Location,
        private route: ActivatedRoute,
        private http: HttpClient,
        private router: Router,
        private fileTreeService: FileTreeService
  ) {


  }
  ngOnInit(): void {
      this.routeSub = this.route.params.subscribe(
        params => {
            this.acronym = params.name
            this.fileTreeService.getFileTree(params.name).subscribe(item => {
                this.flare = item;

            });
        });

filetree.service.ts

export class FileTreeService {

    res: any;

    constructor(private http: HttpClient) { }



    async getFileTree(acronym) {
        const headers = new HttpHeaders()
        this.res = await this.http.get<any>(`${IP}/filetree/tree/`, { headers });
        return this.res;
    }
}

I'm getting the error "Property 'subscribe' does not exist on type 'Promise'" in filetree.component.ts. I've reached the end of the road here, so I'm reaching out to you guys. Thanks in advance.

Update:

Thanks for the help, it kinda worked but it didn't do what I was trying to achive. Isn't supposed to wait for the result before continue executing the code?

  ngOnInit(): void {
      this.routeSub = this.route.params.subscribe(async (params) => {
            this.acronym = params.name
            this.flare = await this.fileTreeService.getFileTree(params.name).toPromise();
            console.log("flare = ", this.flare);
        });

    let test = this.flare;
    console.log("test = ", test);
} 

root is declared before flare has been given a value. This what my browser console spits out.

test =  undefined
flare =  {name: "data", children: Array(81)}

Solution

async/await work on promise so in case you use httpClinet methods you need to convert the return value from Observable to promise by toPromise method

filetree.service.ts

export class FileTreeService {
    res: any;

    constructor(private http: HttpClient) { }

    getFileTree(acronym) {
        const headers = new HttpHeaders()
        //🔹 return an observable 👇
        return  this.http.get<any>(`${IP}/filetree/tree/`, { headers })    
   }
}

component

  ngOnInit(): void {
      // 🔹 mark the upper function with async
      this.routeSub = this.route.params.subscribe(async (params) => {  
        this.acronym = params.name;
        // 🔹 now we can use await but we need to convert the observable to promise 
        this.flare = await this.fileTreeService.getFileTree(params.name).toPromise();
        });
}

you can read in depth tutorial here

Updated🚀🚀

we can mark ngOnInit with async and use await for all observances after we convert theme to promise in that case we will no longer to use subscribe.

  // 🔹 mark the upper function with async
  async ngOnInit(): Promise<void> {
    // 🔹 now we can use await but we need to convert the observable to promise 
    this.acronym = (await this.route.params.toPromise()).name;
    this.flare = await this.fileTreeService.getFileTree(this.acronym).toPromise();
    let test = this.flare;  // => {name: "data", children: Array(81)}
    console.log("test = ", test); // => {name: "data", children: Array(81)}

  }

Answered By - Muhammed Albarmavi