Documentation doesn't explain how to run a published Angular application
Using the default template for Angular, you can run the program using a simple dotnet run command. This launches a command prompt (on Windows at least) which runs ng serve with the ssl certs among other things.
How are you supposed to run this in prod when published? The page says to use standard deployment techniques but running dotnet on the published dll doesn't actually run ng server. It launches and says it's listening on x address but navigating theres shows 404.
How should we run the published application? Run the dll and then run ng serve with our certs? Thanks,
Document Details
⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.
- ID: 32a18270-91cd-2a02-2eb8-2c8b1ed03737
- Version Independent ID: c58d57e5-a0c2-201d-f6dd-076ad5971fcb
- Content: Use Angular with ASP.NET Core
- Content Source: aspnetcore/client-side/spa/angular.md
- Product: aspnet-core
- Technology: aspnetcore-clientside
- GitHub Login: @SteveSandersonMS
- Microsoft Alias: stevesa
If you do an internet search there's lots of articles on the topic. Not sure when we'll have time to address this.
Okay, I see. I wasn't sure if there was any sort of automation like there is for development built in.
I'm going to just run the ASP.NET side of it normally and then setup the angular application entirely separately like here and specifically here for nginx(angular version is way outdated but it's the same).
Can I make a PR for this just explaining that the ASP.NET application and the Angular application are going to be deployed entirely separately? If not that would suffice. It just seems kind of implied that the deployment is as simple as the development running. It's not complicated but it's also not handled entirely for the developer is all.
@rafikiassumani-msft please have someone review this proposal for a PR on deploying angular
@MackinnonBuck please review
See this Comment by @MackinnonBuck
I'm not really sure what's left to document here. We have a "Publish and deploy" section, which links directly to https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/host-and-deploy/index.md. That document describes
dotnet publish, which handles everything mentioned in this issue if I'm not mistaken.
@Perustaja, running dotnet on the published DLL should be sufficient. Navigating to the app's URL shouldn't result in a 404. Are you getting some other error in the application output?
@MackinnonBuck Here's an easy startup for each of the two different scenarios (on Windows)
dotnet new angular -o MyApp
cd MyApp
dotnet run
This launches the application on two ports, navigating to either launches a script which runs ng serve among others, this then launches an SPA development server.
output:
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7005
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5082
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\Dev\References\MyApp\
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
No SPA development server running at https://localhost:44470 found.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
SPA proxy is not ready. Returning temporary landing page.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
SPA development server running at 'https://localhost:44470'
then shut it down and run
dotnet publish --configuration test
dotnet MyApp\bin\test\net6.0\publish\MyApp.dll
This just launches the ASP.NET server itself, and publishes the Angular files under publish/wwwroot. Navigating to the url just returns 404 for me.
output:
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\Dev\References\MyApp\
I have to deploy my Angular files through Nginx as described in Angular's publish/deploy page (or with something like live server for vscode). It seems like Kestrel doesn't serve the files and a reverse proxy directly should? It's probably obvious to Angular users but this is the first time I've deployed one.
@Perustaja The working directory of the application is determined by the directory where the dotnet command is executed, not the directory of its DLL. In this case, the dotnet command should be executed in the publish folder so published files can be discovered by the application (static assets, appsettings.json, etc).
Maybe it's worth documenting this detail in the Host and deploy docs.
Edit: Could you confirm that this suggestion resolves your issue? Thanks.
Maybe it's worth documenting this detail in the Host and deploy docs.
Thanks @MackinnonBuck, I'll get that added next month or sooner.
Sounds good, thanks. By the way, it might be best to document the practical aspect of this, not the technical details. My explanation above was the technical reason why the dotnet command should be run from the publish folder, but it might suffice to add a sentence to the "Publish to a folder" section of the Host and deploy docs that describes how to run the published app. Something like, "Run dotnet <ApplicationName>.dll from the publish folder to run the published app locally." Or, maybe that could go in its own small section titled "Run the published app locally".
In other words, I don't think adding the sentence "The working directory of the application is determined by the directory where the dotnet command is executed, not the directory of its DLL" to the docs translates into practical advice for customers to follow.
@MackinnonBuck I'll add that to #27584
Yes, this resolved the issue. Thank you.