How to marry/integrate Angular2+ SPA with Sitecore 8.2

Hello Sitecore Community,

Since I am new to Sitecore and the documentation is kinda cryptic for me, I am reaching out to you directly. My goal is to integrate an Angular2+ Application into Sitecore 8.2. A solution with iframes is unwanted, so I am trying to find a way to integrate it. The Angular SPA should ideally be reusable in Sitecore, so it can be easily put on several pages. The SPA itself does not need to use the Sitecore Item API, it should just be rendered inside a Sitecore page. Sitecore should just load/initialize the SPA and nothing else.

How can I achieve this? I was initially thinking about using a custom Rendering, but I don't know if it's the right way. Unfortunately the documentation does not help me at all.

 

 

Best Regards,

Roland

  • Hi Ronald,

    It should be pretty straightforward if you don't need the SPA to be server-side rendered.
    1. Create any Sitecore rendering (MVC or WebForms - depending on your ASP.NET presentation tech flavor) that hosts a <div id="your-app" /> and adds a <script /> with the path to the Angular app bundle entry .js file.
    2. Build your Angular2 app, deploy it to Sitecore webfoot. In theory, your Angular app can mount to a div by ID, so you may need to modify that behavior.

    That should be it in theory. You should be able place the rendering on any page where you want your SPA to render client-side.

    While it should render within Experience Editor, you won't be able to edit the app content since it not coming from Sitecore, but from what I am reading, you don't want that anyways.

    Hope it helps.
    Alex