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

Question

目标：

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

技术可行性：

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

Squarespace 设置：

我有一个高级帐户并且有 enabled developer mode. I have also cloned down the Squarespace project and was able to successfully run the project locally on my machine. Lastly, I have been able to follow the Squarespace's instructions to create a static page 我可以在其中放置自定义 html 和 javascript。到目前为止没有问题。

Angular 设置：

为了简单起见，我 created a new angular app and immediately ran ng build to compile it to javascript。这将在 /dist/ 目录中创建所有必需的文件。

我遇到的问题是让 angular 应用加载到这些自定义页面之一。

尝试 Angular / Squarespace 集成：

试验一：

我尝试的第一件事是将 /dist/ 目录的内容复制到 Squarespace 的页面目录中。因为自定义页面已经创建并在应用程序中运行，所以我将 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 documentation about custom scripts 后，我将我的 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 flag 重新编译 angular 应用程序。因为 Squarespace 要求将文件放在 /scripts/ 目录中，所以这是我设置为 base-href 的值：

ng build --base-href=/scripts/

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

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

后续步骤？

我的问题是，如何克服此错误以及我应该采取哪些不同的措施才能让这些文件顺利加载？

感谢您的帮助！

Answer 1

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

<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 模板中的某些其他功能是否仍需要它。出于这个原因，我仍然会鼓励其他社区成员推荐更好的解决方案或建议来改进这个。

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

How to integrate Angular project into Squarespace custom template

squarespace

angular