关于 Angular 应用部署时的 base-href 参数

简介: 关于 Angular 应用部署时的 base-href 参数

这段代码是在使用 Node.js 进行 Angular 应用的服务器端渲染(Server-side rendering,简称 SSR)时,针对特定路由路径进行了一些额外的处理。


代码中使用 Node.js 内置模块 fs 中的 existsSync 方法,判断 indexHtml 文件是否存在。如果文件不存在,则应该返回 404 错误页面。


  • 代码中的 server.get 方法监听了 /shop/* 和 /shop 两个路由路径,并在请求这两个路径时渲染应用的主模板 indexHtml。在渲染模板时,通过 providers 属性将 APP_BASE_HREF 的值设置为当前请求的路径 req.baseUrl,这样 Angular 应用就能够正确地根据请求路径进行路由匹配了。

  • 代码中的 server.set 方法设置了应用程序的视图文件夹,即告诉服务器应该从哪里加载视图文件。在这个例子中,视图文件夹的路径是 distFolder + ‘/shop’,也就是应用程序的构建输出目录 dist 下的 shop 文件夹。

  • 代码中使用了 Node.js 内置模块 fs 中的 copyFileSync 方法,将 Angular 应用的构建输出目录 dist/spartacusstore/browser 下的 index.html 文件复制到视图文件夹 dist/spartacusstore/browser/shop 下,以便在渲染 /shop 和 /shop/* 路由路径时使用。


·ng build --base-href /shop/· 是一个 Angular CLI 的命令,用于构建 Angular 应用程序,并设置应用程序的基本 URL。


具体来说,–base-href 参数用于指定应用程序在 Web 服务器上的基本 URL,也就是说,应用程序将被部署在 http://server.com/shop/ 这个 URL 下。这个参数的值应该是以斜杠开头和结尾的相对路径,例如 /shop/。


当应用程序加载各种资源文件时,都会以这个基本 URL 作为前缀来加载资源。例如,如果应用程序中有一个 favicon.ico 的图标文件,那么浏览器会请求 http://server.com/shop/favicon.ico 来获取这个文件。


通过指定基本 URL,可以让应用程序在部署时更加灵活。例如,可以将应用程序部署在不同的子目录下,或者在同一个 Web 服务器上部署多个应用程序而不会发生冲突。




相关文章
|
28天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
19 0
|
28天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
31 0
|
27天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
31 0
|
28天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
40 0
|
28天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
19 1
|
22天前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
28天前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
39 1
|
28天前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
46 8
|
28天前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
31 3
|
28天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。