Running Angular8 under Virtual Directory on IIS (not able to access inner links)

The question is related to Angular 8.

I have a website running on IIS where the code is in .Net and AngularJs 1.6 say www.parent.com

And I am building a completely new website in pure Angular 8 (single page application), currently having some of the pages of www.parent.com project. Also I have to run them both on the same domain. So I am trying to host the new website in a virtual directory.

What I tried was :

1. created a virtual directory say /v2
2. build the Angular8 project with ng build --base-href "/v2" --deploy-url "/v2/" and copy the dist in /v2 directory
3. tried to access www.parent.com/v2/

Everything is working great, navigation to different pages, etc. routing is working fine on Angular8 project for example - www.parent.com/v2/timetable, www.parent.com/v2/noticeboard

but when i am on one of the pages from child project and refresh the page it gives the following error

HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Most likely causes:
The directory or file specified does not exist on the Web server.
The URL contains a typographical error.
A custom filter or module, such as URLScan, restricts access to the file.

Things you can try:
Create the content on the Web server.
Review the browser URL.
Create a tracing rule to track failed requests for this HTTP status code and see which module is calling SetStatus. For more information about creating a tracing rule for failed requests, click here.

Detailed Error Information:
Module     IIS Web Core
Notification       MapRequestHandler
Handler    StaticFile
Error Code     0x80070002
Requested URL      http://parent.com:80/Child/timetable/worker
Physical Path      D:\WebSites\Child\timetable\worker
Logon Method       Anonymous
Logon User     Anonymous

UPDATE :

1. added web.config as per this

2. added in index.html in angular 8 project

Directory structure :

C:\web\Project\Parent -> .net project

C:\web\v2\ -> angular8 project

Virtual Directory in IIS named v2 points to C:\web\v2

C:\web\v2\src\web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <directoryBrowse enabled="true" />
      <rewrite>
         <rules>
            <rule name="AngularJS Routes" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/v2" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>

for anybody who have this problem in this time.

when you host angular projects on virtual directory, you need to add:

 APP_BASE_HREF, useValue: '/YOR VIRTUAL DIRECTORY NAME'

to "app.module.ts" in "NgModule" section. like this:

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/YOUR_VIRTUALDIRECTORY_NAME'}],
  bootstrap: [AppComponent]
})

and rebuild your project.

don't forget to use:

import { APP_BASE_HREF } from '@angular/common';

you can see about this, on https://angular.io/api/common/APP_BASE_HREF

and finally run:

ng build --base-href  YOUR_VIRTUAL_DIRECTORY_NAME

have a good time!