angular 11 ERROR TypeError: Object(...) is not a function

Question

Preface: I have seen other questions here and still doesn't seem to be working for me (TypeError: Object(...) is not a function for angular-material) About project: this is a dotnet 2.1 angular app. When ever I'm testing things seem to go fine, but when I go to release for prod, i get this error:

here is my package.json file. it looks like the error is stemming from Bootstrap.

    {
  "name": "saveyourbrass",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.7",
    "@angular/common": "^11.0.7",
    "@angular/compiler": "^11.0.7",
    "@angular/core": "^11.0.7",
    "@angular/forms": "^11.0.7",
    "@angular/platform-browser": "^11.0.7",
    "@angular/platform-browser-dynamic": "^11.0.7",
    "@angular/platform-server": "^11.0.7",
    "@angular/router": "^11.0.7",
    "angular-font-awesome": "^3.1.2",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap3": "^3.3.5",
    "core-js": "^3.8.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "ngx-cookie-service": "^11.0.2",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.0.0-rc.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "^11.0.7",
    "@angular/language-service": "^11.0.7",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~4.1.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.0"
  }
}

here's my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { SocialBarComponent } from './nav-menu/social-bar/social-bar.component';

import { ConfigService } from './config.service';
import { AboutUsComponent } from './about-us/about-us.component';
import { TicketsComponent } from './tickets/tickets.component';
import { GetInvolvedComponent } from './get-involved/get-involved.component';
import { FaqComponent } from './faq/faq.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { FooterComponent } from './footer/footer.component';
import { NewsletterFormComponent } from './newsletter-form/newsletter-form.component';
import { InauguralYearComponent } from './inaugural-year/inaugural-year.component';
import { UnsubscribeNewsletterComponent } from './unsubscribe-newsletter/unsubscribe-newsletter.component';
import { AlbumComponent } from './album/album.component';

import { AccountService } from './services/account-service.service';
import { NewsletterComponent } from './newsletter/newsletter.component';

import { BrassFestComponent } from './brass-fest/brass-fest.component';
import { LoginComponent } from './profile/login/login.component';
import { ProfileComponent } from './profile/profile/profile.component';
import { RegisterComponent } from './profile/register/register.component';
import { BrassClassFaqComponent } from './brass-class-faq/brass-class-faq.component';
import { BrassClassComponent } from './brass-class/brass-class.component';
import { ReactiveFormsModule } from '@angular/forms';
import { ChangePasswordComponent } from './change-password/change-password.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { VerifyEmailComponent } from './verify-email/verify-email.component';
import { RequestPasswordResetComponent } from './request-password-reset/request-password-reset.component';
import {GeneralInfoService} from './services/general-info.service';
import { CookieService } from 'ngx-cookie-service'
@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    SocialBarComponent,
    AboutUsComponent,
    TicketsComponent,
    GetInvolvedComponent,
    FaqComponent,
    ContactUsComponent,
    FooterComponent,
    NewsletterFormComponent,
    InauguralYearComponent,
    UnsubscribeNewsletterComponent,
    AlbumComponent,
    NewsletterComponent,
    BrassFestComponent,
    LoginComponent,
    ProfileComponent,
    RegisterComponent,
    BrassClassFaqComponent,
    BrassClassComponent,
    ChangePasswordComponent,
    ForgotPasswordComponent,
    VerifyEmailComponent,
    RequestPasswordResetComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: 'faq', component: FaqComponent },
    { path: 'unsubscribe/:id', component: UnsubscribeNewsletterComponent },
    { path: 'about-us', component: AboutUsComponent },
    { path: 'get-involved', component: GetInvolvedComponent },
    { path: 'tickets', component: TicketsComponent },
    { path: 'album', component: AlbumComponent },
    { path: 'contact-us', component: ContactUsComponent },
    { path: 'brass-fest', component: BrassFestComponent },
    { path: 'brass-class', component: BrassClassComponent },
    { path: 'brass-class-faq', component: BrassClassFaqComponent },
    { path: 'brass-class-register', component: RegisterComponent },
    { path: 'login', component: LoginComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'forgotpassword', component: ForgotPasswordComponent },
    { path: 'VerifyEmail', component: VerifyEmailComponent },
    { path: 'requestpassword', component: RequestPasswordResetComponent },
], { relativeLinkResolution: 'legacy' })
  ],
  providers: [ConfigService,AccountService,GeneralInfoService, CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I got the same error after upgrading to Angular 11. The error was fixed by removing rxjs-compat package and changing all imports from this package to rxjs package.