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;
}

Answer 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"
    },