Relative vs absolute template paths when using webpack build


#1

I’m trying to get webpack iOS builds working and when running the following

npm run build-ios-bundle -- --release --for-device

I get the error
ERROR in ENOENT: no such file or directory, open '/Users/jeffswitzer/myapp/app/pages/login/pages/login/login.ios.html'

At first i thought the issue was the .ios in the file name causing the issue, but then I noticed the path is messed up as it’s looking for the template in

‘/Users/jeffswitzer/myapp/app/pages/login/pages/login/login.ios.html’`

instead of

‘/Users/jeffswitzer/myapp/app/pages/login/login.ios.html’`

So I changed my decorator from

@Component({
    selector: "login",
    templateUrl: "pages/login/login.html"
})

to a relative path like this:

@Component({
    selector: "login",
    templateUrl: "./login.html"
})

and this makes these particular errors go away when doing npm run build-ios-bundle -- --release --for-device but then when I do tns run ios which normally works for me I get the error:

JS ERROR Error: File /var/mobile/Containers/Data/Application/6483AAC4-E5FF-4946-A6F4-5CD7D9941E6D/Library/Application Support/LiveSync/app/login.html does not exist. Resolved from: login.html.

So relative paths seem to be required by the aot build but tns run ios wants absolute paths from the app directory. Any ideas? I’ve been following these instructions.


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

Not sure why yet but I think this works in both cases:

@Component({
    moduleId: module.id,
    selector: "login",
    templateUrl: "./login.html"
})

Found the info here.


#3

According to this stack answer, which references the angular change log you should use relative paths, but you no longer need to set moduleId: module.id

I’m on angular 4.0.1 so not sure why it complains without moduleId: module.id ahh well.


#4

I’m using this syntax for both Webpack and non-Webpack builds. Removing moduleId: module.id breaks it, even when using ./intro.html:

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

#5

You save my days Eddy !!! Big thanks !!