3

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!

Krejko
  • 901
  • 1
  • 9
  • 23
  • Does the compiled code work if you run it outside of Squarespace? If you just open the index.html file on your machine for example – user184994 Sep 28 '18 at 19:42
  • @user184994 If a run a file server like browser-sync out of the /dist/ directory, the compiled angular app runs with no issues. – Krejko Sep 28 '18 at 19:48
  • Does setting `combo='false'` on all scripts result in the same error? Setting it to false will avoid further processing of the JS via Squarespace's own minification. This sometimes helps me debug. – Brandon Sep 28 '18 at 19:49
  • @Brandon This is a great thought. I just tried with both true and false for the script tag's combo attribute and unfortunately the result is the same either way. – Krejko Sep 28 '18 at 19:53
  • Squarespace's docs imply that you can load scripts from `/scripts/` without using `squarespace:script`. If that's the case, I think that may have changed at some point (or the docs are incorrect?). I distinctly remember building projects where I had to move some scripts to `/assets/` and load them from there because `/scripts` was inaccessible unless using `squarespace:script`. But to be honest, I don't remember exactly how I landed on that solution. Maybe give that a shot. – Brandon Sep 28 '18 at 21:33

1 Answers1

3

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.

Krejko
  • 901
  • 1
  • 9
  • 23