angular - Angular 7 - アプリのベース URL と angular スクリプトの間のスラッシュを削除します

Question

現在、アプリ名と呼び出された Angular JavaScript の間に「/」を挿入していない Angular-7 アプリを作成していますが、ローカルではなくネット上にデプロイされている場合のみです。

編集:ビルドされたアプリケーションで「index.html」を確認しましたが、JavaScript インクルードが最初にアプリ名を持つように誤って設定されています。たとえば、以下では、「todoruntime...」ではなく「todo/runtime」と読む必要があります。

<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>

原文:

たとえば、次の URL を使用する場合:

http://localhost:4200/todo/

またはこの URL:

http://localhost:4200/todo

正常に動作します (ログイン ページに移動します)。2 番目の例では、末尾にバックスラッシュが自動的に追加されます。

ただし、Web サイトにデプロイすると、ログイン ページが表示されず、代わりに Angular スクリプトを呼び出すときにバックスラッシュが失われます。

たとえば、ブラウザに次の URL のいずれかを入力すると、次のようになります。

exmaple.com/todo

また

exmaple.com/todo/

完全に空白のディスプレイが表示されます。コンソール ログは、example.com/todostyles.ed2b9519a10e56c50eca.css のような URL を使用していることを示しています。

一方、URL は次のようになります。

example.com/todo/styles.ed2b9519a10e56c50eca.css

つまり、"todo" と "styles..." の間に "/" を挿入します。

次のコマンドでデプロイ可能なものを構築しています：

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

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 { }

どんなアイデアでも大歓迎です。