NativeScript无法找到Angular组件问题求助

Hey there, let's break down exactly why your component references and template paths aren't working, and fix them step by step:

Core Issues Identified #

Looking at your error message and code, two big problems are causing this, plus a small oversight in your module setup:

1. Critical Folder Name Typo (The Biggest Culprit) #

Your actual folder structure uses components, but in every import statement in app.module.ts and app.routing.ts, you've spelled it compontents (missing an e!). For example:

// Wrong spelling in app.module.ts
import { AppComponent } from "./compontents/app/app.component";

Angular can't find your components at all because it's looking for a folder that doesn't exist, which cascades into the template path error you're seeing.

2. Incorrect Template Relative Path #

Your create.component.ts lives inside components/create, so the template path you wrote:

templateUrl: "./components/create/create.component.html",

is trying to look for a nested components folder inside the create folder (which doesn't exist). Instead, use either:

• A relative path from the current file: ./create.component.html
• NativeScript's root path shortcut ~/ (points to your app's root folder): ~/components/create/create.component.html (this is more robust if you ever move files)

3. Invalid Route Redirect + Missing Module Export #

• Your default route redirects to /compontents, but you don't have a route defined for that path. You should redirect to /create instead to load your component on startup.
• Your app.module.ts is missing the export class AppModule { } line at the end—this is required to bootstrap the module.

Step-by-Step Fixes #

Let's apply these fixes one by one:

1. Fix the Folder Name Typo #

Update every import in app.module.ts and app.routing.ts to use components instead of compontents. For example, corrected app.module.ts imports:

import { AppComponent } from "./components/app/app.component";
import { CreateComponent } from "./components/create/create.component";

2. Correct the Template Path #

Update create.component.ts's templateUrl to one of these valid options:

// Option 1: Relative path (simple, works for current file structure)
templateUrl: "./create.component.html",

// Option 2: Root path (more resilient to file moves)
templateUrl: "~/components/create/create.component.html",

3. Fix Route Redirect & Module Export #

• In app.routing.ts, change the default redirect to point to your create route:

  const routes: Routes = [
    { path: "", redirectTo: "/create", pathMatch: "full" },
    { path: "create", component: CreateComponent }
  ];
  

• Add the missing export to app.module.ts:

  @NgModule({
    bootstrap: [ AppComponent ],
    imports: [ NativeScriptModule, AppRoutingModule ],
    declarations: [ AppComponent, CreateComponent ],
    providers: [ ],
    schemas: [ NO_ERRORS_SCHEMA ]
  })
  export class AppModule { } // Add this line!
  

4. Clean & Rebuild #

Before running again, clear NativeScript's cache to avoid leftover issues:

tns clean

Then run your app again:

tns run android

Final Check #

After these changes, Angular will correctly locate your components and their templates, and your route will load the CreateComponent on app startup.

内容的提问来源于stack exchange，提问作者OverflowStack