Angular 7-应用程序的基本url和angular脚本之间的斜杠
基础概念
Angular 是一个用于构建单页客户端应用的开源平台。它基于 TypeScript 语言，并提供了丰富的工具和库来简化应用的开发和维护。在 Angular 应用程序中，基本 URL（Base URL）是指应用程序的根路径，通常用于配置路由和资源请求的基础路径。
相关优势
- 简化路由配置：通过设置基本 URL，可以避免在路由配置中重复书写根路径，使代码更加简洁。
- 统一资源路径：对于从服务器加载的资源（如图片、样式表、脚本文件等），设置基本 URL 可以确保它们的引用路径始终正确。
- 提高可移植性：如果应用程序需要在不同的域名或子域名下运行，只需调整基本 URL 即可，无需修改大量代码。
类型与应用场景
在 Angular 应用程序中，基本 URL 可以通过两种方式设置：
- 在
index.html中设置： 在index.html文件的<head>部分添加<base>标签，指定基本 URL。例如： - 在
index.html中设置： 在index.html文件的<head>部分添加<base>标签，指定基本 URL。例如： - 这里设置的基本 URL 是根路径
/。 - 在 Angular 配置中设置：
在 Angular 应用程序的配置文件（如
app-routing.module.ts）中，可以通过RouterModule.forRoot()方法的第二个参数来设置基本 URL。例如： - 在 Angular 配置中设置：
在 Angular 应用程序的配置文件（如
app-routing.module.ts）中，可以通过RouterModule.forRoot()方法的第二个参数来设置基本 URL。例如： - 这里设置的基本 URL 是
'my-app'，实际使用时会拼接在路由路径前面。
遇到的问题及解决方法
问题：Angular 应用程序的基本 URL 和 Angular 脚本之间的斜杠问题
当在 index.html 中设置基本 URL 时，可能会遇到斜杠（/）的问题。例如，如果基本 URL 设置为 /my-app/，而 Angular 脚本文件位于根路径下，可能会导致资源加载失败或路由配置错误。
原因：
斜杠（/）在 URL 中具有特殊含义，表示根路径。如果基本 URL 以斜杠结尾，而脚本文件位于根路径下，浏览器可能会将脚本文件的路径解析为相对于基本 URL 的子路径，从而导致资源加载失败。
解决方法：
- 确保基本 URL 和脚本路径一致：
如果基本 URL 设置为
/my-app/，确保 Angular 脚本文件也位于/my-app/目录下。 - 调整基本 URL：
如果脚本文件位于根路径下，可以将基本 URL 设置为
/my-app（不带斜杠结尾）。这样，浏览器会将脚本文件解析为相对于根路径的路径。 - 使用绝对路径：
在
index.html中直接使用绝对路径引用脚本文件，而不是依赖基本 URL。例如： - 使用绝对路径：
在
index.html中直接使用绝对路径引用脚本文件，而不是依赖基本 URL。例如：
示例代码
假设 index.html 文件位于根路径下，Angular 应用程序的基本 URL 设置为 /my-app/，可以这样配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Angular App</title>
<base href="/my-app/">
<script src="/assets/js/main.js"></script>
<!-- 其他标签 -->
</head>
<body>
<app-root></app-root>
</body>
</html>在 app-routing.module.ts 文件中配置路由：
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { basename: 'my-app' })],
exports: [RouterModule]
})
export class AppRoutingModule { }通过以上配置，可以确保 Angular 应用程序的基本 URL 和脚本路径一致，避免斜杠问题导致的资源加载失败或路由配置错误。
相关·内容
我正在编写一个Angular-7应用程序，它目前不会在应用程序名称和调用的Angular javascript之间插入"/“-但仅当它部署在网络上时，而不是在本地。编辑:我在构建的应用程序中选中了"index.html“，但它错误地将javascript include设置为在开始时具有应用程序名称。在第二个示例中，它会自动在末尾添加反斜杠。 但是，当我将其部署到网站时
浏览 22提问于2019-07-04得票数 3
回答已采纳
1回答
我正在尝试通过路由在我的应用程序中启动一个模式。一切似乎都正常，除了在URL中添加了一个阻止其解析的额外斜杠。Url应该是这样的(如果我手动输入它，它就可以工作)……但我得到的却是这个(注意基本url和outlet目标之间的斜杠)……
/a
浏览 17提问于2017-02-07得票数 17
回答已采纳
2回答
首先，我想调整Angular用来匹配URL路由的模式。我已经找到了这个函数，并且它正在对在angular.js (版本)的第5612行找到的这些正则表达式运行URL位置：
SERVER_MATCH = /^([^:]+):\/\/(\w+:{0,1}\w*我使用angular作为桌面AIR应用程序的框架。可以使用HTML/JS构建AIR应用程序，随后将HTML
浏览 0提问于2013-07-16得票数 1
回答已采纳
我有一个带有工作区的库，其中包含两个项目，一个用于库本身，另一个用于测试应用程序。/node_modules/@angular/*"}"extends/tsconfig.json",
但它既不包含这样的baseUrl属性，也不包含paths属性。我试图在测试应用程序<
浏览 27提问于2019-08-17得票数 0
我有一个使用angularJS指令的ui.bootstrap应用程序。ui.bootstrap模块包括在索引中，如下所示： <script src="/angular/angular.js"></script>
<!<script src="/lib/angular-route.
浏览 5提问于2015-05-15得票数 1
回答已采纳
我的图像在src/assets/ images /目录中，在html中，我引用它们的方式如下所示 <img src="assets/images/penndot-logo-full.png" /> 这在我已经使用以下命令构建了我的应用程序 ng build --prod --deploy-url /myapp --base-href /myapp 部分解释了prod angular</e
浏览 12提问于2019-02-02得票数 2
回答已采纳
我有单独的页面，最初我想使用angularJS，因为它有数据绑定和许多其他整洁的特性。我最终使用requireJS仅仅是为了帮助我更好地管理我的依赖项，因为我正在使用的javascript库越来越多。我的问题是，在requireJS中使用AngularJS对非单页面web应用程序来说是不可能的吗？
浏览 0提问于2013-06-17得票数 2
是否可以关闭角度行为，以便在URL中间添加一个斜杠？该应用程序也有一些旧的PHP部分，需要重新工作，所以我需要准确的网址如下所示。
和angular在.php后面添加一个斜杠
浏览 0提问于2019-08-20得票数 0
我正在将应用程序的一部分迁移到angular2，成为该网站的特定移动版本。向index.html添加静态文件可以正确加载静态文件，但是当应用程序引导时，它会将url更改为/ static / (我使用的是路由器)，尽管我的url应该是/order/。有没有一种方法可以使用基本href作为/，但使用angular-cli为脚本
浏览 5提问于2017-03-03得票数 17
回答已采纳
两者都有两个文本框和一个按钮。在单击按钮时，我使用angularjs调用post方法。但当我使用.jsp页面时，它工作得很好，但同样的事情与.html不能一起工作。这是我的Spring控制器- public String addUser(@RequestBody User user) System.out.println("Adding user d
浏览 18提问于2016-08-04得票数 0
1回答
我一直在开发一个网站，其结构如下-
gulp所做的是，它注入所有的scss和依赖项，并启动应用程序。我将如何使用nginx启动<em
浏览 4提问于2016-10-26得票数 1
回答已采纳
在我的linuxmint17中，我尝试使用Angular CLI创建Firebase web应用程序。它问我关于Angular routing的问题。
什么是Angular routing？
浏览 1提问于2019-03-03得票数 69
Angular 4发布了，我想先学习angular 2。为此，我尝试使用angular CLI，但当我使用它创建了angular 4版本的应用程序。我应该使用哪个命令来创建专门的angular 2.4应用程序。
浏览 3提问于2017-03-26得票数 0
当我在本地运行我的应用程序时，它工作正常。Angular2路由和页面渲染在本地机器上工作正常。<system.webServer><rules>
<rule name="Angular2" stopProcessing=&qu
浏览 0提问于2016-12-03得票数 3
我有两个截然不同的项目，一个是在Angular2的前端，另一个是后端，在Java和泽西。
我想要实现的是让前端应用程序由服务器提供服务，该服务器也为后端提供服务(从而避免CORS头配置)。然而，在使用ng build --output-path PATH/TO/WEBAPP-FOLDER命令构建angular应用程序时，我遇到了一个问题。当服务器启动时，我转到PATH/TO/WEBAPP-FOLDER/
浏览 2提问于2017-09-29得票数 0
在angularjs 2中，NPM和NG (anglular-cli)的主要区别是什么。如果通过NPM，如果我们可以构建我们的应用程序，并且它可以工作，那么NG构建的需求是什么(angular-cli)。
npm start vs ( ng serve或ng built)
浏览 3提问于2016-10-12得票数 6
我正在创建一个CMS系统，所以我希望状态是动态创建的。由于您不能在配置阶段内发出http请求，因此我决定将路由添加到.run()函数中，如下所述：http://localhost/CMSv2&
浏览 0提问于2014-08-26得票数 3
我正在尝试使用CdkDragDrop对托管在CdkPortal窗口中的列表进行重新排序，但它不起作用。/div></div>
打字：import { Component } from "@ang
浏览 33提问于2020-11-12得票数 1
我在ASP.NET项目的子文件夹中有一个Angular 2应用程序，我想使用中的技术来捆绑Angular 2应用程序
推荐的方法是使用Angular CLI设置一个项目。假设Angular 2应用程序位于子文件夹/Angular2App/中，似乎Angular CLI希望index.html位于/Angular2App/src/中，
浏览 2提问于2017-03-29得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
