Angular directive templateUrl not working

Question

This is my code so far, to return a view in browser via Angular custom directive, using @html.partialview

var newOne = function () {
    return {
        restrict: "A",
        templateUrl: "newone.html",
        replace: true,
        scope: {},
        controller: ['$scope', function ($scope) {
            }]
    }
}

I declare the id "newone.html" here:

<script type="text/ng-template" id="newone.html">
            @Html.Partial("~/Views/AngularTemplates/Newone.cshtml")
        </script>

and ofcourse I call the directive from the html:

<div data-new-one></div>

Unfortunately I do not get the appropriate response. All I get is an error message(console inspector): [$compile:tpload] Failed to load template: newone.html

I tried to store the .cshtml in multiple folders, or even load it from bundleconfig... But nothing! Any ideas? Thank you!

Put that template in a HTML file or use the templateCache module. — yBrodsky, May 04 '16 at 19:12
First, it sounds like @html.partial is an ASP.NET command so you should add that as a tag in your question. Also, you should check the developer console and ensure that the `` — Dr. Cool, May 04 '16 at 19:12

score 1 · Answer 1 · answered May 04 '16 at 19:14

1

You shouldn't need to use the @Html.Partial.

Try changing your directive code to this:

var newOne = function () {
    return {
        restrict: "A",
        templateUrl: "~/Views/AngularTemplates/Newone.cshtml",
        replace: true,
        scope: {},
        controller: ['$scope', function ($scope) {
            }]
    }
}

answered May 04 '16 at 19:14

Dr. Cool

3,713
3
22
26

Thank you but unfortunately this didn't work. I don't get the error any more but neither the appropriate view returns as well. – Georgios May 05 '16 at 06:02

score 0 · Answer 2 · edited Apr 01 '17 at 03:37

0

Found the solution in Angular documentation:
https://docs.angularjs.org/error/$compile/tplrt which says:

the template must have exactly one root element

Seems that multiple <div> tags or even comments are getting the error.

edited Apr 01 '17 at 03:37

Pang

9,564
146
81
122

answered May 05 '16 at 08:40

Georgios

1,454
6
17
34

score 0 · Answer 3 · edited Aug 26 '16 at 17:30

0

Create a new file name named:

~/Views/AngularTemplates/Newone.**tpl**.cshtml

Just copy and past contents of old file into new tpl.html file adding tpl(template) before the cshtml or html

Example:

stuff.tpl.html

edited Aug 26 '16 at 17:30

pableiros

14,932
12
99
105

answered Aug 26 '16 at 16:40

Daniel Medina

44
1
8

score 0 · Answer 4 · answered Apr 25 '20 at 08:21

You can import template in the script and use it as a "template", not "templateUrl":

import newone from 'newone.html';
var newOne = function () {
return {
    restrict: "A",
    template: newone,
    replace: true,
    scope: {},
    controller: ['$scope', function ($scope) {
        }]
      }
    }

Angular directive templateUrl not working

4 Answers4