Integrate Angular for Runtime in 2sxc / Dnn

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

This explains how to best integrate Angular development in Dnn so you can enjoy hot-reloading while developing, and still use Dnn/2sxc Endpoints at the same time. 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 developed using best-practices incl. partial loading and hashed files
2. We can see the dev-build in Dnn in real-time
3. The dev-build can access Dnn endpoints as if it were running in production
4. Hot-reload works, so saving files automatically reloads the Dnn page

Implementation

The Template App is installed in Dnn and we have the full copy of it on our local dev environment. Dev-server will run on localhost:4200. 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");

  // ...
  @ngHelpers.LoadFromNgServe()
  // ...
}

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. LoadFromNgServe will load the standard Angular files from localhost:4200

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