add abp service proxies to a basic angular app #5559

2 Answer(s)

• 

  0

  ismcagdas created 5 years ago

  Support Team

  Hi,

  service-proxies are generated by <a class="postlink" href="https://github.com/RSuter/NSwag">https://github.com/RSuter/NSwag</a> library. Have you used AbpHttpInterceptor in root module (or app.module if your template only has this) and service-proxies.module like below ?

  <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/master/angular/src/root.module.ts">https://github.com/aspnetzero/aspnet-ze ... .module.ts</a> <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/master/angular/src/shared/service-proxies/service-proxy.module.ts">https://github.com/aspnetzero/aspnet-ze ... .module.ts</a>

  Save Cancel
• 

  0

  alexanderpilhar created 5 years ago

  Hi everybody!

  I'm trying to do the same as @kythor but having troubles sorting out an JSON.parse-error when using AbpHttpInterceptor. ERROR SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

  Here's what I did so far:

  • Created a new angular project using angular-cli
  • Added relevant npm-packages (abp-ng2-module, abp-web-resources, nswag, moment + types, moment-timezone+types)
  • Upgraded all npm-packages to latest version
  • Created service-proxies.ts using refresh.bat
  • Created service-proxy.module.ts
  • Added abp.js to assets
  • Added abp.js to scripts in angular.json
  • Created typings.d.ts for abp.js
  • Added paths to tsconfig.json

  My service-proxy.module.ts looks like this:

  @NgModule({
      providers: [
          { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true },
  
          ApiServiceProxies.MyServiceProxy
      ]
  })
  export class ServiceProxyModule { }
  

  My app.module.ts looks like this:

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      HttpClientJsonpModule,
      ServiceProxyModule
    ],
    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true },
      { provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
      AbpHttpConfiguration,
      MessageService,
      LogService,
      MyServiceProxy
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  If I comment out the interceptor-parts, I get following error:

  ERROR Error: "An unexpected server error occurred."

  The error seems to pop up when MyServiceProxy tries to send the request (service-proxies.ts):

  return this.http.request()...

  BTW: I do not need any sort of authentication or authorization in this case and there is no [AbpAuthorize] on any of the methods of this service. Calling the service using Postman works well. Also, using HttpClient (@angular/common/http) get-request instead of service-proxy works!

  Right now, I don't really know how to solve this problem from here. I would be so happy if you guys could help me with this one!

  EDIT 1 baseUrl does not get set in service-proxies.ts.

  EDIT 2 Finally, I was able to solve this problem : ) Learning quite a lot about the angular-client's implementation, too : )

  Save Cancel