Angular Routing not working except for empty name

Question

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {NotfoundComponent} from "../shared/components/notfound/notfound.component";
import {IssuesComponent} from "../business/pages/issues/issues.component";
import {AddToInventoryComponent} from "../business/pages/add-to-inventory/add-to-inventory.component";
import {BoxTransferComponent} from "../business/pages/box-transfer/box-transfer.component";

const routes : Routes = [
    {
        path: '',
        component: IssuesComponent,
        data: {title: 'App - Issues'}
    },
    {
        path: 'add',
        component: AddToInventoryComponent,
        data: {title: 'App - Add To Inventory'}
    },
    {
        path: 'boxtransfer',
        component: BoxTransferComponent,
        data: {title: 'App - Transfer Inventory'}
    },
    {
        path: 'notfound',
        component: NotfoundComponent,
        data: {title: 'App - Page Not Found'}
    },
]


@NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRouteModule {
}

The only route that is loading is where path: ''

If I manually type localhost:4200/add it will redirect to localhost:4200 If I try to load any route, it will redirect to localhost:4200

What am I doing wrong here?

Okay new information

If I link pages in the HTML to

<a routerLink="/add"

The link loads localhost:4200/add

However if I manually type it then it redirects me to /