I have developed an asp.net core 2.0 MVC application with the addition of an Angular 6 frontend application. They both exist in the same project structure. The asp.net core application acts as an API for the client side Angular 6 application.
I have been developing them side-by-side and included the following code segments inside the Startup.cs file to allow development whilst both applications are running:
ConfigureServices
services.AddSpaStaticFiles(configuration => {
configuration.RootPath = "ClientApp/dist";
});
Configure
app.UseSpa(spa => {
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment()) {
spa.UseAngularCliServer(npmScript: "start");
}
});
The project structure for the Angular application can be found in ClientApp.
I know wish to deploy this project to IIS. So I am moving away from a development environment so I know that the line of code: spa.UseAngularCliServer(npmScript: "start");
is not going to be run.
When I publish the project through Visual Studio and move it to the inetpub folder as I would do for other applications, it does not serve the pages that I have developed within the Angular 6 application. I get 500 internal server error when trying to access a page such as /Home that I have defined within the RoutingModule of the Angular 6 application.
I am presuming that it is because I need to build the Angular application (which I can do through ng build --prod
) and add the compiled JS files to a HTML page. But I am unsure how to go about this. If anyone has any links to relevant webpages that would be greatly appreciated. Or if you can provide any insight that would be very helpful.
Update #1:
Within the Startup.cs file, I made app.UseDeveloperExceptionPage() available for when running in production mode.
Instead of a 500 internal server error page, I got exception: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
I also noticed that the ClientApp/dist folder was not present after publishing. I manually built ClientApp and added it to the application in inetpub. Now, I get the error in the console:
runtime.a66f828dca56eeb90e02.js:1 Uncaught SyntaxError: Unexpected token <
polyfills.7a0e6866a34e280f48e7.js:1 Uncaught SyntaxError: Unexpected token <
Request:10 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/styles.169e0a841442606822c8.css".
scripts.ee7fed27c36eaa5fa8a9.js:1 Uncaught SyntaxError: Unexpected token <
main.befe6f4d3c1275f2e1b3.js:1 Uncaught SyntaxError: Unexpected token <
The updated Angular project template provides a convenient starting point for ASP.NET Core apps using Angular and the Angular CLI to implement a rich, client-side user interface (UI). The template is equivalent to creating an ASP.NET Core project to act as an API backend and an Angular CLI project to act as a UI.
To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later. In Solution Explorer, right-click the ASP.NET Core project and choose Add > Project Reference. Select the Angular project and choose OK. Right-click the ASP.NET Core project in Solution Explorer and choose Unload Project.
Because these files are static, you can host them on any web server capable of serving files; such as Node. js , Java, . NET, or any backend such as Firebase, Google Cloud, or App Engine.
You need to use this code for ASP.NET Core 2.0, not what you are using. My application is published using this approach.
app.UseMvc(routes =>
{
//Remove this if you don't need it
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA
});
You need to have a Action in your HomeController which returns a View. Code for View is
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With