Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chris Speakman 17 posts 152 karma points
    Feb 21, 2024 @ 16:40
    Chris Speakman
    0

    Angular controller errors in Umbraco 10 with Razor Class Library

    Hi

    I'm trying to build a package using a razor class library, just to learn about how they work. I'm using Umbraco 10.8.4. After some initial frustrations most of the functionality is working great but I am having some persistent trouble with my angular controllers for a custom tree section.

    Following the docs on this page https://docs.umbraco.com/umbraco-cms/v/10.latest-lts/extending/section-trees/trees I created a delete.html view and a delete.controller.js JavaScript file and copied the content into each. The JavaScript is also included in the package.manifest file as per the instructions.

    The folder structure looks like this:

    File and folder structure

    The controller looks like this:

    angular.module("umbraco").controller("CSTest.DeleteController", function ($scope) {
    
    function performDelete() {
    }
    
    });
    

    And the view looks like this:

    <div class="umb-dialog umb-pane" ng-controller="CSTest.DeleteController">
        <div class="umb-dialog-body">
            <p class="umb-abstract">
                Are you sure you want to delete this product: <strong>{{currentNode.name}}</strong> ?
            </p>
            <umb-confirm on-confirm="performDelete" on-cancel="cancel">
            </umb-confirm>
        </div>
    </div>
    

    When running the project the delete.html view is found and rendered but the angular code within it is rendered on screen instead of executed and I get a console error:

    angular.js:15697 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.8.3/$controller/ctrlreg?p0=CSTest.DeleteController
    at angular.js:99:1
    at angular.js:11787:17
    at ea (angular.js:10818:34)
    at p (angular.js:10603:32)
    at g (angular.js:9942:13)
    at angular.js:9807:30
    at Object.link (angular.js:29993:9)
    at angular.js:1391:15
    at Ca (angular.js:11376:9)
    at p (angular.js:10695:11) '<div class="umb-modalcolumn-body ng-scope" ng-include="view">'
    

    I've also tried creating a basic edit view and controller with exactly the same results.

    The JavaScript file for the controller is there if I browse to the URL so that has copied across from the RCL correctly.

    Tearing my hair out trying to get this working so any help or insights would be much appreciated!

  • Søren Kottal 712 posts 4570 karma points MVP 6x c-trib
    Feb 22, 2024 @ 07:53
    Søren Kottal
    0

    What does your package.manifest look like?

  • Chris Speakman 17 posts 152 karma points
    Feb 22, 2024 @ 10:00
    Chris Speakman
    0

    It's super simple, again just based on the example docs:

    {
      "javascript": [
        "~/App_Plugins/CSTest/backoffice/productsTree/edit.controller.js",
        "~/App_Plugins/CSTest/backoffice/productsTree/delete.controller.js"
      ]
    }
    
  • Chris Speakman 17 posts 152 karma points
    Mar 04, 2024 @ 15:19
    Chris Speakman
    100

    Thanks to Kevin Jump's excellent series of articles on razor class libraries I've now got to the bottom of this.

    In Umbraco 10 package.manifest files are not picked up from the RCL by Umbraco so you need to add them programmatically. First you need to define the manifest in a class. Here's my example:

    internal class AddManifestFilters : IManifestFilter
    {
        public void Filter(List<PackageManifest> manifests)
        {
            //CSTest package
            manifests.Add(new PackageManifest
            {
                PackageName = "CS Test",
                Version = "0.1",
                AllowPackageTelemetry = true,
                Scripts = new[]
                {
                   "/App_Plugins/CSTest/backoffice/productsTree/edit.controller.js",
                   "/App_Plugins/CSTest/backoffice/productsTree/delete.controller.js",
                   "/App_Plugins/CSTest/csTestService.js"
                }
            });
        }
    }
    

    Then you need to add the manifest via a composer:

    public class RegisterManifestFilters : IComposer
    {
        public void Compose(IUmbracoBuilder builder)
        {
            builder.ManifestFilters().Append<AddManifestFilters>();
        }
    }
    

    Thanks to Kevin for the helpful articles - I only wish I'd come across them earlier!

Please Sign in or register to post replies

Write your reply to:

Draft