Angular 服务与 Azure 宇宙

Question

I am really new to Angular. I am trying to create a service which i want to consume in my angular component. While doing so i am getting below error.

Below is my code which i am writing

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { CosmosClient } from '@azure/cosmos';
import {Observable,of} from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  
  databaseId='dbName';
  containerId='Container Name';
  constructor() { }

  public async getProjects():Promise<Observable<any>>{
    const endpoint = "https://AAAA.documents.azure.com:443/";
    const key = "==";
    const client = new CosmosClient({ endpoint, key });
    const database = client.database(this.databaseId);
    const container = database.container(this.containerId);

    const querySpec = {query: "SELECT * from c where c.Category=\"Details\""};
    const { resources:items } = await container.items.query(querySpec).fetchAll();
    return of(items);
  }
  
}

Any help is really appreciated.

Answer 1

There is an exception to every rule, but the use cases for connecting to a DB directly from a web browser are pretty close to zero. By doing so, you lose all fine grained control over what a user can do in your database and the only way to revoke access is to rotate your keys. You may not currently have anything in your database that is sensitive, but it is still considered bad practice.

For this reason, the CosmosDB library is compatible with NodeJS as a server-side framework. Whether or not it works with front end frameworks like Angular or React are incidental. There are some large changes in how Angular compiles projects in version 9, and it looks like the Cosmos client is not compatible with the new Ivy compiler.

You do have a couple options here.

1. (recommended) Use an API layer between your database and your front end. You can use Node to keep it within Javascript. If you are running on Azure, there are services like Azure Functions that can make this even easier to implement securely, or you can run it from the same App Service, VM, or whatever hosting solution you are using.
2. Disable the new Ivy compiler.You can do this by adding aot: false in your angular.json