Angular 4 on Kentico

This has been an unexplored territory so far to integrate angular 4 in Kentico.

So, I decided to try that myself.

Start with setting up the angular environment as given in link https://angular.io/guide/setup
and make sure that the application is running with Hello Angular text.

The application structure will look like this with all transpiled js files.

Now let's start integrating this into Kentico.

I have Kentico 10 installed on my local machine and the base URL is http://localhost/kentico10 .

Create a folder "Angular4" under CMS folder and copy src & node_module folders into it. Remove all the .ts, .html & map files as we would not need them to run the app.

Now open kentico admin site and create a page with blank template. Open the template for editing and take the head section from index.html and add in head area of template.

Like below :-

In the layout section, let's add the placeholder for our app, body section of index.html.

Now, there are few adjustment required to do to make the application work as we are not using angular in it's purest form. Let's see the required changes.

1) Open the file src/systemjs.config.js and change the npm_module path like below :-

2) Open the file src/main.js and add js extension on app.module reference like below :-

3) Open the file src/app/app.module.js and add .js extension the path for app.compnent referent like below :-

4) Now let's change the name model value and so that we see some change happening :)

Let's view the page and the magic begins :-

As you can see the use case is very simple but idea is to get started and extend this to do more complex things like calling rest api to get data and display etc.

All the js files discussed here is available on https://github.com/manibs/Angular4OnKentico