.NET Core 3.1 and Angular 9 web app build error(s)
Question
I have developed a .NET Core 3.1 and Angular 9 web app in VSCode.
I have set up a launch.json file that serves the entire application (.NET Core and Angular 9) without a hitch.
I use the below angular.json settings when I run the ng build --prod to build the Angular 9 app and write it to the .NET Core wwwroot.
angular.json (extract)
"options": {
"outputPath": "../TargetPro.API/wwwroot",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"src/styles.css"
],
"scripts": [
"./node_modules/alertifyjs/build/alertify.min.js"
]
}
I then run the application using dotnet run to serve the application on localhost:5000. The same day it all worked 100% and then after adding 2 components I am served with a blank page. I have removed the two components I added without having any effect. I still get a blank page with the console error messages as displayed in the image below.
For example, one of the error messages read " Failed to load resource: the server responded with a status of 400 (Bad Request) " and the file name is " main-es2015.9ddbf650cf0e7f09b565.js ".
I have verified that the particular files exist at the path. I have also opened all the files and they all have contents in it. I copied the contents and verified (using an online validator) that the JavaScript in it is valid.
I also double-clicked on the file name as displayed in the console error and I am presented with the following .json formatted error message.
.json formatted error message
{
"errors": {
"dataanalysisId": [
"The value 'main-es2015.9ddbf650cf0e7f09b565.js' is not valid."
]
},
"type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
"title": "One or more validation errors occurred.",
"status": 400,
"traceId": "|82e44613-41a1b227ab4a5264."
}
What stands out to me is that One or more validation errors occurred and the The value 'main-es2015.9ddbf650cf0e7f09b565.js' is not valid .
What about "main-es2015.9ddbf650cf0e7f09b565.js" is not valid?
I also have double-checked the generated index.html file and the particular JavaScript file is referenced correctly.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0" />
<title>TargetPro</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/assets/images/NewBigenLogo.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="assets/custom.css">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.7a6852d4635a483ded1e.css">
</head>
<body class="body">
<app-root></app-root>
<!-- <noscript>Please enable JavaScript to continue using this application.</noscript> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script>
<script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script>
<script src="polyfills-es5.177e85a9724683782539.js" nomodule defer></script>
<script src="polyfills-es2015.f332a089ad1600448873.js" type="module"></script>
<script src="scripts.e3f1622784b881f14c87.js" defer></script>
<script src="main-es2015.9ddbf650cf0e7f09b565.js" type="module"></script>
<script src="main-es5.9ddbf650cf0e7f09b565.js" nomodule defer></script>
</body>
</html>
I have also looked in the ngsw.json file to verify that the "main-es2015.9ddbf650cf0e7f09b565.js" file is included.
ngsw.json (extract)
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/favicon.ico",
"/index.html",
"/main-es2015.9ddbf650cf0e7f09b565.js",
"/main-es5.9ddbf650cf0e7f09b565.js",
"/manifest.webmanifest",
"/polyfills-es2015.f332a089ad1600448873.js",
"/polyfills-es5.177e85a9724683782539.js",
"/runtime-es2015.0dae8cbc97194c7caed4.js",
"/runtime-es5.0dae8cbc97194c7caed4.js",
"/scripts.e3f1622784b881f14c87.js",
"/styles.7a6852d4635a483ded1e.css"
],
"patterns": []
}
and
ngsw.json (extract)
"hashTable": {
"/assets/custom.css": "e81137cd383f52c600f10dabb84bd1484abc1181",
"/assets/icons/icon-128x128.png": "dae3b6ed49bdaf4327b92531d4b5b4a5d30c7532",
"/assets/icons/icon-144x144.png": "b0bd89982e08f9bd2b642928f5391915b74799a7",
"/assets/icons/icon-152x152.png": "7479a9477815dfd9668d60f8b3b2fba709b91310",
"/assets/icons/icon-192x192.png": "1abd80d431a237a853ce38147d8c63752f10933b",
"/assets/icons/icon-384x384.png": "329749cd6393768d3131ed6304c136b1ca05f2fd",
"/assets/icons/icon-512x512.png": "559d9c4318b45a1f2b10596bbb4c960fe521dbcc",
"/assets/icons/icon-72x72.png": "c457e56089a36952cd67156f9996bc4ce54a5ed9",
"/assets/icons/icon-96x96.png": "3914125a4b445bf111c5627875fc190f560daa41",
"/assets/images/NewBigenLogo.ico": "1971185fbe08c46b54eb2bb81d5232e8951084d3",
"/assets/images/TargetProLogo02.jpg": "df42312cbae197612480d8612796527459609d6d",
"/assets/images/TargetProLogo02Transparent.png": "52e5ec097ff8107d5bbacd8f28e3ed6c46c91911",
"/assets/images/bigen_horisontal_white_tagline.png": "9551491c578290df06600c6580c01bb21d71ade2",
"/fa-brands-400.1776173e3b1af55eb455.ttf": "29f59b4eecc72052d9110a5d4030a10ad9bf73d7",
"/fa-brands-400.28d8b8fcc41c3b7134ff.woff": "fddb95d7a0f48d2bf90a5ee3095e8264dca18053",
"/fa-brands-400.37913cdf7cb0571dfac0.woff2": "62584b9868428fd75af3fc5ee2f9918dda428be5",
"/fa-brands-400.63b566233f163d538cce.svg": "99dff0739882276ad6c434d73228efc7971b0a66",
"/fa-brands-400.bfcc3384b8a317dc5de3.eot": "40c8f2a0dc154160fde50e0c27f694f12c7b1636",
"/fa-regular-400.0c6f12b9eaa2ad444a6b.eot": "3306178c90d9df939d2a5eabf533ba3650fbe80e",
"/fa-regular-400.1b536b782d09dd59dda8.svg": "51afca56e309df6fdc56b53fa6a7d3ce64826490",
"/fa-regular-400.c3c2ab4f63b8d9973c78.woff2": "5e4d45052f43e55aaad7f14d13280215e39aa45b",
"/fa-regular-400.c9c57c0f1f4eb34dbf57.ttf": "517a3b41c1e01b65898b5f1074434d43a361a54f",
"/fa-regular-400.fcaa6c135683a3fa1b50.woff": "da17a9f1dcae379c8ba20f1089059c202216cba7",
"/fa-solid-900.22aa6d4357cf74671bc4.woff": "f13e252f8a51a5279fd21e26ada0bd2f55bcefd8",
"/fa-solid-900.3e2bc2ffd29f01066d23.svg": "5501fb62e20a89bdd89bf3fa147ca4dbcd2fc67f",
"/fa-solid-900.4055b0575d40bfb3c7e8.woff2": "6290834672aba86d5b6c1c73b30b57c9c53996f7",
"/fa-solid-900.a480ec972cb6bce30533.ttf": "874c650701d0cbfb8f1de48a496dabed3bbf22e6",
"/fa-solid-900.dfaa060a451d978c2565.eot": "96a5637429426764ea9b28bf4d1eb55ae10de57e",
"/favicon.ico": "22f6a4a3bcaafafb0254e0f2fa4ceb89e505e8b2",
"/index.html": "3097d526717744c5c5546bb7e6bd6d8c568b75c7",
"/main-es2015.9ddbf650cf0e7f09b565.js": "0fc7b0b2cc5f345d48a4b49d131facbc3129748d",
"/main-es5.9ddbf650cf0e7f09b565.js": "23296d15033f49a1cbe2dbc68423698d2d685c9b",
"/manifest.webmanifest": "2b9a2f8c92d7633e5cf15f0e60412ba827c7cb02",
"/polyfills-es2015.f332a089ad1600448873.js": "72ad4ccc0a3916ae4598199447cdeadd6d380570",
"/polyfills-es5.177e85a9724683782539.js": "8aa26ea87b9958c6bd13b7c257c0e9940438e684",
"/runtime-es2015.0dae8cbc97194c7caed4.js": "a9aafcf49f49145093fc831efd9b8e2f6c71bb9c",
"/runtime-es5.0dae8cbc97194c7caed4.js": "a9aafcf49f49145093fc831efd9b8e2f6c71bb9c",
"/scripts.e3f1622784b881f14c87.js": "e6b3c356e5949695046c95858db71a303e633dd1",
"/styles.7a6852d4635a483ded1e.css": "368e886c0e50a602803bedcee7c7bbb8c0583d5d"
}
I have included the headers below.
When I look at the headers of "main-es2015.9ddbf650cf0e7f09b565.js" request, I have noticed that the response headers return a application/problem+json; charset=utf-8 application/problem+json; charset=utf-8 content type, which is not correct. The "main-es2015.9ddbf650cf0e7f09b565.js" file is a JavaScript file. My guess is that it has more to do with the return .json formatted error message than the JavaScript file itself.
I will appreciate any help and assistance. I think I am missing something that is glaringly obvious and it may have been starting right in the face. I have spent so much time trying to get to the bottom of this that I may be missing the obvious solution.
Edit - Solution
The solution for getting the application displayed was in the .NET Core startup.cs file. Thank you to Ronny for pointing me in the right direction.
In the Configure method I used app.UseEndpoints to include a mapping fallback to a controller which returns a PhysicalFile in wwwwroot called index.html. I commented this middleware out and ran dotnet run again and this time I was able to view the application as expected.
It is included in the startup.cs code extract of the Configure method below. It is the commented code.
startup.cs (extract)
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Use(async (c, next) =>
{
if (c.Request.Path == "/")
{
c.Response.Headers.Add("Cache-Control", "no-store,no-cache");
c.Response.Headers.Add("Pragma", "no-cache");
}
await next();
});
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseCors(builder =>
{
AllowedToAllowWildcardSubdomains();
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.AllowAnyHeader();
});
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc();
// app.UseEndpoints(endpoints =>
// {
// endpoints.MapControllers();
// endpoints.MapFallbackToController("Index", "Fallback");
// });
}
1 answers
solution1
0 ACCPTED 2020-09-06 16:12:01
It seems to me that the problem is that the .NET Core rounting is interfering with the angular routing. Its hard to tell because I dont know how you configured your startup, but try adding this middleware in the configure() method of the startup.cs file, after the authorization/authentication middlewares, and before the endpoints middleware:
app.MapWhen(
context =>
{
var path = context.Request.Path.Value.ToLower();
return path.Contains("/") &&
!path.Contains(".js") &&
!path.Contains("/api/") &&
!path.Contains("/assets") &&
!path.Contains(".ico");
},
branch =>
{
branch.Use((context, next) =>
{
context.Request.Path = new PathString("/index.html");
return next();
});
branch.UseStaticFiles();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.