localhost - angular app wont run on port 4200 after installing angular univesral

Question

so ive added angular univesral to my app and it caused it not to work on local host 4200 (ng serve compiled properly but i just got a blank page) after checking some solutions online ive seen 1 guy who suggested to delete all files related to universal. this caused my ng serve not to work at all. so ive made a new app and all i did was copy all my components (css html and ts) and my app.module.ts. once again i got a blank page on a brand new app. im not sure what is the cause for this but here is my app.module.ts because i belive the problem is in there. (if its not please let me know what else i should add)

import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule } from '@angular/core';
import {MatInputModule} from '@angular/material/input';
import { RouterModule } from '@angular/router';
import { CommonModule } from  '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import {MatDatepickerModule, } from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core'
import {MatSelectModule} from '@angular/material/select';
import { NgImageSliderModule } from 'ng-image-slider';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatMenuModule} from '@angular/material/menu';

import { FlexLayoutModule } from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainPageComponent } from './main-page/main-page.component';
import { RegisterComponent } from './register/register.component';
import {MatStepperModule} from '@angular/material/stepper';
import { CartComponent } from './cart/cart.component';
import { ProductsComponent } from './products/products.component';
import { OrderComponent } from './order/order.component';


@NgModule({
 declarations: [
   AppComponent,
   LoginComponent,
   MainPageComponent,
   RegisterComponent,
   CartComponent,
   ProductsComponent,
   OrderComponent,
 ],
 imports: [
   NgImageSliderModule,
   BrowserModule.withServerTransition({ appId: 'serverApp' }),
   AppRoutingModule,
   BrowserAnimationsModule,
   MatInputModule,
   MatButtonModule,
   MatToolbarModule,
   MatStepperModule,
   MatExpansionModule,
   MatButtonToggleModule,
   MatCardModule,
   MatIconModule,
   MatGridListModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatMenuModule,
   MatSelectModule,
   FlexLayoutModule,
   ReactiveFormsModule,
   CommonModule,
   FormsModule,
   RouterModule.forRoot([
   { path: 'login', component: LoginComponent },
   { path: '', component: MainPageComponent },
   { path: 'register', component: RegisterComponent },
   { path: 'order', component: OrderComponent }
], {
   initialNavigation: 'enabled'
}),
 ],
 providers: [],
 bootstrap: [AppComponent],
})
export class AppModule { }

update: i removed initialNavigation: 'enabled' from app.module.ts which cause my page to show but now alot of the components dosent function well (i think its everything related to angular material that dosent work well like icons, menus etc)

question from:https://stackoverflow.com/questions/66062274/angular-app-wont-run-on-port-4200-after-installing-angular-univesral

Answer 1

Waitting for answers