时间戳

首页 > 解决方案 > 如何将 Angular 项目集成到 Squarespace 自定义模板中

angular - 如何将 Angular 项目集成到 Squarespace 自定义模板中

问题描述

目标：

我正在尝试在我的 Squarespace 网站上创建一个支持大量用户交互的自定义​​页面。因为 Angular 使构建单页应用程序变得非常容易，所以我希望能够使用 Squarespace 的开发人员模式来集成它。

技术可行性：

据我了解，这应该是可能的，因为 angular 编译为 javascript 并且 Squarespace 支持自定义 javascript。我还看到了这个 SO 问题，另一个社区成员也表示应该可以：Integrating Angular CLI with Squarespace

方形空间设置：

我确实有一个高级帐户并启用了开发者模式。我还克隆了 Squarespace 项目，并能够在我的机器上成功地在本地运行该项目。最后，我已经能够按照 Squarespace 的说明创建一个静态页面，我可以在其中放置自定义 html 和 javascript。到目前为止没有问题。

角度设置：

为了简单起见，我创建了一个新的 Angular 应用程序并立即运行 ng build 将其编译为 javascript。这将在 /dist/ 目录中创建所有必要的文件。

我遇到的问题是让一个有角度的应用程序加载到这些自定义页面之一上。

Angular / Squarespace 集成的尝试：

试验一：

我尝试的第一件事是将 /dist/ 目录的内容复制到 Squarespace 的 pages 目录中。因为自定义页面已经创建并在应用程序中运行，所以我将 index.html 正文的内容放入静态页面中。

  <app-root></app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>

这不起作用，因为 squarespace 使用它自己的 url 路径生成，所以我的脚本是相对于我的自定义页面的路径而不是服务器的根目录加载的。

试验二：

我注意到的一件事是 Squarespace 提供了一个 /scripts/ 目录来存储自定义脚本。在阅读了有关自定义脚本的 Squarespace 文档后，我将我的 js 文件移动到了脚本目录并更新了我的脚本标签以遵循他们的指导方针：

<app-root></app-root>
<squarespace:script src="inline.bundle.js" combo='true'></script>
<squarespace:script src="polyfills.bundle.js" combo='true'></script>
<squarespace:script src="styles.bundle.js" combo='true'></script>
<squarespace:script src="vendor.bundle.js" combo='true'></script>
<squarespace:script src="main.bundle.js" combo='true'></script>

这确实解决了无法找到脚本的 404 问题，但现在 chrome 正在报告：

bootstrap ff237d7…:19 Uncaught TypeError: parentJsonpFunction is not a function
    at webpackJsonpCallback (bootstrap ff237d7…:19)
    at polyfills.bundle.js:1

试验 3：

考虑到问题可能与无效路径有关，我尝试使用base-href 标志重新编译角度应用程序。因为 Squarespace 要求将文件放在 /scripts/ 目录中，所以这是我设置为 base-href 的值：

ng build --base-href=/scripts/

不幸的是，这没有效果。Chrome 继续报告相同的错误。

此代码是在 Angular 应用程序编译期间生成的，因此调试或修改这些文件似乎不是一个好主意。

下一步？

我的问题是，如何克服这个错误，我应该怎么做才能让这些文件毫无问题地加载？

谢谢您的帮助！

标签： angularsquarespace

解决方案

似乎正在发生的是值 window["webpackJsonp"] 在加载模板外壳时已设置为无效值。通过取消设置这个值，它确实让编译的角度文件成功加载。我的自定义页面现在看起来像

<app-root></app-root>
<script>window["webpackJsonp"] = undefined;</script>
<squarespace:script src="inline.bundle.js" combo="false"/>
<squarespace:script src="polyfills.bundle.js" combo="false"/>
<squarespace:script src="styles.bundle.js" combo="false"/>
<squarespace:script src="vendor.bundle.js" combo="false"/>
<squarespace:script src="main.bundle.js" combo="false"/>

但是，我不确定这是最好的解决方案。尚不清楚原始值 window["webpackJsonp"] 用于什么，或者 Squarespace 模板中的某些其他功能是否仍需要它。出于这个原因，我仍然会鼓励其他社区成员推荐更好的解决方案或建议来改进这个。

推荐阅读