How to set templateUrl and styleUrls

Question

I made a little application but it has all in app.component.ts . Now I'm trying break it into separate components and services. As the first step I have tried to split my code into separate components.
But I'm unable to set the templateUrl and styleUrls. My codes and error I got is shown below. this is my 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 file

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(){
  }
}

now it is working correctly , but when i'm split my HTML and CSS into separate files like below. It gives error.

templateUrl: "search.component/search.component.html", and I tries this way also.

templateUrl: "search.component.html",

console shows this.

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 repository here

Answer 1

add one more moduleId property:

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(){
  }
}

and declare this object in root(root module for example)

declare var module: {
    id: string;
};

and more config from this post: https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

btw, you could using webpack for bundle, or Angular CLI for scaffolding app.