Groceries - why are paths to login.html and list.html different?


#1

In Chapter 3 the templateUrls are…

templateUrl: “./pages/login/login.html”,

templateUrl: “./list.html”,

…why are the paths different. login.html is relative to app/ and list is relative to the local folder i.e. why does…

templateUrl: “./pages/list/list.html”,

…give a page not found error?


#2

@PurpleEdge
inside “list” inside groceries folder?

refering fodler structure here https://github.com/NativeScript/sample-Groceries/tree/master/app


#3

No, the folder structure is this…

…from the tutorial here…

https://docs.nativescript.org/angular/tutorial/ng-chapter-3


#5

If you use it like this (notice the moduleId: module.id property) you can use relative paths.

@Component({
    moduleId: module.id,
    selector: "component-tag",
    templateUrl: "./the-component.component.html"
})

If you use it like this (notice the lack of moduleId: module.id property) you must use full paths.

@Component({
    selector: "component-tag",
    templateUrl: "./pages/the-component-folder/the-component.component.html"
})

This is assuming that the-component.component.ts and the-component.component.html are both in the same folder.


#6

Ah ha! Thank you @gabitoesmiapodo,

At this stage of the tutorial the components are declared as…

@Component({
  selector: "list",
  providers: [GroceryListService],
  moduleId: module.id,
  templateUrl: "./list.html",
  styleUrls: ["./list-common.css", "./list.css"]
})

…and …

@Component({
  selector: "",
  templateUrl: "./pages/login/login.html",
  styleUrls: ["./pages/login/login-common.css", "./pages/login/login.css"],
  providers: [
    UserService,
  ]
})

I hadn’t noticed the …

moduleId: module.id

…and I missed any reference to it in the tutorial. I am also watching the video of the tutorial and noticed that it was using the full path, but couldn’t see why it was working in their code.

Mystery solved!


#7

It looks like using …

moduleId: module.id,

…might be coming mandatory, which is another way of saying it shouldn’t be necessary. :wink:

I’m coming from Ionic and these little differences are annoying.