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


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?


inside “list” inside groceries folder?

refering fodler structure here


No, the folder structure is this…

…from the tutorial here…


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

    selector: "component-tag",
    templateUrl: "./the-component.component.html"

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

    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.


Ah ha! Thank you @gabitoesmiapodo,

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

  selector: "list",
  providers: [GroceryListService],
  templateUrl: "./list.html",
  styleUrls: ["./list-common.css", "./list.css"]

…and …

  selector: "",
  templateUrl: "./pages/login/login.html",
  styleUrls: ["./pages/login/login-common.css", "./pages/login/login.css"],
  providers: [

I hadn’t noticed the …


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


It looks like using …


…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.