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

Question

Goal:

I am trying to create a single custom page on my Squarespace site that has a high amount of user interaction supported. Because Angular make building single page applications pretty easy, I was hoping to be able to integrate this using Squarespace's developer mode.

Technical Feasibility:

It is my understanding that this should be possible because angular compiles down to javascript and Squarespace support custom javascript. I have also seen this SO question where another community member has also communicated that it should be possible: Integrating Angular CLI with Squarespace

Squarespace Setup:

I do have a premium account and have 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 where I can put custom html and javascript. No problems up to this point.

Angular Setup:

To keep things simple, I created a new angular app and immediately ran ng build to compile it to javascript . This creates all the necessary files in the /dist/ directory.

The issue I am having is getting an angular app to load on one of these custom pages.

Attempts at Angular / Squarespace Integration:

Trial 1:

The first thing I had tried was copying the contents of the /dist/ directory into Squarespace's pages directory. Because the custom page was already created and working in the app, I then took the content's of index.html's body and placed them inside the static page.

  <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>

This did not work because squarespace uses it's own url path generation so my scripts were being loaded relative to my custom page's path and not the root of the server.

Trial 2:

One of the things I had noticed, was that Squarespace provides a /scripts/ directory to store custom scripts. After reading the Squarespace documentation about custom scripts , I moved my js files into the scripts directory and updated my script tags to follow their guidelines:

<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>

This did fix the 404 issue where the scripts could not be found, but now chrome is reporting:

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

Trial 3:

Thinking that maybe the issue is related to an invalid path, I tried recompiling the angular app using the base-href flag . Because Squarespace requires the files be placed in the /scripts/ directory, that was the value I set as the base-href:

ng build --base-href=/scripts/

Unfortunately, this had no effect. Chrome continues to report the same error.

This code is generated during the angular app compilation so it does not seem to a good idea to debug or modify these files.

Next Steps?

My question is, how do overcome this error and what should I do differently that would allow these files to load without issue?

Thanks for the help!

Answer 1

What appears to be happening is that the value window["webpackJsonp"] is already set to an invalid value from loading the template shell. By unsetting this value, it does let the compiled angular files load successfully. My custom page now looks like

<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"/>

However, I am not certain this is the best solution. It is unclear what the original value window["webpackJsonp"] was used for or if it is still needed for some other functionality within the Squarespace template. For that reason, I would still encourage other community members to recommend better solutions or suggestions to improve this one.