New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

May the 4th Angular be with you: 2sxc 9.0 with Angular 4

2sxc 9 is out and it's bringing the future to DNN. The foundation is now based on EF Core, new UIs use Angular 4, a Dutch language pack was added and way more. In this post I would like to tell you more about the Angular 4 integration. 

2sxc is a Material Girl

The first thing you'll notice with 2sxc 9 is the new look, based on the material design paradigm. Here's a quick look at the new In-Page UI with FABs (Floating Action Buttons):

2sxc and Angular 4

We're fully commited to modern JS development stacks like React and Angular. For consistency, our drug of choice for 2sxc UIs is Angular - now Angular 4. It's impossible to refactor an application like 2sxc in any reasonable time, so our first focus is the end-user experience - and the first part we're recreating is the Quick-Dialog-Experience. 

As you can see, it's almost the same as before, but with important changes:

  1. It's not inline any more, so the preview of the page perfect
  2. There is now only one quick-dialogs on screen, making it easier to use
  3. The quick-dialog floats in from above allowing you to scroll and see your content - this is also in anticipation of better mobile editing

Here's another view, with App-configuration buttons:

We're not done yet :) - this release 9.0 is especially made for the International Star-Wars day, but in about a week we'll deliver a nicer tile-based selector instead of the drop down, so stay tuned.

Angular 4 Pains and Lessons Learned

A word of warning to all you Angular lovers - going to Angular 4 has a steep and rewarding learning curve. I would just like to give you a quick overview of things we ran into which took "longer than expected" - if you know what I mean :)

  1. Typescript and new JavaScript with "let" and lambdas - things are very different here compared to the old JS-style programming
  2. Observables instead of promises - very different way of programming, gotta get used to it
  3. Reconfiguring $http is very different - no more $httpProvider.defaults... instead you have to "inherit" the http-class and specify it in the depedency injection...
  4. ...and that's very important, because DNN can't handle http-requests without the special, secret headers :)
  5. Modules / Components are very different - took some time to get into that
  6. Routing is special - again a learning curve
  7. The CLI, AOT and special compiles of Angular-code 
  8. Paths to script-loading is fairly tricky, because angular CLI provides a cache-breaking mechanism which we cannot use in DNN
  9. ...and more

I'll tell you way more at my Angular session at DNN-Connect 2017 - see you there! 

Love from Switzerland,
Daniel & Christoph & Luca

PS: Image courtesy to

PPS: Download the latest 2sxc on Github now :)

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler


kurt wilbies
Awesome, really great.

But could you please explain, in detail, and preferably with a non-2sxc module OR with useful sample code, how to correctly set Http Request Header, in Angular 4, using RequestOptions, in DNN modules.

I trully love 2sxc.
kurt wilbies Monday, May 8, 2017 9:06 AM (link)
Daniel Mettler
@kurt thanks :)
We're just perfecting the setup right now for the session at DNN-Connect :).
It's actually very tricky if you want to do it right (dependency injection, automatic module-id detection, etc.) but we've spent more than 2 days on this! and we have a solution :)
We'll then release both demo apps as well as NPM packages for developers starting from scratch
Daniel Mettler Wednesday, May 24, 2017 6:14 AM (link)
@Daniel, did you ever release a npm package for the developers. I have a couple angular 4 apps out in the wild but had to "force" them to work in DNN. I would love to see how you guys solved some of the same issues.
Jordan Wednesday, August 30, 2017 3:40 AM (link)
Daniel Mettler
@jordan The NPM is published, but our demo / tutorial app + documentation/blog never got done. I'll see if we can finish & publish it today...
Daniel Mettler Friday, September 1, 2017 8:46 AM (link)
Daniel Mettler
Just fyi: the package is here - but as mentioned without a guide you'll probably not be able to use it, so we'll try to do that asap.
Daniel Mettler Friday, September 1, 2017 8:47 AM (link)
thanks Daniel, I look forward to it. I see that for angular4+ you have extended the existing http provider to account for the needed headers in a DNN web api request. I'm still fighting with the best way to capture the moduleId, services framework etc in the module html and pass it into the angular app. I have a method that works but I was curious as to what you came up with. I use a html and not ascx file for the main view of my module. I extract the dnn wep api process into its own service. This allows me to build an app that would be easy to move into another environment because all I would have to do is change my rest end points. As a result, I have no dependency on webforms and I can look forward to core and DNN together... like you recent blog post suggests. The only other tightly coupled part of the app to DNN is the security roles and user accounts. But that is another hill to climb.
Jordan Friday, September 1, 2017 2:16 PM (link)
Daniel Mettler
@Jordan: we're a bit late - sorry, will take another few days. When we wanted to publish our demo app we realized that it still has a few bugs. Since our work is usually used as templates for other work, we must be sure that it's really good.

BTW: our solution is really neat - we're injecting everything as various observables upon which httpclient must rely, which lets the application "boot" without a final state and wait for the observables to kick in...
Daniel Mettler Wednesday, September 6, 2017 11:25 AM (link)
Daniel Mettler
To all: It's finally published - start here

I'll write a few more posts about it, so people understand it, but this should get you started.
Daniel Mettler Thursday, September 14, 2017 2:50 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out