NativeScript cannot find Angular components

Question

I've just started out with Angular and NativeScript, for the life of me, I cannot figure out why I cannot get my references to components to work.

First of all, I generate the initial file with: tns create Test --ng.

Next I create the following file structure:

App_Resource
components
---app
------app.component.ts
---create
------create.component.ts
------create.component.html
app.module.ts
app.routing.ts
main.ts

This is the app.component.ts

import { Component } from "@angular/core";
import { Router } from "@angular/router";
@Component({
    selector: "my-app",
    template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent { }

This is the create.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { Router } from "@angular/router";
import * as AppSettings from "application-settings";
@Component({
    selector: "create",
    templateUrl: "./components/create/create.component.html",
})
export class CreateComponent { //... }

This is the app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./compontents/app/app.component";
import { CreateComponent } from "./compontents/create/create.component"
@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent,
    CreateComponent
],
providers: [

],
schemas: [
    NO_ERRORS_SCHEMA
]
})

This is the app.routing.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { CreateComponent } from "./compontents/create/create.component"
const routes: Routes = [
    { path: "", redirectTo: "/compontents", pathMatch: "full" },
    { path: "create", component: CreateComponent }
];
@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

And this is main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);

Problem

When I do tns run android I get the following error messages:

Error: Could not resolve components/create/create.component.html. 
Looked for: /data/data/org.nativescript.AngularTag/files/app/components/create/create.component.html

From the error, it seems like it looks for the components in the wrong folder, however, I'm not exactly sure why.

JoshSommer · Accepted Answer · 2018-01-26 13:24:59Z

8

in your components declaration include moduleId: module.id, then drop the full path for your templateUrl(same would go for a stylesheet).

for example, your create component should be.

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

answered Jan 26, 2018 at 13:24

JoshSommer

2,60820 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

OverflowStack Over a year ago

Changed, but now I get the following message: [ ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'compontents' JS: Error: Cannot match any routes. URL Segment: 'compontents' ]

JoshSommer Over a year ago

In your routes you're redirecting to 'compontents' but there is no components router. try changing that to: const routes: Routes = [ { path: "", redirectTo: "/create", pathMatch: "full" }, { path: "create", component: CreateComponent } ];

OverflowStack Over a year ago

The thing is, I have more than 1 component - I'm trying to recreate this example (github.com/NativeScript/template-hello-world-ng) with more structure. In [items] folder, there are 2 components - [item-details] and [item], I want to rename this folder to [components] and place the two named components into their own respective folder.

JoshSommer Over a year ago

That will work fine, you just need to update the import paths. The apps file structure doesn't' have an effect on the routes.

OverflowStack Over a year ago

Another thing that I was missing (or was I?) was including component names in app.module.ts bootstrap collection.

Collectives™ on Stack Overflow

NativeScript cannot find Angular components

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related