Install dnn-sxc-angular

  1. Run npm install "@2sic.com/dnn-sxc-angular" --save to add the dnn-sxc-angular connector

Make App Aware of DNN

We must ensure that the HttpClient uses DNN headers when making requests. This is handled by dnn-sxc-angular, but for this it must be initialized, which requires changes to the app.module.ts and the app.component.ts in /src/app.

Setup app.module.ts

Open app.module.ts and add HttpClientModule to the imports and DnnInterceptor to providers. At the top, add these imports and add the DnnInterceptor to the providers:

// ... imports you already had
import { HttpClientModule } from '@angular/common/http';
import { DnnInterceptor } from '@2sic.com/dnn-sxc-angular';
// ... more imports

@NgModule({
  // ...existing stuff
  imports: [
    // ... your stuff
    HttpClientModule,
  ]
  providers: [ DnnInterceptor ],
  // ...more stuff
})
// ... more stuff

You can find an example of this in the app.module.ts of the demo app.

Change app.component.ts to Link into DNN

The app.component.ts must basically have the following changes

  1. inherit from DnnAppComponent
  2. get the ElementRef and the current Context
  3. execute the constructor of DnnAppComponent so that dnn-sxc-angular can auto-configure itself.

This look approx like this (see also the app.component.ts on the demo app):

import { Component, ElementRef } from '@angular/core';
import { DnnAppComponent, Context } from '@2sic.com/dnn-sxc-angular';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent extends DnnAppComponent {
 constructor(
 el: ElementRef,
 context: Context
 ) {
 super(el, context);
 }
 title = 'my-app';
}

You are now set, running the app in DNN ensures that the HttpClient is reconfigured automatically.