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/

或此网址:

http://localhost:4200/todo

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

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

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

exmaple.com/todo

或

exmaple.com/todo/

它显示完全空白。控制台日志显示使用如下所示的 URL: example.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 

这是应用程序路由.模块:

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