Question

目标：

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

技术可行性：

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

空间设置：

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

角度设置：

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

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

尝试进行Angular / Squarespace集成：

审判1：

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

审判2：

我注意到的一件事是，Squarespace提供了一个/ scripts /目录来存储自定义脚本。阅读Squarespace documentation about custom scripts之后，我将js文件移至scripts目录并更新了script标签以遵循其准则：

<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重新编译有角度的应用程序。因为Squarespace要求将文件放置在/ scripts /目录中，所以这是我设置为base-href的值：

ng build --base-href=/scripts/

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

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

下一步？

我的问题是，如何克服该错误？我该如何做些什么才能使这些文件无问题地加载？

感谢您的帮助！

Answer 1

似乎正在发生的事情是，在加载模板shell时，值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"/>

但是，我不确定这是最佳解决方案。目前尚不清楚原始值窗口是用来做什么的，或者是否仍然需要Squarespace模板中的某些其他功能。因此，我仍然鼓励其他社区成员提出更好的解决方案或建议，以改善这一状况。

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

1 个答案: