chrisjwalk / angular-cli-netcore-ngrx-starter

Angular demo app using Nx build system, esbuild, @ngrx/signals, Angular Material, Angular PWA, Tailwind CSS, and .NET 8.0 + Microsoft.AspNetCore.SpaServices.Extensions

Nx + Angular + .NET 8.0

This is basic demo of how to use a full stack Nx monorepo with Angular and .NET 8.0 with Microsoft.AspNetCore.SpaServices.Extensions and a demo Azure pipeline for Azure DevOps.

Demo

See a live demo here: https://angularclinetcorengrxstarter.azurewebsites.net/

Getting Started?

• Make sure you have at least Node 20.x or higher (w/ npm 10+) installed!
• This repository uses ASP.NET 8.0, which has a hard requirement on .NET SDK 8.0.x. Please install these items from https://dotnet.microsoft.com/download

Visual Studio 2022

Make sure you have .NET 8.0 installed and/or the latest VS2022.

Visual Studio Code

Note: Make sure you have the C# extension & .NET Debugger installed.

npm install

Serve Development App

npm start

Both the api (dotnet) and web app (Angular) will build and run in dev mode. Open your browser on http://localhost:4200/ to see the Angular app, or https://localhost:60254/swagger to see the api documentation generated by Swagger.

Serve Production App (PWA enabled)

npm run serve:prod

Lint

npm run lint

Unit Tests

Run unit tests by executing:

npm run test

Please note that for test coverage you need dotnet-coverage to be installed:

dotnet tool install --global dotnet-coverage

More information is available on https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-test

End-to-end Tests

Run e2e tests by executing:

npm run e2e

Build Production App

Build the production Angular app and Publish the release .NET app, run:

npm run build:prod

The contents of the. /dist folder should now contain something that can be deployed to and Azure web service or IIS instance.

angular-cli-netcore-ngrx-starter's Issues

SSR Fails with: Unknown option: '--app'

Hi,

I was doing the exact (almost, not material) same thing independently and came across yours whilst trying to fix the above error.
Unfortunately, it seems you get the same error when using SSR. I don't suppose you know how this can be fixed? Google hasn't been my friend! Here's the error:

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (The NPM script 'build:ssr' exited without indicating success.
Output was:

[email protected] build:ssr G:\angular-cli-netcore-ngrx-starter-master\angular-cli-netcore-ngrx-starter-master\ClientApp
npm run build -- --app=ssr --output-hashing=media "--watch"
Error output was: Unknown option: '--app')
System.Threading.Tasks.Task.Wait(int millisecondsTimeout, CancellationToken cancellationToken)
InvalidOperationException: The NPM script 'build:ssr' exited without indicating success.
Output was:
[email protected] build:ssr G:\angular-cli-netcore-ngrx-starter-master\angular-cli-netcore-ngrx-starter-master\ClientApp
npm run build -- --app=ssr --output-hashing=media "--watch"
Error output was: Unknown option: '--app'

Prod build runtime error

With a prod build, app fails to load, showing the following console error:

Uncaught SyntaxError: Strict mode code may not include a with statement

Npm Start Error

Hi Chris,

Awesome work on organizing a dotnet application in a NX workspace. This is the first time I have seen this done.

When doing an npm start, I get the following error:

ng run api:serve

ng run web-app:serve
Executing "dotnet run --project apps/api"...
crit
: Microsoft.AspNetCore.Hosting.Diagnostics[6]
Application startup exception
System.IO.DirectoryNotFoundException: C:\Architect\Nx\dotnetnx\apps\api\apps\web-app
at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root, ExclusionFilters filters)
at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root)
at Api.Startup.Configure(IApplicationBuilder app, IWebHostEnvironment env) in C:\Architect\Nx\dotnetnx\apps\api\Startup.cs:line 51
at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor, Boolean wrapExceptions)
at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.Invoke(Object instance, IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.<>c__DisplayClass4_0.b__0(IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.GenericWebHostBuilder.<>c__DisplayClass13_0.b__2(IApplicationBuilder app)
at Microsoft.AspNetCore.Mvc.Filters.MiddlewareFilterBuilderStartupFilter.<>c__DisplayClass0_0.g__MiddlewareFilterBuilder|0(IApplicationBuilder builder)
at Microsoft.AspNetCore.HostFilteringStartupFilter.<>c__DisplayClass0_0.b__0(IApplicationBuilder app)
at Microsoft.AspNetCore.Hosting.GenericWebHostService.StartAsync(CancellationToken cancellationToken)

Unhandled exception.
An unexpected error occurred: undefined

Do recognize this error? Maybe I am doing something wroing.

Thanks,
Danny

dotnet tests are not supported

Hello,

Looks like dotnet tests are not supported by the dotnet-builder.

I could share my implementation for tests, should I create a pull request ?

Best Regards,
Yann