Angular 15报错：类使用Angular特性但未添加装饰器的解决方法

可能的原因及修复步骤 #

1. 修复语法错误（缺失分号） #

你的代码中BASE_CLASSES常量定义末尾缺少分号，这会导致JavaScript解析器出错，进而让Angular无法正确识别类上方的装饰器：

const BASE_CLASSES = 'main-sidebar sidebar-dark-danger elevation-4'; // 添加末尾的分号

2. 确保组件已在Angular模块中声明 #

确认AdminSidebarComponent已被添加到对应的NgModule的declarations数组中（通常是AdminModule或AppModule）：

// 示例：在admin.module.ts中
import { AdminSidebarComponent } from './admin-sidebar/admin-sidebar.component';

@NgModule({
  declarations: [
    AdminSidebarComponent,
    // 其他组件、指令、管道
  ],
  // 其他模块配置项
})
export class AdminModule { }

3. 检查装饰器导入与语法 #

确认Component装饰器已正确从@angular/core导入，且装饰器语法无拼写错误：

// 确认导入语句正确
import { Component, HostBinding, OnInit } from '@angular/core';

// 确认@Component装饰器配置格式正确
@Component({
  selector: 'app-admin-sidebar',
  templateUrl: './admin-sidebar.component.html',
  styleUrls: ['./admin-sidebar.component.scss']
})

4. 清理缓存并重启开发服务 #

缓存异常可能引发解析错误，执行以下命令清理缓存并重启服务：

# 清理Angular缓存
ng cache clean
# 重启开发服务
ng serve

5. 移除未使用的导入 #

代码中导入了Store和Observable但未使用，虽不直接导致装饰器报错，但可能引发解析警告，建议移除：

// 删除以下未使用的导入语句
// import {Store} from '@ngrx/store';
// import {Observable} from 'rxjs';

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