Nativeular组件与Angular2的独立性

时间:2016-05-25 10:49:12

标签: typescript angular commonjs nativescript

在我的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)

我项目树的截图:

Project sources tree

其他文件

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

1 个答案:

答案 0 :(得分:1)

&#34; ^ 0.1.6 &#34;支持使用Angular 2 moduleIdnativescript-angular包的版本。请注意,该版本使用官方&#34; 2.0.0-rc.1 &#34; Angular 2.以下是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"
    },