<app-root> is not loading after upgrade to Angular 14 from 13. Everything is the same, and nothing's changed

Question

An Angular 13 app that I upgraded to 14 no longer loads the . It's configured correctly and worked... I've ripped out all the contents of index.html save for the basics and in the - still nothing.

This is the only error I'm getting after ng build when I type ng serve

${sourceUrl}`;:279484 Uncaught SyntaxError: Strict mode code may not include a with statement (at ${sourceUrl}`;:279484:5)

I have no idea where that's coming from.

This is my main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { enableProdMode } from '@angular/core';

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch();

console.log("End of main.ts");

When I take out platformBrowserDynamic, that error above goes away but is still empty.

Here's my app.module.ts - NOTE: I did not include everything in the import section nor the other sections below. What is important is the AppComponent is where it's supposed to be.

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
// import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbModule, BreadcrumbService } from 'xng-breadcrumb';
import { APIS } from 'src/environments/env-service.service';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { ModalService } from './services/modal.service';
import { GenericModalComponent } from './components/generic-modal/generic-modal.component';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { NgSelectModule } from '@ng-select/ng-select';
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import { UploaderAllModule } from '@syncfusion/ej2-angular-inputs';
import { FileUploadComponent } from './shared-components/file-upload/file-upload.component';
import { AngularFileUploadComponent } from './shared-components/angular-file-import { AttachmentIntegrationService } from './services/attachment-integration.service';


@NgModule({
    imports: [
        // ModuleMapLoaderModule,
        AppRoutingModule,
        BrowserModule,
        BreadcrumbModule,
        SignaturePadModule,
        FormsModule,
        ReactiveFormsModule,
        BsDatepickerModule.forRoot(),
        BrowserAnimationsModule,
        GooglePlaceModule,
        HttpClientModule,
        CommonModule,
        ReactiveFormsModule,
        TypeaheadModule.forRoot(),
        TooltipModule.forRoot(),
        GooglePlaceModule,
        // DataTablesModule,
        NgSelectModule,
        RichTextEditorModule,
        HttpClientModule,
        UploaderAllModule,
        ServerModule
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        UntypedFormBuilder,
        BreadcrumbService,
        APIS,
        HttpClientModule,
        ModalService,
        AttachmentIntegrationService
    ],
    bootstrap: [AppComponent],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA
    ],
    exports: [PhoneMaskDirective]
})
export class AppModule { }

Answer 1

Remove ServerModule from your app.module.ts