如何设置 templateUrl 和 styleUrls

Question

我做了一个小应用程序，但它已经包含在 app.component.ts 中了。现在我正在尝试将其分解为单独的组件和服务。作为第一步，我尝试将我的代码拆分成单独的组件。
但我无法设置 templateUrl 和 styleUrls。我得到的代码和错误如下所示。这是我的 app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from './app.routing';
import { SearchComponent } from './search-component/search.component';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [AppComponent, SearchComponent],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule { }

app.routing.ts 文件

import { SearchComponent } from './search-component/search.component';

export const routes = [
  { path: "", component: SearchComponent }
  ];

export const navigatableComponents = [
  SearchComponent
  ];

app.component.ts

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

@Component({
  selector: "my-app",
  template: `
  <ActionBar title="Glossary" class="action-bar"></ActionBar>
  <page-router-outlet></page-router-outlet>`,
  styleUrls: ["app.component.css"]
})
export class AppComponent {

}

search.component.ts

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

@Component({
    selector: "my-app",
    template: `<Label text="search Here" class="small-spacing"></Label>`
})
export class SearchComponent {
  constructor(){
  }
}

现在它工作正常，但是当我将 HTML 和 CSS 拆分为单独的文件时，如下所示。它给出了错误。

templateUrl: "search.component/search.component.html", 我也尝试过这种方式。

templateUrl: "search.component.html",

控制台显示这个。

04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethodNative(Native Method)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1197)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1061)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1047)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1028)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1018)

GitHub 存储库 here

Answer 1

再添加一个moduleId 属性:

If we decide on CommonJS formats AND we use a standard module loader, then we can use the module.id variable which contains the absolute URL of the component class [when the module file is actually loaded]: the exact syntax is moduleId: module.id.

This moduleId value is used by the Angular reflection processes and the metadata_resolver component to evaluate the fully-qualified component path before the component is constructed.

CommonJS

@Component({
    moduleId: module.id
    selector: "my-app",
    templateUrl: './reative/path'
})
export class SearchComponent {
  constructor(){
  }
}

并在根（例如根模块）中声明此对象

declare var module: {
    id: string;
};

以及此 post 的更多配置：https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

顺便说一句，您可以使用 webpack 进行捆绑，或 Angular CLI 进行脚手架应用程序。

如何设置 templateUrl 和 styleUrls

How to set templateUrl and styleUrls

typescript

nativescript

angular2-nativescript

angular