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

Question

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

我有一个位于

app/pages/home/home.component.ts

的 Home 组件，并且 home 组件的模板位于同一文件夹中

app/home/home.component.html

当我构建应用程序时，一切似乎都工作正常，直到应用程序部署在

genyMotion

模拟器上。 然后我收到以下错误。

似乎出于某种原因在

app/home.component.html

下寻找 home 组件的模板？ 知道为什么会发生这种情况吗？ 我检查了引用 home 组件的所有模块的导入语句都是正确的。 知道我该如何弄清楚这里发生了什么吗？

我的错误：

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
    
    

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

中使用的 url 不是 组件相关的。您应该阅读有关 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 中的默认路径。你应该阅读原因。

附录：为什么相对组件不是默认的

Webpack 用户可能更喜欢

替代方法。

---

总结：

您可以尝试在

templateUrl 属性中使用 component-relative 或 absolute

 url，但 

inline 解决方案简单易行。 您还可以阅读创建您的第一个 Angular 2 组件教程来使用组件模板。

Answer 3

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

templateUrl: './pages/home/home.component.html';