Проблема: компонент не известен в текущем контексте

Ошибка 'app-my-button' is not a known element возникает, когда Angular не может найти селектор компонента в текущем модуле или импортированных модулях. Вы сделали почти всё правильно, но есть несколько типичных ошибок, которые могут возникнуть у начинающих разработчиков.

Основные причины и решения

1. Проверьте селектор компонента

Убедитесь, что в файле my-button.component.ts селектор совпадает с тем, что вы используете в шаблоне:

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

@Component({
  selector: 'app-my-button', // Должен быть именно 'app-my-button'
  template: `<button>Нажми меня</button>`
})
export class MyButtonComponent { }

2. Правильная структура модулей

Ваш SharedModule должен:

• Объявить компонент в declarations
• Экспортировать его в exports

Это вы уже сделали. Но важно, чтобы файлы были подключены правильно:

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // Часто нужен для директив типа ngIf, ngFor
import { MyButtonComponent } from './my-button.component';

@NgModule({
  declarations: [MyButtonComponent],
  imports: [CommonModule], // Импортируйте CommonModule, если используете Angular директивы
  exports: [MyButtonComponent]
})
export class SharedModule { }

3. Импорт модуля в AppModule

В app.module.ts вы импортируете SharedModule, но убедитесь, что путь к файлу корректен:

import { SharedModule } from './shared/shared.module'; // Путь должен вести к файлу shared.module.ts

Также проверьте, что SharedModule добавлен в массив imports, а не в declarations:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule], // Правильно
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Проверьте имена файлов и пути

Angular чувствителен к регистру в именах файлов и путях. Убедитесь, что:

• Файл my-button.component.ts существует в папке shared
• Имя файла совпадает с тем, что указано в импорте (например, ./my-button.component)
• В tsconfig.json нет конфликтующих настроек путей

5. Перезапустите сервер разработки

Иногда Angular CLI кэширует старые файлы. Попробуйте остановить сервер (Ctrl+C) и запустить заново:

ng serve --open

Полный рабочий пример

Вот минимальная рабочая конфигурация для использования компонента из другого модуля:

my-button.component.ts:

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

@Component({
  selector: 'app-my-button',
  template: `<button>Кнопка из SharedModule</button>`
})
export class MyButtonComponent { }

shared.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyButtonComponent } from './my-button.component';

@NgModule({
  declarations: [MyButtonComponent],
  imports: [CommonModule],
  exports: [MyButtonComponent]
})
export class SharedModule { }

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Привет, мир!</h1>
    <app-my-button></app-my-button>
  `
})
export class AppComponent { }

После этих исправлений компонент должен корректно отображаться. Если ошибка остаётся, проверьте консоль браузера на наличие дополнительных сообщений об ошибках — они часто указывают на точную причину.

ng generate library my-button-lib

import { MyButtonLibModule } from 'my-button-lib';

@NgModule({
  imports: [MyButtonLibModule]
})
export class AppModule { }

ng version