.Net 8 core with Angular

I am a full stack developer , I am Facing a problem with creating Web Api Core Project+Angular.

-Could anyOne Help with clear steps ?

in .net6 i could create WebApi with Angular project as it was exist as type of project in visual studio , but Now this type of Project not exist. the projects exist are 1 Asp.net core Web Api 2 Angular and Asp.net core . now , when Creating Angular app "type 2" it's like frontEnd app with it's server. and when creating Web Api"type 1 it's api without Frontend.

i can work with angular project and add layers for clean architecture , but chatGPT tell me that is not recommended as the performance will be low and the better create the backend"API" the tie it with the front not versa!!

tried to add api then Client App to it and change .csproj ,Program.cs,angular.json files to define the Client as part of API, but the problem is when Run it it open Swagger in tab and in new tab (different portal) open the front , so i feel they are 2 projects not one project need when run(f5) the project from Visual studio open the UI , NO NEED TO OPEN THEM AS 2 DIFFERENT AND SEPARATED PROJECTS.

another thing i will need , depoly them in IIS as how it will work ? how request the URL of Projectand which thing will open

here the code for proxy.config.json::

{
"/api": {
"target": "https://localhost:7065",
"secure": false, // Required for self-signed certs
"changeOrigin": true

}
}


program.cs ::

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAuthorization();

app.MapControllers();


app.MapFallbackToFile("index.html");

app.Run();


Launchingsetting.json::

{
"$schema": "http://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:28088",
"sslPort": 44370
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "http://localhost:5251",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "https://localhost:7065;http://localhost:5251",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "swagger",
"applicationUrl": "https://localhost:4200",

"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}


Wifi.csproj::

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<SpaRoot>ClientApp\</SpaRoot>

</PropertyGroup>

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' ">
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build this project." />
</Target>

<Target Name="PublishAngular" AfterTargets="ComputeFilesToPublish">
<Exec Command="npm install" WorkingDirectory="$(SpaRoot)" />
<Exec Command="npm run build -- --configuration production" WorkingDirectory="$(SpaRoot)" />
</Target>

<ItemGroup>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
</ItemGroup>

</Project>


package.json::

{
"name": "client-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/common": "^19.2.0",
"@angular/compiler": "^19.2.0",
"@angular/core": "^19.2.0",
"@angular/forms": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/router": "^19.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.8",
"@angular/cli": "^19.2.8",
"@angular/compiler-cli": "^19.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.2"
}
}

Continue reading...