无法在 Angular 中导入我的自定义组件

Question

我是 Angular 的新手，在导入我的组件时遇到问题。我声明了一个包含所有组件的模块，将其用作共享组件模块我在侧边栏组件中使用输入组件，在应用程序模块中使用侧边栏组件，工作正常。问题是当我想在基页内使用输入组件时，我导入模块并在 html 端使用标签，并且 visual studio 代码没有警告我任何东西，但是在编译时，控制台告诉我我那个 'app-input' is not a known element

在我的项目中我有以下结构

App
|-pages
|--base
|
|-widgets
|--sidebar
|---sidebar.component.ts
|--input
|---input.component.ts
|--widgets.module.ts
|
|-app.module.ts

input.component.ts

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

widgets.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { InputComponent } from './input/input.component';



@NgModule({
  declarations:[
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
    InputComponent
  ],
  exports:[
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
    InputComponent
  ]
})
export class WidgetsModule { }

我在 Internet 上找不到任何解决方案（或者无法确定发生了什么），并且我一直在寻找解决方案一周。我期待着您的回答并提前致谢

编辑 1

base.module.ts

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

import { BaseRoutingModule } from './base-routing.module';
import { BaseComponent } from './base.component';
import { WidgetsModule } from 'src/app/widgets/widgets.module';


@NgModule({
  declarations: [
    BaseComponent
  ],
  imports: [
    CommonModule,
    BaseRoutingModule,
    WidgetsModule
  ]
})
export class BaseModule { }

编辑 2

更正文件夹结构

Answer 1

此错误通常发生在您没有导入要使用该组件的模块时。所以有基础页面组件的模块应该导入Widgets模块。

Answer 2

在您的 app.module.ts 文件中添加这些行

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations:[
      HeaderComponent,
      FooterComponent,
      SidebarComponent,
      InputComponent
      ],
  imports : [  ----  ],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

Answer 3

查看您的存储库后，我发现您的问题是您没有在 AppModule 中导入 BaseModule。否则你的逻辑是正确的。

无法在 Angular 中导入我的自定义组件

Cannot import my custom components in Angular

javascript

angular

typescript

module

components