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脚本时会以某种方式丢失反斜杠。

例如，如果我在浏览器中输入以下任一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

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

任何想法都欢迎。

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和角度脚本之间添加斜线

1 个答案: