Angular - 同一模块上的组件页面内的组件不是已知元素

Question

我遇到了这个问题。我在模块内创建了一个“pages”文件夹，然后创建了一个组件，因为我想将其放在页面上，但 CLI 给了我以下错误消息：

ng serve -o

⠏ Building...
X [ERROR] NG8001: 'nutricow-categories' is not a known element:
1. If 'nutricow-categories' is an Angular component, then verify that it is part of this module.       
2. If 'nutricow-categories' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/nutricow/pages/landing-page/landing-page.component.html:0:0:
      0 │ 
        ╵ ^

  Error occurs in the template of component LandingPageComponent.

    src/app/nutricow/pages/landing-page/landing-page.component.ts:5:15:
      5 │   templateUrl: './landing-page.component.html',

这是我的 nutricow/页面/登陆页面：

html:

<nutricow-categories></nutricow-categories>

ts：

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

@Component({
  selector: 'nutricow-landing-page',
  templateUrl: './landing-page.component.html',
  styles: ``
})
export class LandingPageComponent {

}

这是我的营养/成分/类别：

ts：

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

@Component({
  selector: 'nutricow-categories',
  templateUrl: './categories.component.html',
  styles: ``
})
export class CategoriesComponent {

}

Nutricow模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NutricowRoutingModule } from './nutricow-routing.module';
import { SharedModule } from '../shared/shared.module';

import { LandingPageComponent } from './pages/landing-page/landing-page.component';
import { EditPageComponent } from './pages/edit-page/edit-page.component';
import { InfoPageComponent } from './pages/info-page/info-page.component';
import { CategoriesComponent } from './components/categories/categories.component';



@NgModule({
  declarations: [
    LandingPageComponent,
    EditPageComponent,
    InfoPageComponent,
    CategoriesComponent,
  ],
  imports: [
    CommonModule,
    NutricowRoutingModule,
    SharedModule,
  ]
})
export class NutricowModule { }
`

And its loaded by LazyLoad:
`const routes: Routes = [
  {
    path: 'nutricow',
    loadChildren: () => import('./nutricow/nutricow-routing.module').then( m => m.NutricowRoutingModule )

  },
  {
    path:'**',
    redirectTo: 'nutricow'
  }
];

我已经尝试了一切，但似乎没有任何效果。有谁知道它可能是什么？ 谢谢！

我尝试将选择器放在同一模块上的另一个组件中。我收到的信息不是已知元素。

Answer 1

将

loadChildren

更改为

loadComponent

{
    path: 'nutricow',
    loadComponent: () => import('./nutricow/nutricow-routing.module').then( m => m.NutricowRoutingModule )
}