Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

templateUrl does not work

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

11reactions

NickIlievcommented, Jul 25, 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

5reactions

el-davocommented, Jul 30, 2016

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