NativeScript 组件独立于 Angular2

Question

在我的 NativeScript 项目中，我试图构建独立的组件。所以我跟着 official angular2 tutorial 并在组件标签中使用了 moduleId 属性。但是当使用 $tns livesync android --watch 在 android 上构建它时，我收到一条错误消息，指出找不到 html 文件（用于模板）。详情如下：

component.ts源代码：

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

错误堆栈跟踪：

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)

以及我的项目树的屏幕截图：

其他文件

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

nativescript-angular 包的“^0.1.6”版本支持 Angular2 moduleId 的使用。请注意，该版本使用的是 Angular 2 的官方“2.0.0-rc.1”。这是您的 [=19] 中应该具有的依赖项列表=]:

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

NativeScript 组件独立于 Angular2

NativeScript component independency with Angular2

commonjs

typescript

nativescript

angular