Working demo for a project that integrates Angular 17 with .NET Core

Finding a working demo for a project that integrates Angular 17 with .NET Core involves looking for sample projects or tutorials that demonstrate how to use these technologies together. Angular is a popular framework for building client-side applications, while .NET Core is a cross-platform framework for server-side development. Integrating them allows for the creation of powerful full-stack web applications.

Here’s a basic outline to create a simple Angular + .NET Core demo application:

1. Prerequisites

Install .NET Core SDK
Install Node.js and npm (comes with Node.js)
Install Angular CLI

2. Create a .NET Core Web API Project

First, create a new .NET Core Web API project. This will serve as the backend.

dotnet new webapi -n AngularDemoAPI
cd AngularDemoAPI
dotnet run

3. Create an Angular Project

Next, create a new Angular project. This will be your client-side application.

ng new AngularDemoApp
cd AngularDemoApp
ng serve

4. Enable CORS in .NET Core

To allow the Angular app to communicate with the .NET Core API, enable CORS (Cross-Origin Resource Sharing) in the .NET Core project.

In the Startup.cs file of your .NET Core project, add the following code to the ConfigureServices method:

services.AddCors(options =>
{
    options.AddPolicy(name: "AllowOrigin",
        builder =>
        {
            builder.WithOrigins("http://localhost:4200")
                   .AllowAnyHeader()
                   .AllowAnyMethod();
        });
});

And then, in the Configure method, use the CORS policy:

app.UseCors("AllowOrigin");

5. Call .NET Core Web API from Angular

Modify the Angular application to call the .NET Core Web API. First, create a service in Angular:

ng generate service DataService

In the data.service.ts file, add a method to call the .NET Core Web API:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private baseUrl = 'http://localhost:5000/api'; // Adjust the port if different

  constructor(private http: HttpClient) { }

  public getData(): Observable<any> {
    return this.http.get(`${this.baseUrl}/values`);
  }
}

Make sure to adjust the baseUrl to match your .NET Core API’s address and port. Then, inject and use this service in one of your Angular components to call the API and display the data.

This basic outline sets up a simple Angular + .NET Core application. For a more comprehensive demo, including database integration, authentication, and deployment, you might want to look at specific tutorials or sample projects. Resources like GitHub repositories, official documentation from Microsoft for .NET Core, and Angular documentation are great places to find detailed examples and guides.

Tags:Angular 17