首页 > 其他分享 >关于 Angular 应用部署时的 base-href 参数

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

时间:2023-04-04 09:35:17浏览次数:47  
标签:shop fs dist 应用程序 server href base Angular

import { existsSync } from 'fs';
 
server.get(['/shop/*','/shop'], (req, res) => {
res.render(indexHtml, {
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
});
});
 
server.set('views', distFolder + '/shop );
const fs = require("fs");
fs.copyFileSync('dist/spartacusstore/browser/index.html', 'dist/spartacusstore/browser/shop/index.html');

这段代码是在使用 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 服务器上部署多个应用程序而不会发生冲突。

标签:shop,fs,dist,应用程序,server,href,base,Angular
From: https://www.cnblogs.com/sap-jerry/p/17285291.html

相关文章

  • Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
    Angular应用里server.ts文件,下面这段代码的含义?server.get('*',(req,res)=>{res.render(indexHtml,{req,providers:[{provide:APP_BASE_HREF,useValue:req.baseUrl}],});});在Angular应用中,server.ts文件是用于构建服务器端渲染(S......
  • 1006-HBase操作实战(JAVA API模式)
    一、准备阶段开发环境:hadoop: hadoop -2.4.0hbase: hbase -0.94.11-securityeclipse:JunoServiceRelease2二、创建 hbasedemo项目1、通过Eclipse创建一个新Java工程2、右击项目根目录,选择“Propertiesà>JavaBuildPathà>Libraryà> Add Ext......
  • 1005--HBase操作实战(HBase Shell命令行模式)
    通过HBase命令行,创建一张表,用户存储用户信息,其中包括基本信息和额外信息HBaseshell下所有命令可以使用:help“cmd”进行了解1、创建表create't_person',{NAME=>'basic_info'},{NAME=>'extra_info'}2、表中存储数据put't_person','g201425001','ba......
  • 1004-HBase的基本操作
    1、连接HBase./bin/hbaseshell2、创建一个表使用create命令创建一个表,必须给出特定的表名(tablename)和列族(theColumnFamilyname)hbase(main):001:0>create'test','cf'3、列出表信息hbase(main):002:0>list'test'4、put数据到指定的表使用put命令,并指定表,行建,列族......
  • hbase常用操作
    原文参考:www.51niux.com一、Hbase常用操作1.1hbase命令行介绍$/opt/soft/hbase/bin/hbase--helpBASICUsage:hbase[<options>]<command>[<args>]Options:--configDIR使用的配置目录。默认值:./conf--hostsHOSTS覆盖“regionserver”文件中的列表--aut......
  • 06.Sentiment Analysis Based on Deep Learning: A Comparative Study
    SentimentAnalysisBasedonDeepLearning:AComparativeStudy深度学习的情感分析的比较研究目前在社交网络中的情绪分析已经成为了解用户意见的有力手段,并有着广泛应用。然而情感分析的效率和准确性受到自然语言处理中遇到的挑战和障碍本问综述了采用深度学习解决情感分析......
  • 一文搞定:前端如何选择Angular、React和Vue三大主流框架
    在前端开发领域,目前最流行的三个框架是Angular、React和Vue.js。这些框架非常高效,并且它们各自具有一系列的优缺点。在AI辅助编程工具CodeGeeX的后台中,也看到有大量的前端开发者使用这三个框架,并且Vue的使用率在CodeGeeX的后台中,持续走高。接下来我们针对Angular、React和Vue.js......
  • Graph database concepts
    Graphdatabaseconcepts图数据结构由nodes(离散对象)组成,这些nodes可以通过relationships(关系)连接起来。Example1.图结构的概念.xxxxxxxxxx ​pycharm图数据库模型由一下属性组成:Nodes描述域的实体(离散对象).Nodes可以有零个或多个labels来定义(分类)它们是什么......
  • 大数据学习之Hbase shell的基本操作
    HBase的命令行工具,最简单的接口,适合HBase管理使用,可以使用shell命令来查询HBase中数据的详细情况。安装完HBase之后,启动hadoop集群(利用hdfs存储),启动zookeeper,使用start-hbase.sh命令开启hbase服务,最后在shell中执行hbaseshell就可以进入命令行界面Habseshell的help对语法的介绍......
  • Springboot 系列 (27) - Springboot+HBase 大数据存储(五)| HBase REST 服务
    REST(RepresentationalStateTransfer)即表述性状态传递,是RoyFielding博士2000年在他的博士论文中提出来的一种软件架构风格。它是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性。在三种主流的Web服务实现方案中,与复杂的SOAP和XML-RPC相......