奇怪的NativeScript / Angular2问题，应用程序在错误的位置查找模板

Question

我有一个非常基本的Nativescript / Angular2条码扫描器应用程序，我刚开始实现路由...

我有一个Home组件位于app/pages/home/home.component.ts，主组件的模板位于同一个文件夹app/home/home.component.html当我构建应用程序时，每个人似乎工作正常，直到应用程序部署在genyMotion模拟器上。然后我得到以下错误。

由于某种原因，它似乎正在寻找app/home.component.html下的主组件模板？知道为什么会这样吗？我检查了所有引用home组件的模块的import语句是否正确。知道我怎么能搞清楚这里发生了什么吗？

我的错误：

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to resume activity {org.nativescript.barcodescanner/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreateView failed

Error: File /data/data/org.nativescript.barcodescanner/files/app/home.component.html does not exist. Resolved from: home.component.html.
File: "/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js, line: 22, column: 12

堆栈跟踪：

    Frame: function:'FileSystemResourceLoader.get', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js', line: 22, column: 19
    Frame: function:'DirectiveNormalizer._fetch', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js', line: 13661, column: 45
    Frame: function:'DirectiveNormalizer.normalizeTemplateAsync', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modul

my home.component.ts：

import { Component,} from '@angular/core';

import { RestService } from '../../services/rest.service';
import { LocalStorageService } from '../../services/local-storage.service';

@Component({
  selector: 'home',
  templateUrl: './home.component.html' 
})
export class HomeComponent {

  constructor(private restService: RestService, private localStorageService: LocalStorageService) {

}


}

我的app.routing.ts :(由于我正忙着将网络应用程序转换为移动设备并且仍在添加所有组件的过程中，很多评论出了这个文件）

import { AppComponent } from './app.component';
//import { ProductComponent } from './components/product/product.component';
//import { StockTransactionComponent } from './Components/stock-transaction/stock-transaction.component';
//import { CheckBarcodesComponent } from './Components/check-barcodes/check-barcodes.component';
import { HomeComponent } from "./pages/home/home.component";
//import { SettingsComponent } from './Components/settings/settings.component';

export const routes = [
    //{path: "settings", component: SettingsComponent },
//  {path: "checkBarcodes", component: CheckBarcodesComponent },    
    {path: "", component: HomeComponent}
];

export const navigatableComponents = [
HomeComponent
];

我的app.module.ts：

import { NgModule, ValueProvider } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptRouterModule } from 'nativescript-angular/router'
import { NativeScriptHttpModule } from 'nativescript-angular/http';


import { BarcodeScanner } from "nativescript-barcodescanner";

import { RestService } from './services/rest.service';

import { AppComponent } from "./app.component";
import { HomeComponent } from "./pages/home/home.component";
import { routes, navigatableComponents } from './app.routing';
@NgModule({
    imports : [
    NativeScriptModule,     
    NativeScriptFormsModule ,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
    ],
    declarations : [
    AppComponent,
    HomeComponent,
    ...navigatableComponents
    ],
    providers : [
    RestService,
    BarcodeScanner],
    bootstrap : [AppComponent]      
})
export class AppModule {}

my app.component.ts:


import { Component } from "@angular/core";



@Component({
    selector: "main",
    template : "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {}

Answer 1

您是否尝试将moduleId添加到@Component定义中？我读过它打破了Webpack兼容性，但我不知道这对你来说是否重要：

@Component({
  moduleId: module.id,
  templateUrl: "home.component.html",
  // ..
})

然后将home.component.html放在与此组件相同的文件夹中。

Answer 2

您可以将templateUrl更改为template并使用内联HTML代码。

templateUrl: './home.component.html' => template: `<!-- contents of ./home.component.html -->`

templateUrl 中使用的网址不是组件相关的。您应该阅读有关componet-relative urls以及如何使用webpack从菜谱中加载它们的更多信息。

  

默认情况下，我们必须指定返回应用程序的完整路径   根。我们称之为绝对路径，因为它是绝对的   尊重应用程序根。

     

绝对路径存在两个问题：

We have to remember the full path back to the application root.

We have to update the URL when we move the component around in the application files structure.

     

编写和维护我们的应用程序要容易得多   组件，如果我们可以指定模板和样式位置相对   到他们的组件类文件。

组件相对路径在Angular中不是默认值。你应该读懂原因。

  

Appendix: why component-relative is not the default

     

Webpack用户可能更喜欢alternative approach。

要点：

您可以尝试在templateUrl属性中使用组件相对或绝对网址，但内联解决方案很简单而且容易。 您还可以阅读Creating Your First Angular 2 Components教程，了解如何使用组件模板进行操作。

Answer 3

因此，当使用一个对我有用的单独模板（pages / home / home.component.ts）时，似乎NativeScript需要绝对路径：

templateUrl：＆＃39; ./ pages / home / home.component.html＆＃39;;