menu
Logo
  • Why azing?
  • Blog
  • Help
ENarrow_drop_down
  • DE
  • EN
Suche in Checklisten
search
azing Logo ENarrow_drop_down
  • DE
  • EN
  • Why azing?
  • Help
2sxc
drive_folder_upload
  • homeChecklist Templates
  • south
  • fiber_manual_recordPro: Develop with 2sxc (Apps, Content-Types, Templates, etc.)
  • south
  • fiber_manual_recordJS: Angular Apps Development
  • south
  • fiber_manual_recordPrevious Version: Dnn-Sxc-Angular 6
  • south
  • fiber_manual_recordSetup dnn-sxc-angular 6
  • south

folder_sharedSetup dnn-sxc-angular 6

  • homeChecklist Templates
  • south
  • fiber_manual_recordPro: Develop with 2sxc (Apps, Content-Types, Templates, etc.)
  • south
  • fiber_manual_recordJS: Angular Apps Development
  • south
  • fiber_manual_recordPrevious Version: Dnn-Sxc-Angular 6
  • south
  • fiber_manual_recordSetup dnn-sxc-angular 6
  • south

folder_sharedSetup dnn-sxc-angular 6

Folders and checklists

  • check_circlednn-sxc-angular - Enable ng serve development (OLD - CORS)
  • check_circlednn-sxc-angular - Quick Start
  • check_circlednn-sxc-angular - Tutorial - Accessing Content using REST and content$

Parts (0) expand_more

These are small document-parts which are used in other documents. They are not a starting point for any real activity. Because of this, they will be listed further down and the search will not list them unless requested. 

Create View to Host Angular in DNN

Do the following from within the folder which contains the app:

  1. Run npm run build to build the app. Angular will build the app into the /dist folder.
  2. 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.).
  3. 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

  1. In DNN, add the app to a page and go to view/template configuration - there set the file (probably _index.cshtml) as your view.
  2. Now close the admin UI and in DNN, select this new view as your view and verify the output works.
Logo
Legal | Content Copyright CC-BY 4.0
bug_reportReport Bug
  • info
  • Links
  • Permissions
code Share
code
URL copied to clipboard.
Embed Checklist close
Copy Copy
Content Copyright

CC-BY 4.0

Translations

None

2sxc - Content Management for DNN & Oqtane Logo

2sxc - Content Management for DNN & Oqtane

QR-Code
azing.org/2sxc/r/5CNVnRAJ
View & Use

Public (can be used by everybody)

Edit & Admin

Default (all members can edit)

This catalog has a simple permission model, where all members have the same permissions. For advanced permissions, upgrade to Enterprise.

Here you can see how this document is used and linked by other documents

Used in (1)

Others referencing this

  1. dnn-sxc-angular - Quick Start
Uses these (0)

Documents linked from this document

How it Behaves

How this document is categorized changes how it behaves.

This is a partial document. It is listed below the normal documents, and is hidden in the default search.

It belongs to dnn-sxc-angular - Quick Start

Type

This is a Checklist. Lists are converted into checkboxes.

Get something to say?

Comment to start a discussion or make a note
send

please log on to chat

close

Durchsuche ganz Azing