Running ASP.NET Boilerplate template under virtual directory

Question

I have an Angular template created by ASP.NET Boilerplate. I have published it successfully and it is running smoothly on IIS under a website. My client, however, wants to have it run under a Virtual Directory rather than a website for itself.

I have updated the appconfig.json as below:

{
  "remoteServiceBaseUrl": "http://localhost:8080/Training",
  "appBaseUrl": "http://localhost:8080/Training"
}

and did the same with App in the appSettings.json:

"App": {
    "ServerRootAddress": "http://localhost:8080/Training/",
    "ClientRootAddress": "http://localhost:8080/Training/",
    "CorsOrigins": "http://localhost:8080/Training"
}

For some reason, when I run the app, I get the following errors that it cannot load some CSS and JavaScript bundles:

I have manually changed the index.html in the wwwroot folder and added http://localhost:8080/Training/ to the beginning of each href. By doing that, all those errors have gone and now I am left with this error:

GET http://localhost:8080/assets/appconfig.json 404 (Not Found)

Which I think is related to the AppPreBootstrap.ts file, where it reads from the appconfig.json file.

Do I have to make any changes in the application settings somewhere, before publishing it, to get rid of the above issues?

Answer 1

Ensure that appRootUrl ends with '/' in AppPreBootstrap.ts:

private static getApplicationConfig(appRootUrl: string, callback: () => void) {
    appRootUrl += appRootUrl.endsWith('/') ? '' : '/'; // Add this line
    return abp.ajax({
        url: appRootUrl + 'assets/' + environment.appConfig,
        // ...
    }).done(result => {
        // ...
    });
}