Angular Schema validation error:"Data path "/styles/0" must be object", "must match pattern "\.(?:css|scss|sass|less)$", "exactly one schema in oneOf

Question

I need help with building this angular project. I get these errors as soon as I start debugging:

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.

I started getting these errors after I tried building navigation for the app in bootstrap. Worst part: I am uncertain of where I could go wrong since I am a newbie. I have tried searching for /styles/0 with no results.

app.module.ts

import { Component, 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';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
/*Plus all your other modules*/


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

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

app.component.ts

import { Component } from '@angular/core';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
import { NavigationComponent } from './components/navigation/navigation.component';
import { FooterComponent } from './components/footer/footer.component';

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

export class AppComponent {}

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule], 
  declarations: [NavigationComponent, FooterComponent],
  bootstrap: []
}) 
export class AppModule {}

angular.json shows warning in

"node_modules/popper.js/dist/umd/popper.min.js", "node_modules/jquery/dist/jquery.min.js",

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

Answer 1

In angular.json move the lines that end with .js put them in the srcipts part of this same file.