[英]NativeScript component independency with Angular2
在我的NativeScript項目中,我正在嘗試構建獨立的組件。 因此,我遵循了angular2官方教程,並在component標簽中使用了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';
}
}
錯誤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)
還有我的項目樹的屏幕截圖:
附加文件
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;
}
nativescript-angular軟件包的“ ^ 0.1.6 ”版本支持使用Angular 2 moduleId
。 請注意,該版本使用的是Angular 2的官方“ 2.0.0-rc.1 ”。這是您應該在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"
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.