templateUrl does not work

[el-davo]

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 <tj.vantoll@gmail.com> (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"
  }
}

[m-abs]

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

[el-davo]

Tried this also. But still get the same issue

[NickIliev]

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

[el-davo]

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

[isaacfi]

Definitively the option 2 works perfect!!!

[kaiye]

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

[Marcidius]

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"!

[jrz]

But moduleId: module.id is deprecated.
angular is such a mess. last time using this