使用gulp-jsforce-deploy将Angular 12应用部署至Salesforce方法咨询

前置准备 #

• 本地环境已安装Node.js 14+、npm/yarn、Salesforce CLI，提前完成目标Salesforce组织的授权认证
• Angular 12项目已完成基础调试，无构建报错
• 已安装gulp基础依赖：npm install gulp --save-dev

部署操作步骤 #

1. 安装部署相关依赖包 #

在Angular项目根目录执行命令：
npm install gulp-jsforce-deploy gulp-rename gulp-zip --save-dev

2. 调整Angular构建配置 #

修改项目根目录下angular.json文件的两个配置项：

• 将projects.<你的项目名>.architect.build.options.outputPath修改为dist/salesforce-staticresources/MyAngularApp（MyAngularApp可替换为你自定义的静态资源名称）
• 将projects.<你的项目名>.architect.build.options.baseHref修改为/resource/MyAngularApp/，匹配Salesforce静态资源的访问路径规则
  调整完成后执行生产构建：ng build --prod，确认构建产物输出到上面配置的目录中。

3. 编写gulp部署配置文件 #

在项目根目录新建gulpfile.js，写入以下配置：

const gulp = require('gulp');
const zip = require('gulp-zip');
const forceDeploy = require('gulp-jsforce-deploy');
const fs = require('fs');

// 打包构建产物为Salesforce静态资源格式
gulp.task('package-static', function() {
  return gulp.src('./dist/salesforce-staticresources/MyAngularApp/**/*')
    .pipe(zip('MyAngularApp.resource'))
    .pipe(gulp.dest('./deploy-pkg/staticresources'))
    .on('end', () => {
      // 生成静态资源对应的元数据文件
      const metaContent = `<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Public</cacheControl>
    <contentType>application/zip</contentType>
</StaticResource>`;
      fs.writeFileSync('./deploy-pkg/staticresources/MyAngularApp.resource-meta.xml', metaContent);
    });
});

// 执行部署到Salesforce
gulp.task('deploy', gulp.series('package-static', function() {
  return gulp.src('./deploy-pkg/**/*', { base: '.' })
    .pipe(forceDeploy({
      username: '你的Salesforce账号',
      password: '你的登录密码+安全令牌',
      // 若部署到沙箱，添加如下配置：
      // loginUrl: 'https://test.salesforce.com'
    }));
}));

注意替换配置中所有自定义的静态资源名称、Salesforce账号密码信息，避免部署失败。

4. 执行部署命令 #

在项目根目录执行：gulp deploy，等待命令执行完成后，即可在Salesforce组织的静态资源列表中看到对应的Angular应用包，后续可通过Visualforce页面、LWC组件引入该静态资源访问应用。

常见问题规避 #

• Angular路由建议切换为HashLocationStrategy模式，避免Salesforce的路径规则导致路由跳转404
• 所有静态资源（图片、字体、第三方样式等）的引用路径需调整为相对路径，避免生产环境加载失败
• 若部署提示权限校验失败，优先检查安全令牌是否正确、账号是否具备Metadata API部署权限

内容的提问来源于stack exchange，提问作者Prabakaran A