Nativescript-angular: templateUrl does not work

Created on 24 Jul 2016 · 8Comments · Source: NativeScript/nativescript-angular

Hi I have been trying to split my app up into templates. I have a component like below

import {Component} from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "home",
    templateUrl: 'home.html'
})
export class HomeComponent {}

This component is in /app/home/home.component.ts
And template is here /app/home/home.html

However when i run this i get the error

JS: EXCEPTION: Error: File /data/data/org.nativescript.groceries/files/app/home/home.html does not exist. Resolved from: /data/data/org.nativescript.groceries/files/app/home/home.html

Package.json

{
  "name": "Groceries",
  "version": "1.0.0",
  "description": "A NativeScript-built iOS and Android app for managing grocery lists",
  "repository": {
    "type": "git",
    "url": "https://github.com/nativescript/sample-Groceries.git"
  },
  "keywords": [
    "NativeScript"
  ],
  "author": "TJ VanToll <[email protected]> (http://tjvantoll.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nativescript/sample-Groceries/issues"
  },
  "homepage": "https://github.com/nativescript/sample-Groceries/groceries",
  "nativescript": {
    "id": "org.nativescript.groceries",
    "tns-ios": {
      "version": "2.1.0"
    },
    "tns-android": {
      "version": "2.1.1"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "nativescript-angular": "0.2.0",
    "tns-core-modules": "2.1.0"
  },
  "devDependencies": {
    "babel-traverse": "6.7.6",
    "babel-types": "6.7.7",
    "babylon": "6.7.0",
    "filewalker": "0.1.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  },
  "scripts": {
    "android": "tns run android --emulator --device=android",
    "hot:android": "tns livesync android --emulator --watch"
  }
}

question

Source

el-davo

Most helpful comment

Hello @el-davo

As @m-abs has pointed out, the path in templateUrl is relative to your app folder.

However, in your case you ar using moduleId: module.id, and moduleId is used to resolve relative paths for your stylesheets and templates as it says in the Angular documentation.

So in your case you can try the following solutions:
1.) Do not use moduleId and pass the relative path to your template based on the root app directory (e.g. templateUrl: 'home/home.html')

2.) Use moduleId: module.id and pass the path of your template against your component.
For example in your case this should work out as expected:

import {Component} from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "home",
    templateUrl: './home.html'
})
export class HomeComponent {}

You can find basic sample illustrating this behaviour at this link

NickIliev on 25 Jul 2016

👍11

All 8 comments

If you look at the paths in the example project's pages:
https://github.com/NativeScript/sample-Groceries/blob/master/app/pages/login/login.component.ts#L18

You can see they use a path relative to app/
Try home/home.html

m-abs on 24 Jul 2016

Tried this also. But still get the same issue

el-davo on 24 Jul 2016

Hello @el-davo

As @m-abs has pointed out, the path in templateUrl is relative to your app folder.

However, in your case you ar using moduleId: module.id, and moduleId is used to resolve relative paths for your stylesheets and templates as it says in the Angular documentation.

So in your case you can try the following solutions:
1.) Do not use moduleId and pass the relative path to your template based on the root app directory (e.g. templateUrl: 'home/home.html')

2.) Use moduleId: module.id and pass the path of your template against your component.
For example in your case this should work out as expected:

import {Component} from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "home",
    templateUrl: './home.html'
})
export class HomeComponent {}

You can find basic sample illustrating this behaviour at this link

NickIliev on 25 Jul 2016

👍11

Thanks @NickIliev, option 2 works. Feel free to close

el-davo on 30 Jul 2016

👍5

Definitively the option 2 works perfect!!!

isaacfi on 1 Nov 2017

I think we should point out this point in the tutorial, cause it stuck me quite a lot time :p @NickIliev

kaiye on 13 Nov 2017

👍4

Thank you @NickIliev, because of your answer it did not take me long to find and fix this error! Google has indexed this answer as one of the top answers when searching "nativescript templateurl"!