CODEWITHSUNDEEP
c#angulartypescriptasp.net-web-apiget
AmD
AmD

Reputation: 499

ASP.NET WebAPI and Angular integration. Collection not found

first of all, sorry for my English. I am trying to integrate an asp.net web api with Angular. At the moment I have only implemented the get method and when I call it in Angular, I always get 404 error. Does anyone know how to fix?
WebApiConfig.cs

    public static class WebApiConfig {
    public static void Register(HttpConfiguration config) {
        // Servizi e configurazione dell'API Web
        var cors = new EnableCorsAttribute(origins: "*", headers: "*", methods: "*");
        config.EnableCors(cors);

        // Route dell'API Web
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        config.Formatters.Remove(config.Formatters.XmlFormatter);
        config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
  
    }
}

Products.cs

    public class Product {
    public string id { get; set; }
    public string name { get; set; }
    public string description { get; set; }
    public double price { get; set; }
    public int qta { get; set; }

    public List<Product> GetAll() {
        List<Product> productsList = new List<Product>() {
            new Product { id = "id1", name = "prodotto1", description = "descrizione 1", price = 123.42, qta = 4 },
            new Product { id = "id2", name = "prodotto2", description = "descrizione 2", price = 13.42, qta = 4 },
            new Product { id = "id3", name = "prodotto3", description = "descrizione 3", price = 12.45, qta = 2 },
            new Product { id = "id4", name = "prodotto4", description = "descrizione 4", price = 23, qta = 7 },
            new Product { id = "id5", name = "prodotto5", description = "descrizione 5", price = 63.99, qta = 5 }
        };
        return productsList;
    }

    public Product GetProduct(string id) {
        return GetAll().Where(x => x.id == id).FirstOrDefault();
    }
}

ProductController.cs

    [EnableCors(origins: "*", headers: "*", methods: "*")]
public class ProductController : ApiController
{
    [HttpGet]
    public IEnumerable<Product> Get() {
        return new Product().GetAll();
    }
}

WebApiService.ts

@Injectable({


 providedIn: 'root'
})
export class WebapiService {

  constructor(private http: HttpClient) {
  }

  public getValue() {
    return this.http.get<any[]>('http://localhost:44342/api/Product');
  }
}

WebApiTestComponent

  export class WebApiTestComponent implements OnInit {
  value: any[] = [];

  constructor(public webApi: WebapiService) { }

  ngOnInit(): void {
    this.webApi.getValue().subscribe(data => {
      console.log(data);
      this.value = data;
    });
  }

That is the error: Error message

Upvotes: 0

Views: 379

Answers (2)

tarık hasan
tarık hasan

Reputation: 31

In the AppData:

@Injectable({
  providedIn: 'root'
})

export class AppDataService implements InMemoryDbService{

  constructor() { }
  createDb(){

  }
}

Upvotes: 0

AmD
AmD

Reputation: 499

I found the problem. The code is correct. The problem is within the Angular project. In this project I use InMemoryWebApi in another component and the two things confilct. So, to solve the problem, I added in the AppModule passThruUnknownUrl option.

InMemoryWebApiModule.forRoot(AppData, {delay: 1000, passThruUnknownUrl: true})

Upvotes: 1

Related Questions