В моем проекте NativeScript я пытаюсь создать независимые компоненты. Поэтому я следовал official angular2 tutorial и использовал свойство moduleId в теге компонента. Но при создании на андроиде с $tns livesync android --watch
я получаю сообщение о том, что html-файл (для шаблона) не найден. Вот подробности:Независимость компонента NativeScript от Angular2
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-2, чтобы можно было избежать небольших различий в синтаксисе Вот ссылка на официальный учебник https : //docs.nativescript.org/angular/tutorial/ng-chapter-0.html –
Согласно мне, официальный учебник не охватывает проблематику относительного пути углового2, как и страница ссылки, которую я дал. – loloof64