Integrate Angular for Runtime in 2sxc / Dnn

you are here (click to zoom) - discover the stack

This explains how to best integrate Angular in Dnn. Note that you can find a working demo of this in the Template Angular App.

Goals of the Runtime Integration

1. The Angular App can be compiled using best-practices incl. partial loading and hashed files
2. The Angular solution can be easily distributed to another Dnn/2sxc as a 2sxc App package
3. We can run multiple editions of the same app, like a live and a staging edition for internal review
4. The final page has the app tag and all the script/css resources as the Angular compiler generated them
5. Changes to the Angular App are automatically included without manual changes

Implementation

In the Template App the compiled Angular SPA is in [app-root]/live/dist/ng-app/. The way it's integrated in the template app is that the main file _AngularApp.cshtml has some code like this:

@inherits Custom.Hybrid.Razor12
@using ToSic.Razor.Blade;
@{
  // ...
  // Add <base> tag using RazorBlade - Angular needs this so that links changing dialogs (routes) work properly
  HtmlPage.AddBase((Link.Base()));

  // ...

  // Create helper to integrate angular best-practice
  var ngHelpers = CreateInstance("./shared/_Angular.cshtml");

  // ...
  @Html.Raw(ngHelpers.ImportAngularHtml(editions.CurrentEdition));
}

We've removed some of the code here for simplicity, but the important parts are

1. Add <base> header to the page for Angular Routing to work properly
2. ImportAngularHtml which will scan the index.html which Angular creates, extract all the important parts and add them to the page

Note that there is a bit more magic happening to ensure we can run multiple editions (live, staging, ...). To see the full source code, get the Angular 11 Template App or browse it here Angular 11 Template App Github Repo

---

History

1. First version for Angular 4 created in 2017
2. Enhanced for Angular 6 in 2019
3. Enhanced for Angular 8 in 2020
4. Enhanced for Angular 11 and dnn-sxc-angular 11 in February 2021