1

I have downloaded the azure developer portal source code from Github and customizing it. I have created new widget using angular framework and trying to access Azure Rest API service. I have found one generic service called mapiclient in the source code and trying to reuse it in my newly created component to call the azure rest api. Below is the code what i'm trying for the same,

**new-widget-runtime.ts**

import { Component, Input, NgModule, Injector } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { createCustomElement } from "@angular/elements";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NewWidgetRequest } from "../../../../contracts/newWidgetRequest";
import { MapiClient } from "../../../../services";
import { NewWidgetService } from "../../../../services/newWidgetService";

@Component({
    selector: "new-widget-runtime",
    templateUrl:'../new-widget-runtime.html',
    providers:[MapiClient]
})

export class NewWidgetRuntime {

    
    
    constructor(private readonly mapiClient : MapiClient) {   }

    ngOnInit() {
       
      }

    /**
     * Sends api request to Management API.
     */
  public async submit(): Promise<void> {
        const newWidgetRequest : NewWidgetRequest={
            //data
        }
        const apiId = "SampleAPI";
        let url= 'api/${apiId}';
        await this.mapiClient.post(url, [MapiClient.getPortalHeader("newWidgetRequest")], newWidgetRequest);
    }
 
}


@NgModule({
    declarations: [NewWidgetRuntime],
    imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule],
    entryComponents: [NewWidgetRuntime],
    providers:[MapiClient]
})

export class AngularAppNewWidgetModule {
    constructor(private angularInjector: Injector) {
        const elementConstructor = createCustomElement(NewWidgetRuntime, { injector: this.angularInjector });
        customElements.define("new-Widget-runtime", elementConstructor);
    }
}

platformBrowserDynamic()
    .bootstrapModule(AngularAppNewWidgetModule)
    .catch(error => console.log(error));

while calling the mapiclient service from angular component getting error as Can't resolve all parameters for MapiClient: (?, ?, ?, ?).

MapIClient service expects four parameters in constructor

import * as Constants from "./../constants";
import { ISettingsProvider } from "@paperbits/common/configuration";
import { Logger } from "@paperbits/common/logging";
import { Utils } from "../utils";
import { TtlCache } from "./ttlCache";
import { HttpClient, HttpRequest, HttpResponse, HttpMethod, HttpHeader } from "@paperbits/common/http";
import { MapiError } from "../errors/mapiError";
import { IAuthenticator, AccessToken } from "../authentication";
import { KnownHttpHeaders } from "../models/knownHttpHeaders";

export class MapiClient {
private managementApiUrl: string;
private environment: string;
private initializePromise: Promise<void>;
private requestCache: TtlCache = new TtlCache();

constructor(
    private readonly httpClient: HttpClient,
    private readonly authenticator: IAuthenticator,
    private readonly settingsProvider: ISettingsProvider,
    private readonly logger: Logger
) { }

How to inject the constructor parameters in angular component googled and tried multiple ways but could not find any solution.. can someone help how to call the service from angular component.

Marsh
  • 173
  • 1
  • 14

1 Answers1

0

Angular cannot inject paperbits services as is, their instances are stored in an injector that you have to find

Here's how you register your paperbit module that will instanciate angular component (notice how we keep paperbit injector)

export class ProductListOrderedRuntimeModule implements IInjectorModule {

    public static paperbitsInjector: IInjector;

    public register(paperbitsInjector: IInjector): void {

        // Allow accessing paperbits injector from angular module
        ProductListOrderedRuntimeModule.paperbitsInjector = paperbitsInjector;

        platformBrowserDynamic()
            .bootstrapModule(YourAngularWebComponentModule)
            .catch(console.error);
    }
}

then you can use it in your angular component

export class ProductListOrderedRuntime {

    public productService: ProductService = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(ProductService);
    public usersService: UsersService = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(UsersService);
    public routeHelper: RouteHelper = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(RouteHelper);
    public router: Router = ProductListOrderedRuntimeModule.paperbitsInjector.resolve("router");

}
zeuros
  • 71
  • 4