Umbraco自定义模块路由问题求助：主页面及子视图加载失败

Hey there, let’s dig into why your custom homeSection dashboard in Umbraco 7.7.x is failing to load both the main view and its subviews. I’ve run into this exact kind of headache before, so let’s break down the most common culprits and fixes step by step.

Umbraco is surprisingly picky about dashboard configuration paths and aliases. Let’s start here because a misconfig here will break everything before your views even get loaded.

Double-check that your entry points to the correct main view path, and that your section alias is unique (no conflicts with built-in Umbraco sections). Here’s a working example to compare against:

<dashboards>
  <section alias="homeSection">
    <dashboard alias="homeDashboard">
      <areas>
        <area>content</area> <!-- Adjust this to the backoffice area where you want your dashboard to appear -->
      </areas>
      <view>/App_Plugins/HomeSection/Index.html</view> <!-- Absolute path from site root -->
      <access>
        <grant>admin</grant>
        <grant>editor</grant>
      </access>
    </dashboard>
  </section>
</dashboards>

• Ensure the <view> path matches exactly where your Index.html lives (typos in folder names or file extensions are a super common gotcha).
• If your dashboard isn’t tied to a specific area, you can omit the <areas> block entirely.

Umbraco 7 runs on AngularJS 1.x, so your main view needs to properly hook into Umbraco’s Angular scope, and subviews need correct path references.

Common mistakes to fix: #

• Forgetting to wrap your content in a controller directive that matches your Angular setup.
• Using incorrect relative paths for subviews (paths here are relative to your Index.html file, not the site root).

Here’s a working Index.html example with a subview:

<!-- Load your app.js first - path is absolute from site root -->
<script src="/App_Plugins/HomeSection/app.js"></script>

<div ng-controller="HomeSection.Controller">
  <h2>My Custom Home Dashboard</h2>
  <!-- Load subview: relative path to Index.html's folder -->
  <div ng-include="'./Views/Subview.html'"></div>
</div>

If your subview is in /App_Plugins/HomeSection/Views/Subview.html, the relative path ./Views/Subview.html will work. You can also use an absolute path, but relative is cleaner for portability.

Your Angular module needs to register properly with Umbraco’s core dependencies, and your controller needs correct injection. A missing dependency or misnamed controller will break the entire view.

Here’s a solid example of a working app.js:

(function () {
    'use strict';

    // Register your module with Umbraco's core dependencies
    angular.module('HomeSection', ['umbraco', 'umbraco.resources'])
        .controller('HomeSection.Controller', HomeSectionController);

    // Inject services to avoid minification breaks - critical for Umbraco!
    HomeSectionController.$inject = ['$scope', '$http'];

    function HomeSectionController($scope, $http) {
        // Add your controller logic here
        $scope.welcomeMessage = "Hello from your custom dashboard!";
    }
})();

• Make sure your module name (HomeSection) and controller name (HomeSection.Controller) match exactly what you’re referencing in Index.html.
• Don’t skip the $inject array—Umbraco’s minified scripts will break your controller without it.

Umbraco caches dashboard configurations and view files aggressively. Even if you fixed the issue, old cached data might still be causing problems:

1. In the Umbraco backoffice, go to Developer > Refresh > Refresh Client Dependency.
2. Do a hard refresh of your browser (Ctrl+F5) to clear local cache.
3. Ensure your /App_Plugins/HomeSection/ folder has read permissions for your web server user (IIS_IUSRS on Windows, www-data on Linux).

If you’re still stuck, your browser’s dev tools will tell you exactly what’s broken:

• Console tab: Look for Angular errors like Unknown provider, Module not found, or 404 errors for missing files.
• Network tab: Check if app.js, Index.html, and your subview files are loading with a 200 status code (404 means your path is wrong).
• Elements tab: See if the main dashboard container is rendering at all—if not, your dashboard.config is likely misconfigured.

If you can share specific error messages from the console or snippets of your actual Index.html/app.js, I can help narrow it down even further!

内容的提问来源于stack exchange，提问作者Arther