domingo, 7 de maio de 2017

Extending Umbraco with Angular 2.0

I wasn't able find a any information about how to extend Umbraco Backoffice with Angula 2. The official note, make it clear., but it is old so I believe soon we are going to have a some better news. Till there I found a way to make it to work. Please follow the steps:
  1. Prerequisites: Make sure you are able to run Angular 2 in your Visual Studio. Please follow this information in Angular website. Double check the prerequisites and follow the step 1-5.
  2. Prerequisites: Install Umbraco, for additional information please visit Umbraco website
  3. Test Umbraco, see if you are able to access to Uumbraco Backoffice 
  4. Test Angular JS, build and launch Angular js page: /src/index.html
  5. Extending Umbraco:
    1. Open Dashbaord file:  /config/Dashboard.config
    2. Lets add a tab to developer section as example. So please add the following code after the last existing section </section>. See the Image below
      • Area: choose some area to extend, in this case I am using developer section
      • Tab name: the name that will be displayed
      • Angular js page to call: Select the page you would like to display. 
  6. Copy your angular files each time you build to Umbraco Folders:
    • Select your website project and right mouse click, and select Properties
    • In the properties menu: select Build Events
    • In the post-build add this line: xcopy "$(ProjectDir)src" "$(ProjectDir)Umbraco\"  /E /Y /C
    1. Go to Umbraco Back office and see if you are able to see your Changes
Test it as extensively before you decide to push it to live! 
Have a nice day!



1 comentário:

  1. Hi Adilson,
    Thanks for your post.
    I am confused about Umbraco and Angular 2/4. If the website is using Angular 2/4 and in backend C# API, is possible to use Umbraco as CMS in the site? where do I find info to integrate Angular 4 with Umbraco?
    I appreciate your help.
    Thanks

    ResponderEliminar