Angular项目调试Schema验证失败，请求技术支持

错误信息 #

启动调试时出现以下Schema验证错误：

Error: Schema validation failed with the following errors:
  Data path "/styles/0" must be object.
  Data path "/styles/0" must match pattern "\.(?:css|scss|sass|less)$".
  Data path "/styles/0" must match exactly one schema in oneOf.

问题根源 #

1. angular.json配置违规：styles数组仅用于引入样式文件（css/scss/sass/less格式），但你在其中添加了popper.min.js和jquery.min.js两个JS文件，违反了Angular的配置Schema规则，导致验证失败。
2. 模块重复定义：app.component.ts中重复定义了AppModule，与app.module.ts中的完整模块定义冲突，会干扰Angular的模块加载逻辑。

解决方案 #

1. 修正angular.json配置 #

将styles数组中的JS文件移至scripts数组，修改后配置如下：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/jquery/dist/jquery.min.js"
]

2. 清理app.component.ts冗余代码 #

删除app.component.ts中多余的NgModule相关代码，仅保留组件定义：

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

@Component({  
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

3. 优化app.module.ts配置（可选） #

• 移除providers数组中的NavigationComponent和FooterComponent，组件只需声明在declarations数组即可，无需放入依赖提供者列表。
• NgbModule已包含NgbCollapseModule，可移除重复导入，简化模块配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { ContactComponent } from './pages/contact/contact.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FooterComponent } from './components/footer/footer.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactComponent,
    NavigationComponent,
    DashboardComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

完成以上修改后，重新启动Angular项目，错误即可解决。

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