3

我正在编写一个 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

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

欢迎任何想法。

4

1 回答 1

3

您是否尝试构建代码并使用尾随 / 指定 base-href

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

参考：https://angular.io/guide/deployment 上的 Angular 部署指南

于 2019-07-04T01:40:28.103 回答