Trouble with paths

[csj]

Hi, I'm very excited about NativeScript, and excited more still that I can use this excellent-looking project to simultaneously build my web app and native mobile app. I'm having some problems, I think relating to paths.

1. Begin a new Angular-CLI project: ng new my-test && cd my-test
2. npm install
3. ng serve. New app is available on localhost:4200; so far so good.
4. Link in the magic: npm i @wwwalkerrun/nativescript-ngx-magic --save. No issue.
5. Add .tns.html and .tns.css to the existing root level component
6. npm run start.ios -- application builds and deploys, but attempting to run gives a long exception including the line: 22 0x12c3f0250 Jan 18 21:07:59 29657-MBPR nativescript[62479]: file:///app/tns_modules/nativescript-angular/resource-loader.js:22:101: JS ERROR Error: File /Users/chris.stjohn/Library/Developer/CoreSimulator/Devices/A452B32A-7A55-4459-B9C9-4CB01D9B075A/data/Containers/Bundle/Application/71CD535C-7470-4E00-B61F-7F8D98ECE9AB/nativescript.app/app/app.component.html does not exist. Resolved from: app.component.html.

Two things strike me as odd:

1. The generated /nativescript folder includes /app with a second symlinked /app inside it. Is this expected?
2. Shouldn't the iOS runner be trying to locate app.component.tns.html instead of app.component.html, if I read your docs correctly?

Thanks in advance!

[csj]

More steps:

7. Remove user error by swapping in the magic @Component. Slap head.
8. Add a new component at an inner path, e.g. /app/component/my.component.ts. Add all the requisite .html, .tns.html, .css, .tns.css. Use magic @Component here too. Slap head again.
9. Add a reference to the inner component from the outer one, using its selector, in both .html and .tns.html. Example .tns.html: ` <Label [text]="title">

   `

10. ng serve: Looks great, inner component appears
11. npm run start.ios -- application builds and deploys, no errors, but inner component does not appear.
12. Investigate by adding console.log statements to constructors of both components. With ng serve both log statements appear in the browser's console. With npm run start.ios only the outer component's log statement appears in the console.

This may be related to the magic (e.g. failing to resolve the paths) or to NativeScript itself; is there some other way that we should be referencing other components in NativeScript?

[csj]

The plot thickens

13. Spot that Nativescript has its own app.module.ts file, which is currently lacking the inner component as a declaration. Slap forehead again. Actually add the inner component.
14. Aha, the real problem: 21 0x10e79e11d ffi_call_unix64 Jan 18 21:50:54 29657-MBPR nativescript[65426]: 22 0x12cccd5d0 file:///app/tns_modules/nativescript-angular/resource-loader.js:22:101: JS ERROR Error: File /Users/chris.stjohn/Library/Developer/CoreSimulator/Devices/A452B32A-7A55-4459-B9C9-4CB01D9B075A/data/Containers/Bundle/Application/5B238164-7D68-4539-886C-15D086A0AF45/nativescript.app/app/app/my.component.tns.html does not exist. Resolved from: app/my.component.tns.html.

Because the inner component is declared like so: @Component({ selector: 'my-app-component', templateUrl: './my.component.html', styleUrls: ['./my.component.css'] })

but NativeScript expects its templateUrl paths to be absolute. The way I understand the magic to work is that it re-writes the tempateUrl parameter to include the .tns bit, but doesn't properly expand the path. How can it? But we have a quandary here. Because while specifying the templateUrl and styleUrls using absolute paths is fine for Nativescript: @Component({ selector: 'my-app-component', templateUrl: 'app/component/my.component.html', styleUrls: ['app/component/my.component.css'] }) ... it's not so good for Angular2 itself: ERROR in ./src/app/component/my.component.ts Module not found: Error: Can't resolve './app/component/my.component.html' in '/Users/chris.stjohn/codes/my-test/src/app/component'

[NathanWalker]

Hi @csj awesome to hear your excitement thanks :)

Thank you so much for this report. I have just fixed the path resolution as well as updated the docs to reflect a couple things you mentioned for clarity, please see updated Example: https://github.com/wwwalkerrun/nativescript-ngx-magic#example

Please take note of the notice! portions 👍

[NathanWalker]

I also modified Usage steps to include a mention about NativeScript's separate root AppModule, see new #3 here: https://github.com/wwwalkerrun/nativescript-ngx-magic#usage

Thanks again for reporting this! Have fun!

[csj]

You are a gentleman and a scholar. I made the necessary changes and updated your package: everything works as advertised. Consider me unblocked!

[sonicparke]

@NathanWalker @csj I'm having the same trouble it appears but I just pulled down the latest version and dropped it into a new cli app. I'm sure I'm doing it wrong but I haven't been able to find what's wrong. If I use the absolute paths the {N} app runs fine but the web version gets this error:

./src/app/app.component.ts
Module not found: Error: Can't resolve './app/app.component.html' in '/Users/bmcalister/Documents/DEV/tns-test/src/app'
 @ ./src/app/app.component.ts 18:22-57
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

./src/app/app.component.ts
Module not found: Error: Can't resolve './app/app.component.css' in '/Users/bmcalister/Documents/DEV/tns-test/src/app'
 @ ./src/app/app.component.ts 19:21-55
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

I've created a repo here so maybe one of you can tell where I'm going wrong. https://github.com/sonicparke/tns-test

Thanks! I'm glad to see the updates in this new repo!

[NathanWalker]

@sonicparke you were close! The readme was recently updated with new instructions, please see this: https://github.com/wwwalkerrun/nativescript-ngx-magic#example

just submitted a PR to help ya out 👍 enjoy!

[sonicparke]

@NathanWalker Thanks! Between that part of the docs and the video for the CLI it got a bit confusing with what path was needed where. And I didn't realize that moduleId: module.id was necessary if not using systemjs. Thanks!