Angular 7 - drops slash between app's base url and angular script

Question

I'm writing an Angular-7 app where's it's currently not inserting a "/" between the app name and the Angular javascript that's invoked - but only when it's deployed on the net, not locally.

Edit: I checked "index.html" in the built application, and it has incorrectly set the javascript includes to have the app name at the start. E.g. in the below, it should read "todo/runtime", not "todoruntime..."

<script type="text/javascript" src="/todoruntime.03f9a32c370d8f71e7b6.js"></script><script type="text/javascript" src="/todopolyfills.9f83624c7bb370dcef03.js"></script><script type="text/javascript" src="/todomain.9bd773d926709a599260.js"></script></body>

Original text:

For example, when I use this URL:

http://localhost:4200/todo/

or this URL:

http://localhost:4200/todo

it works fine (goes to the login page). In the second example, it adds the backslash at the end automatically.

However, when I deploy it to a website, it doesn't display the login page, but instead somehow loses the backslash when invoking the Angular script.

For example, if I enter either of these URLS in the browser:

exmaple.com/todo

or

exmaple.com/todo/

it shows a completely blank display. The console log reveals that using a URL that looks like this: example.com/todostyles.ed2b9519a10e56c50eca.css

whereas, the URL should look like this:

example.com/todo/styles.ed2b9519a10e56c50eca.css

That is, with a "/" between "todo" and "styles...".

I'm building the deployable with the following command:

ng build --prod --output-hashing=all --base-href /todo --deploy-url /todo 

Here's the app-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { ErrorComponent } from './error/error.component';
import { ListTodosComponent } from './list-todos/list-todos.component';
import { LogoutComponent } from './logout/logout.component';
import { TodoComponent } from './todo/todo.component';
import { HabitComponent } from './habit/habit.component';
import { ListHabitsComponent } from './list-habits/list-habits.component';
import { YearCalendarComponent } from './year-calendar/year-calendar.component';

import { RouteGuardService } from './service/route-guard.service';



const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'welcome/:name', component: WelcomeComponent, canActivate:[RouteGuardService]},
  { path: 'logout', component: LogoutComponent, canActivate:[RouteGuardService]},
  { path: 'todos', component: ListTodosComponent, canActivate:[RouteGuardService]},  
  { path: 'todos/:id', component: TodoComponent, canActivate:[RouteGuardService]},  
  { path: 'habits', component: ListHabitsComponent, canActivate:[RouteGuardService]},  
  { path: 'habits/:id', component: HabitComponent, canActivate:[RouteGuardService]},
  { path: 'calendar', component: YearCalendarComponent, canActivate:[RouteGuardService]},    
  { path: 'calendar/:id', component: YearCalendarComponent, canActivate:[RouteGuardService]},    
  { path: '**', component: LoginComponent }
];

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

Any ideas are welcome.

Answer 1

Did you try to build the code and specifying the base-href with a trailing /

ng build --prod --output-hashing=all --base-href /todo/ --deploy-url /todo/

Reference: Angular deployment guide at https://angular.io/guide/deployment