3

I have a problem calling Custom Web Api in asp.net MVC 5.The following is my code for Web Api Controller and angular js 2.

 [Route("api/email/detail/{id:int}"), HttpGet]
 public async Task<IHttpActionResult> EmailDetail(int id)
 {
     return Ok();
 }

The code for angular app.routing.ts is as follows:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { UserComponent } from './components/user.component';
import { EmailComponent } from './components/email.component';
import { EmailDetail } from './components/email.detail';

const appRoutes: Routes = [
    { path: 'App/Template', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'user', component: UserComponent },
    { path: 'detail/:id', component: EmailDetail },
    { path: 'email', component: EmailComponent },
    //{ path: 'detail', component: EmailDetail},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Code for email.detail.ts is as follows:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../Service/user.service';
import { IEmail } from '../Models/user';

import { Http, Response, Headers, RequestOptions } from '@angular/http';


@Component({
    templateUrl: 'About/Template/Detail'
})

export class EmailDetail implements OnInit {
    private emailId: number;
    private email: IEmail

    constructor(private _userService: UserService, private _http: Http, 
    private route: ActivatedRoute) {

    }

    ngOnInit(): void {

        this._http.get("api/email/detail/1992").subscribe(data => {
            // Read the result field from the JSON response.
        });

    }
}

The error I get in the console is as follows: The api call is http://localhost:16552/detail/api/email/detail/1992 and detail is getting prepended which is preventing from calling the api controller.

4
  • try changing RouterModule.forRoot(appRoutes) to RouterModule.forRoot(appRoutes,{useHash:true}) in app.routing.ts Commented Nov 10, 2017 at 6:49
  • should there be detail 2 times in your URL? where is your base url in angular? Commented Nov 10, 2017 at 6:59
  • No 'detail' is getting prepended before the custom api route to make it localhost:16552/detail/api/email/detail/1992 which should not happen. Also my code for base url is : @NgModule({ imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule], declarations: [AppComponent, UserComponent, HomeComponent, EmailComponent, EmailDetail], providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService], bootstrap: [AppComponent] }) Commented Nov 10, 2017 at 7:09
  • useHash solved the problem. Commented Dec 27, 2018 at 6:39

1 Answer 1

1

useHash solved the problem and its working fine now.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.