Value of Base tag appended to URL after component load - asp.net-mvc

Question

I have an ASP.NET MVC application that is using Angular 4. In my layout I have a base tag that looks like this:
<base href="/src/">
I am setting everything up and I just added Angular Routing. Now right after my base component loads my URL is appended with 'src'.
Here is my routes file:
import { Routes } from '#angular/router';
import { HomeComponent } from './Components/Home/home.component';
export const AppRouting: Routes = [
{ path: '', component: HomeComponent }
];
I did not see this prior to adding the routing.

Answer 1

The key purpose of the base tag is for routing. This is from the docs:
Most routing applications should add a element to the
index.html as the first child in the tag to tell the router how
to compose navigation URLs.
If the app folder is the application root, as it is for the sample
application, set the href value exactly as shown here.
https://angular.io/guide/router#base-href
At development time, it is most often set to "/" so the routes will run from root. At deployment, you change it to the folder on the server containing your application.

Answer 2

I was able to fix this. For reference, my app folder is under a src directory, not in the root of my project. Here is what I did.
Change the base tag to:
<base href="/">
Update my main.js call from:
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
to:
<script>
System.import('src/main.js').catch(function (err) { console.error(err); });
</script>
Then in my systemjs.config.js I had to change these lines:
map: {
//app is within the app folder
'app': 'app',
to:
map: {
//app is within the app folder
'app': 'src/app',
and I also had to change:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
to:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'src/systemjs-angular-loader.js'
}
}
},