Stating directive templateUrl relative to root
Solution 1
Looks like it's supported. Taken from a thread on AngularJS Google Group:
the url with "/" prefix is relative to the domain, without the "/" prefix it will be relative to the main ("index.html") page or base url (if you use location in the html5 mode).
This works fine:
templateUrl: '/Scripts/app/templates/personalDetails.html'
Solution 2
Looks like you're trying to do ASP.NET style app-relative paths but client-side. The fix is actually in HTML: add a base tag in the head, like this:
<base href="<%= Request.ApplicationPath %>" />
Then keep your template paths relative to this, as in
templateUrl: 'Scripts/app/templates/personalDetails.html'
Solution 3
Use '././Scripts/app/templates/personalDetails.html'
it worked for me.
Solution 4
angular 4 use webpack as bundler.
./ means relative path to current folder
../ means parent folder
domain = src
root = src/index
for example below app.component.ts file, url means xxx.html xxx.css are in the same folder as xxx.ts
./ is relative path as current folder
../ is relative path as parent folder
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Ufuk Hacıoğulları
Updated on July 08, 2022Comments
-
Ufuk Hacıoğulları almost 2 years
I am currently stating templateUrl relative to the current window location.
cvApp.directive('personalDetails', function () { return { restrict: 'A', templateUrl: '../../Scripts/app/templates/personalDetails.html' }; });
How can I make templateUrl relative to root of the application? I am looking for something like this:
templateUrl: '~/Scripts/app/templates/personalDetails.html'
Can AngularJS accomplish this?