NativeScript component independency with Angular2

Question

In my NativeScript project, I am trying to build independent components. So I followed official angular2 tutorial and used moduleId property in the component tag. But when building it on android with $tns livesync android --watch I am getting an error saying that the html file (for the template) could not be found. Here are the details :

The component.ts source code :

import {Component} from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "file-explorer",
    templateUrl: 'component.html',
    styleUrls: ['component.css']
})
export class FileExplorerComponent {
   private _fileItems = [
        {name: 'test01', isDirectory: true},
        {name: 'ex01.fen', isDirectory: false},
        {name: 'test05', isDirectory: true},
        {name: 'test04', isDirectory: true},
        {name: 'ex04.fen', isDirectory: false},
        {name: 'ex02.fen', isDirectory: false},
        {name: 'test02', isDirectory: true},
        {name: 'test03', isDirectory: true},
        {name: 'ex03.fen', isDirectory: false},
    ];

    public fileTypeValue(isDirectory:boolean):string {
        return isDirectory ? 'DIR' : 'FIL'; 
    }
}

The error stacktrace :

JS: EXCEPTION: Error: File  /data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositio nsArchiver/files/app/components/file_explorer_component/component.html  does not exist.

JS: STACKTRACE:
JS: Error: File  /data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositio nsArchiver/files/app/components/file_explorer_component/component.html  does not exist.
JS:     at FileSystemXHR.get  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/nativescript-angular/xhr.js:18:19)
JS:     at DirectiveNormalizer.normalizeTemplate  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/@angular/compiler/src/directive_normaliz er.js:51:30)
JS:     at DirectiveNormalizer.normalizeDirective  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/@angular/compiler/src/directive_normaliz er.js:24:21)
JS:     at  /data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositio nsArchiver/files/app/tns_modules/@angular/compiler/src/runtime_compiler.js :60:165
JS:     at Array.map (native)
JS:     at RuntimeCompiler._loadAndCompileComponent  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/@angular/compiler/src/runtime_compiler.j s:60:107)
JS:     at RuntimeCompiler.resolveComponent  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/@angular/compiler/src/runtime_compiler.j s:41:18)
JS:     at  /data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositio nsArchiver/files/app/tns_modules/@angular/core/src/application_ref.js:99:3 7
JS:     at  /data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositio nsArchiver/files/app/tns_modules/@angular/core/src/application_ref.js:292: 26
JS:     at ZoneDelegate.invoke  (/data/data/com.loloof64.nativescript.chess_positions_archiver.ChessPositi onsArchiver/files/app/tns_modules/zone.js/dist/zone-node.js:281:29)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.callJSMethodNative(Native Method)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.callJSMethodImpl(Runtime.java:726)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.callJSMethod(Runtime.java:712)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.callJSMethod(Runtime.java:693)
05-25 06:07:01.948  2110  2110 W System.err:    at  com.tns.Runtime.callJSMethod(Runtime.java:683)

And a screenshot of my project tree :

Additional files

component.html :

<StackLayout orientation="vertical">
    <WrapLayout orientation="horizontal" *ngFor="let item of _fileItems">
        <Label class="file_type" text={{fileTypeValue(item.isDirectory)}}>Loading ...</Label>
        <Label text="{{item.name}}">Loading ...</Label>
    </WrapLayout>
</StackLayout>

component.css:

Label.file_type {
    background-color: #38F;
}

I reccomend that you pass the NativeScript + Angular-2 tutorial so you can avoid the small differences in the syntax <Label *ngFor="#element of data.list" [text]="element.text"></Label> Here is the link to the official tutorial docs.nativescript.org/angular/tutorial/ng-chapter-0.html — Nick Iliev
– Nick Iliev, Commented May 25, 2016 at 12:26
According to me, the official tutorial does not cover the problematic of angular2 relative path, as do the page of the link I gave. — loloof64
– loloof64, Commented May 26, 2016 at 10:11

Vladimir Amiorkov · Accepted Answer · 2016-05-29 12:23:58Z

1

The use of Angular 2 moduleId is is supported in "^0.1.6" version of the nativescript-angular package. Note that that version is using the official "2.0.0-rc.1" of Angular 2. Here is a list of the dependencies you should have in your package.json:

"dependencies": {
        "@angular/common": "2.0.0-rc.1",
        "@angular/compiler": "2.0.0-rc.1",
        "@angular/core": "2.0.0-rc.1",
        "@angular/http": "2.0.0-rc.1",
        "@angular/platform-browser": "2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
        "@angular/platform-server": "2.0.0-rc.1",
        "@angular/router": "2.0.0-rc.1",
        "@angular/router-deprecated": "2.0.0-rc.1",
        "@angular/upgrade": "2.0.0-rc.1",
        "nativescript-angular": "0.1.6",
        "nativescript-intl": "^0.0.2",
        "parse5": "1.4.2",
        "punycode": "1.3.2",
        "querystring": "0.2.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "tns-core-modules": "^2.0.0",
        "url": "0.10.3",
        "zone.js": "^0.6.12"
    },

answered May 29, 2016 at 12:23

Vladimir Amiorkov

2,9514 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

loloof64 Over a year ago

It works, thanks. I had just to restart my project from scratch, as, for a reason I don't know, none of node module could be imported in typescript.

Vladimir Amiorkov Over a year ago

If you are using VS Code, in its latest versions +1.1.1 Microsoft has made some performance enchantments that seam to "lock" the "node_modules" folder. I have found that in such situations I should quite VS Code and manually delete the "node_modules" folder. After that npm manages to download all of the correct modules from the package.json.

loloof64 Over a year ago

Maybe that's why I could not sove the node modules dependencies problem in my old project version. Thank you, next time, I'll do that way.

Collectives™ on Stack Overflow

NativeScript component independency with Angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related