Причина ошибки

Ошибка No provider for NameService возникает, потому что Angular не знает, как создать экземпляр вашего сервиса. В Angular используется механизм Dependency Injection (DI) — внедрение зависимостей. Чтобы Angular мог внедрить сервис в компонент, этот сервис должен быть предварительно зарегистрирован (предоставлен) в каком-либо инжекторе (injector). Простой импорт класса в компонент не регистрирует его в DI-системе.

Как правильно зарегистрировать сервис

Есть два основных способа зарегистрировать сервис в Angular:

1. Через декоратор @Injectable с опцией providedIn (рекомендуемый способ)

Начиная с Angular 6, самый простой и правильный способ — указать providedIn: 'root' в декораторе @Injectable вашего сервиса. Это автоматически регистрирует сервис в корневом инжекторе приложения, делая его доступным во всём приложении.

Исправьте ваш name.service.ts:

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

@Injectable({
  providedIn: 'root' // <-- Регистрирует сервис в корневом инжекторе
})
export class NameService {
  getName(): string {
    return 'Иван Иванов';
  }
}

После этого импортируйте сервис в компоненте и используйте в конструкторе — Angular сам создаст и предоставит единственный экземпляр сервиса для всего приложения (синглтон).

2. Через массив providers в модуле или компоненте (классический способ)

Если по какой-то причине вы не можете использовать providedIn (например, очень старый Angular или нужно явно контролировать область видимости), вы можете зарегистрировать сервис в providers массиве модуля AppModule или непосредственно в компоненте.

Пример для модуля (app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NameService } from './name.service'; // Импортируем сервис

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [NameService], // <-- Регистрируем сервис здесь
  bootstrap: [AppComponent]
})
export class AppModule { }

Если вы зарегистрируете сервис в providers компонента (например, в @Component), то каждый экземпляр компонента будет получать новый экземпляр сервиса. Это может быть полезно, но чаще всего используется корневая регистрация.

Почему это произошло?

• Вы импортировали класс NameService, но не сказали Angular, как его создавать.
• Angular DI ожидает, что для каждого типа, указанного в конструкторе, есть провайдер (правило создания).
• Без @Injectable или записи в providers, Angular не может определить, есть ли у сервиса свои зависимости, и просто не знает, как его инстанциировать.

Дополнительные советы

• Всегда используйте @Injectable() для сервисов — это хорошая практика, даже если у сервиса нет зависимостей.
• Проверьте, что пути импорта в файлах корректны (регистр букв, расширение файла).
• Если используете Angular CLI, можно создать сервис командой ng generate service name — она автоматически добавит providedIn: 'root'.

// name.service.ts
export class NameService {
  constructor(private defaultName: string) {}

  getName(): string {
    return this.defaultName;
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NameService } from './name.service';

export function nameServiceFactory(): NameService {
  const savedName = localStorage.getItem('userName') || 'Гость';
  return new NameService(savedName);
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: NameService, useFactory: nameServiceFactory }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }