2016-05-25 4 views
0

В моем проекте 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) 

И скриншот моего проекта дерева:

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

Я рекомендую, что вы передаете учебник NativeScript + Angular-2, чтобы можно было избежать небольших различий в синтаксисе Вот ссылка на официальный учебник https : //docs.nativescript.org/angular/tutorial/ng-chapter-0.html –

+0

Согласно мне, официальный учебник не охватывает проблематику относительного пути углового2, как и страница ссылки, которую я дал. – loloof64

ответ

1

Использование угловыми 2 moduleId будет поддерживается в "^0.1.6" версии пакета nativescript-angular , Обратите внимание, что эта версия использует официальную «2.0.0-RC.1» углового 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" 
    }, 
+0

Он работает, спасибо. Мне нужно было просто перезапустить проект с нуля, так как по какой-то причине я не знаю, ни один модуль узла не мог быть импортирован в машинопись. – loloof64

+1

Если вы используете VS Code, в его последних версиях +1.1.1 Microsoft сделала некоторые улучшения производительности, которые швы «заблокировали» папку «node_modules». Я обнаружил, что в таких ситуациях я должен вполне VS Code и вручную удалить папку «node_modules». После этого npm удается загрузить все правильные модули из package.json. –

+0

Возможно, поэтому в моей старой версии проекта я не смог решить проблему зависимостей узлов узлов. Спасибо, в следующий раз, я сделаю это. – loloof64