Open Closed

Is there a way to comsume APi's from a seperate Angular Application #846


0
learnabp created
  • ABP Framework version:** v4.1.2**
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Seperated (Angular): No

We want to call api from ABP from a seprate Angular app, can you let us know the approach. I am working with one of your clients DesertFire which Alper put me in contact with.


12 Answer(s)
  • 0
    gterdem created
    Support Team

    Are you trying to access a different web api from your client application (angular) or its backend projects (web api), from web api to web api or from angular to web api?

    If you are trying to connect from angular app, did you consider creating a different endpoint in your own backend project to get data from diffferent web api and host as proxy hence you can also authorize those endpoint aswell.

    Can you give more details?

  • 0
    learnabp created

    we are trying to create a front end app which is basically runs as a Office Add In using the following library

    https://www.initgrep.com/posts/javascript/angular/microsoft-office-addin-using-angular-cli

    and we want to use ABP as backend and access API's from the angular app. in aspnetzero we could get a token but with identity server how do we get token by passing username and pass word?

  • 1
    bunyamin created

    Hello,

    For your case, I've created a sample project and pushed it to this repo

    Here are my steps:

    • Created a new project by running the command abp new CustomAngularAppWithIdentityServer -u angular -csf -t app Note: I've chosen angular as UI, because it will generate some config in identity-server which we will use.
    • Navigated to CustomAngularAppWithIdentityServer folder.
    • Created a new angular project by running ng new custom-angular
    • Within the new angular project, I've installed some packages by running npm install @abp/ng.core @ngxs/store
    • I've copy-pasted whatever is inside in environment.ts and environment.prod.ts from angular to custom-angular project.
    • Within app.module.ts, I've imported the following modules
    import { registerLocale } from '@abp/ng.core/locale';
    import { CoreModule } from '@abp/ng.core';
    import { NgxsModule } from '@ngxs/store';
    
    @NgModule({
      // ...
      imports: [
        // ...
        CoreModule.forRoot({
          environment,
          registerLocaleFn: registerLocale(),
        }),
        NgxsModule.forRoot([]), // <- this is needed by CoreModule and we will remove this dependency by v5
      ]
    })
    export class AppModule {}
    

    With this done, we are ready to go.

    With ABP v4, we use code-flow for authentication. That's why you need to redirect the user to the Identity Server and get a token. Our core package does it for you. All you need to call is authService.initLogin()

    I've put two buttons in app.component.html

    The first one for login and the other one for retrieving users after successful login.

    Take a look at app.component.ts

    Here is everything in action

  • 0
    learnabp created

    perfect thats exactly what we need .... we also want to take advantage of the abp generate-proxy each time we update the services rather then updating manually could you pleaae show us how we can do that in the custom-angular app in the example you have generated for us ?

  • 1
    bunyamin created

    Hello,

    I've updated the app in the samples repo

    Here are what I did to create proxies.

    • First, you need to run npm install @abp/ng.schematics --save-dev. This package is used by abp-cli to generate proxies.
    • Then, you can simply run abp generate-proxy --module identity to generate services for the Identity Module.

    And that's it. You can now enjoy your generated proxies :)

    You can see that I've replaced RestService with the generated IdentityUserService in app.component.ts

    Also, just with the CoreModule from @abp/ng.core, you can even utilize abpLocalization pipe as follows:

    {{ "::LongWelcomeMessage" | abpLocalization }}.

  • 0
    learnabp created

    Thank you for the info @bunyamin this is excellent.

    Just have a final question about how we can validate and check permissions what are the methods which are in @abp\ng.core to check if the user has been granted the permisssion to show and hid admin buttons?

  • 0
    learnabp created

    Just tried running abp generate-proxy and getting the below error

    we have switched to using the MVC template with the custom-anular app so do i need to do some config on the *.Web project in the aspnet folder?

    Your help would be greatly appricated

  • 0
    bunyamin created

    Please refer to the Permission Management docs. Since, you installed @abp/ng.core into your project, it is available to you.

    It seems that the error is missing from your message.

  • 0
    learnabp created

    here is the error

    PS C:\Projects\GitLab\DesertFire.Ppm\word-angular> abp generate-proxy [18:44:59 INF] ABP CLI (https://abp.io) [18:45:00 INF] Version 4.2.0 (Stable) [18:45:03 WRN] Couldn't determinate version of "@abp/ng.schematics" package. [Invalid Module] Backend module "app" does not exist in API definition. PS C:\Projects\GitLab\DesertFire.Ppm\word-angular>

  • 0
    bunyamin created

    Make sure your backend has a module called app available. You can check it by making a request to https://yourdomain.com/api/abp/api-definition?includeTypes=true. This will return a json which will be used to generate proxies.

    E.g.

    If you do not explicity choose a module, the default is app. You can choose a module by passing a parameter after --module. E.g.

    abp generate-proxy --module identity

  • 0
    learnabp created

    Thanks for your reply @bunyamin we are running the custom-angular app inside of Word Addin which uses IE Edge Legacy Web Viewer

    It seems that when I login and supply credentials the AccessToken is not retrived on first attempt i have to press on the Login button quite a few times before it sucessfullt logins.

    COuld you please suggest why this behaviour is happening ?

  • 0
    bunyamin created

    Hello vnetonline,

    It seems that your original problem is solved and your latest question is out of the scope of this thread. I'll close this issue.

    If you'd like, you can open up a new ticket.

    Best regards, Bunyamin