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

Question

目标:

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

技术可行性:

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

Squarespace 设置:

我有一个高级帐户并且有 enabled developer mode .我还克隆了 Squarespace 项目并能够成功 run the project locally在我的机器上。最后，我已经能够按照 Squarespace 的说明转到 create a static page。我可以在哪里放置自定义 html 和 javascript。到目前为止没有问题。

Angular 设置:

为了简单起见，我 created a new angular app并立即将 ng build 运行到 compile it to javascript .这将在/dist/目录中创建所有必需的文件。

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

Angular/Squarespace 集成的尝试:

试验 1:

我尝试的第一件事是将/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 路径生成，所以我的脚本是相对于我的自定义页面的路径加载的，而不是服务器的根目录。

试验 2:

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