Angular 7 - 在应用程序的基础 url 和 angular 脚本之间删除斜线

Question

我正在编写一个 Angular-7 应用程序，它目前没有在应用程序名称和调用的 Angular javascript 之间插入“/” - 但仅当它被调用时部署在网络上，而不是本地。

编辑：我在构建的应用程序中检查了 "index.html"，它错误地设置了 javascript 包含在开头的应用程序名称。例如。在下面，它应该读作 "todo/runtime"，而不是 "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>

原文：

例如，当我使用这个 URL:

http://localhost:4200/todo/

或这个URL：

http://localhost:4200/todo

它工作正常（转到登录页面）。在第二个示例中，它会自动在末尾添加反斜杠。

但是，当我将其部署到网站时，它不显示登录页面，而是在调用 Angular 脚本时以某种方式丢失了反斜杠。

例如，如果我在浏览器中输入以下任一 URLS：

exmaple.com/todo

或

exmaple.com/todo/

显示完全空白。控制台日志显示使用 URL 看起来像这样：例如.com/todostyles.ed2b9519a10e56c50eca.css

然而，URL 应该是这样的：

example.com/todo/styles.ed2b9519a10e56c50eca.css

即在"todo"和"styles..."之间加一个“/”。

我正在使用以下命令构建可部署文件：

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

这是应用程序-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 { }

欢迎任何想法。

Answer 1

您是否尝试构建代码并指定带有尾随/

的 base-href

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

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

Angular 7 - 在应用程序的基础 url 和 angular 脚本之间删除斜线

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

angular

url

angular7

backslash

angular7-router