I have an ABP solution with an Angular project. It all works fine when I run both projects separately, but my goal is to host the Angular application inside the wwwroot
folder of the .NET project. Want to have it like that so I can run it in Azure as one application.
But I can't get this to work. It seems like that the Angular routes are not working. These are the steps that I've taken.
Angular project:
environment.prod.ts
. Changed baseUrl
to the URL of the API. In my case https://localhost:44366
yarn build:prod
Database:
OpenIddictApplications
were no longer pointing to the old Angular URL, but to the API url: https://localhost:44366
API project:
Updated the web.config
in the AbpMyApplication.HttpApi.Host
project. Added rewrite rules for the Angular routes:
Changed the redirect to Swagger in the Index
action of the HomeController
to Redirect("~/index.html")
Updated appsettings.json
so that the AngularUrl
, CorsOrigins
and RedirectAllowedUrls
point to the API URL
"App": {
"SelfUrl": "https://localhost:44366",
"AngularUrl": "https://localhost:44366",
"CorsOrigins": "https://*.AbpMyApplication.com,https://localhost:44366",
"RedirectAllowedUrls": "https://localhost:44366"
},
dist
folder to the wwwroot
folderWhen I run the application then I get the following error on screen:
In the Network tab of my browser I see that it tries to make a few API calls to load configurations and some other things. For example, a call to the following URLs work:
This all returns JSON data. So the calls to the "backend" API's work fine.
But the following call fails: https://localhost:44366/getEnvConfig
This should be an Angular route. But this returns the content of index.html
.
I tried to find the getEnvConfig
route in the Angular project. But I can't find anything other than the setting in environment.prod.ts
. I have no idea why the call to this route fails.
Do you have any idea why this isn't working for me? Is there a step that I'm missing here?