Create View to Host Angular in DNN
Do the following from within the folder which contains the app:
- Run
npm run build to build the app. Angular will build the app into the /dist folder.
- Copy
index.html from /dist/[app-name]/ to the root of your app and name it _Index.cshtml. We will use this file as our 2sxc template file. We can't use the index file generated by Angular, because we want to integrate it into DNN (we don't need the html, body tags etc.).
- Open
_Index.cshtml and remove doctype, html, meta, title, link and body tags. Then adapt the path for the JavaScript files to correspond to their location, by adding @App.Path/ to the script/js tags. The file should look ca. like this:
<base href="/">
<app-root></app-root>
<script type="text/javascript" src="@App.Path/dist/my-app/runtime.js"></script>
<script type="text/javascript" src="@App.Path/dist/my-app/polyfills.js"></script>
<script type="text/javascript" src="@App.Path/dist/my-app/styles.js"></script>
<script type="text/javascript" src="@App.Path/dist/my-app/vendor.js"></script>
<script type="text/javascript" src="@App.Path/dist/my-app/main.js"></script></body>
Note: If you're building as an angular element, the list will look different, but I assume you'll know what to do if you're using elements.
Configure the View in 2sxc
- In DNN, add the app to a page and go to view/template configuration - there set the file (probably _index.cshtml) as your view.
- Now close the admin UI and in DNN, select this new view as your view and verify the output works.