Iftikhar Hussain
Reputation: 1
After Updating from angular 15 to 16 Facing the error JIT compiler unavailable
I have updated from angular 15 to 16. I have updated all the core packages and angular material, the project is compiled successfully. But in the browser the screen goes blank and this error is displayed in the console:
`1. Error: JIT compiler unavailable
1. at lo (main.js:23:193457)
1. at m.get (main.js:23:318873)
1. at Je (main.js:23:167049)
1. at ud (main.js:23:215074)
1. at main.js:23:215445
1. at main.js:23:193665
1. at Array.forEach (<anonymous>)
1. at Vs (main.js:23:193629)
1. at ud (main.js:23:215427)
1. at main.js:23:215445`
The project UI should be displayed in the browser and all functionality should work with minor issues. on angular 16. Blow is my package.json file
{
"name": "ng-datta-able",
"version": "2.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^16.2.2",
"@angular/cdk": "^16.2.14",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/localize": "^16.2.12",
"@angular/material": "^16.2.14",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12",
"@auth0/angular-jwt": "^5.0.2",
"@fortawesome/fontawesome-free": "^6.5.1",
"@fullcalendar/angular": "^5.10.2",
"@fullcalendar/core": "^5.10.1",
"@fullcalendar/daygrid": "^5.10.1",
"@fullcalendar/interaction": "^5.10.1",
"@fullcalendar/timegrid": "^5.10.1",
"@iplab/ngx-file-upload": "^2.0.6",
"@ks89/angular-modal-gallery": "^7.2.5",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"@ngtools/webpack": "^15.2.9",
"@nicky-lenaers/ngx-scroll-to": "^9.0.0",
"@syncfusion/ej2-angular-calendars": "^19.1.56",
"@syncfusion/ej2-angular-schedule": "^18.1.43",
"ajv": "^8.0.0",
"amazing-time-picker": "^1.8.0",
"angular-archwizard": "^6.1.0",
"angular-datatables": "^9.0.2",
"angular-dual-listbox": "^5.0.1",
"angular-highcharts-chart": "^1.0.2",
"angular-morris-js": "^1.1.0",
"angular-pell": "^0.1.0",
"angular2-chartjs": "^0.5.1",
"angular2-text-mask": "^9.0.0",
"angular2-tinymce": "^3.3.0",
"animate.css": "4.1.1",
"apexcharts": "3.35.2",
"bootstrap": "5.3.2",
"bootstrap-icons": "^1.11.3",
"d3": "^5.16.0",
"datatables.net": "^1.11.5",
"datatables.net-buttons": "^2.2.3",
"datatables.net-buttons-dt": "^1.6.2",
"datatables.net-colreorder": "^1.5.2",
"datatables.net-colreorder-dt": "^1.5.2",
"datatables.net-dt": "^1.13.3",
"datatables.net-responsive": "^2.2.5",
"datatables.net-responsive-dt": "^2.2.5",
"datatables.net-select": "^1.3.4",
"datatables.net-select-dt": "^1.3.1",
"echarts": "^4.8.0",
"famfamfam-flags": "^1.0.0",
"fullcalendar": "^5.10.1",
"hammerjs": "^2.0.8",
"highcharts": "^8.1.2",
"jszip": "^3.9.1",
"line-awesome": "1.3.0",
"moment": "^2.29.4",
"morris.js": "^0.5.0",
"mousetrap": "^1.6.5",
"ng-apexcharts": "1.6.0",
"ng-click-outside": "^6.0.0",
"ng-fullcalendar": "^2.0.3",
"ng-number-formatter": "^1.5.0",
"ng-select": "^1.0.2",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.1",
"ngx-bar-rating": "^1.1.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^17.0.0",
"ngx-custom-validators": "^9.1.0",
"ngx-echarts": "^5.0.0",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-toastr": "^13.1.0",
"nvd3": "^1.8.6",
"peity": "^3.3.0",
"prism-themes": "1.9.0",
"raphael": "^2.3.0",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"screenfull": "^5.0.2",
"socicon": "3.0.5",
"tinymce": "^4.8.3",
"tslib": "^2.0.0",
"xlsx": "^0.18.5",
"zone.js": "^0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.14",
"@angular/cli": "^16.2.14",
"@angular/compiler-cli": "^16.2.12",
"@angular/language-service": "^16.2.12",
"@types/datatables.net": "^1.10.18",
"@types/datatables.net-buttons": "^1.4.3",
"@types/datatables.net-select": "^1.2.6",
"@types/hammerjs": "^2.0.36",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.0",
"@types/mousetrap": "^1.6.3",
"@types/node": "^12.11.1",
"@types/sass-loader": "^8.0.3",
"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",
"sass-loader": "^13.3.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "^4.9.3"
}
}
tsconfig.json file
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"useDefineForClassFields":false,
"moduleResolution": "node",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"importHelpers": true,
"target": "es2022",
"module": "es2020",
"skipLibCheck": true,
"lib": [
"es2018",
"dom"
]
}
}
app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './theme/shared/shared.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './theme/layout/admin/admin.component';
import { AuthComponent } from './theme/layout/auth/auth.component';
import { NavigationComponent } from './theme/layout/admin/navigation/navigation.component';
import { NavLogoComponent } from './theme/layout/admin/navigation/nav-logo/nav-logo.component';
import { NavContentComponent } from './theme/layout/admin/navigation/nav-content/nav-content.component';
import { NavigationItem } from './theme/layout/admin/navigation/navigation';
import { NavGroupComponent } from './theme/layout/admin/navigation/nav-content/nav-group/nav-group.component';
import { NavCollapseComponent } from './theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component';
import { NavItemComponent } from './theme/layout/admin/navigation/nav-content/nav-item/nav-item.component';
import { NavBarComponent } from './theme/layout/admin/nav-bar/nav-bar.component';
// import {ToggleFullScreenDirective} from './theme/shared/full-screen/toggle-full-screen';
import { NgbButtonsModule, NgbDropdownModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { NavLeftComponent } from './theme/layout/admin/nav-bar/nav-left/nav-left.component';
import { NavSearchComponent } from './theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component';
import { NavRightComponent } from './theme/layout/admin/nav-bar/nav-right/nav-right.component';
// import {ChatUserListComponent} from './theme/layout/admin/nav-bar/nav-right/chat-user-list/chat-user-list.component';
// import { FriendComponent } from './theme/layout/admin/nav-bar/nav-right/chat-user-list/friend/friend.component';
// import {ChatMsgComponent} from './theme/layout/admin/nav-bar/nav-right/chat-msg/chat-msg.component';
import { ConfigurationComponent } from './theme/layout/admin/configuration/configuration.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ToastrModule } from 'ngx-toastr';
import { DatePipe, HashLocationStrategy, LocationStrategy } from '@angular/common';
import { ErrorInterceptor, JwtInterceptor } from './_helpers';
import { BasePageComponent } from './theme/shared/components/base-page';
// import { LoaderComponent } from './theme/shared/loader/loader.component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AttachmentComponent } from './demo/pages/attachment/attachment.component';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { DocattachmentComponent } from './_components/shared/docattachment/docattachment.component';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { MaterialModule } from './_shared/material.module';
// import { NavControlComponent } from './theme/layout/admin/nav-control/nav-control.component';
// import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService } from '@syncfusion/ej2-angular-schedule';
@NgModule({
declarations: [
AppComponent,
AdminComponent,
AuthComponent,
NavigationComponent,
NavLogoComponent,
NavContentComponent,
NavGroupComponent,
NavCollapseComponent,
NavItemComponent,
NavBarComponent,
// ToggleFullScreenDirective,
NavLeftComponent,
NavSearchComponent,
NavRightComponent,
// ChatUserListComponent,
// FriendComponent,
// ChatMsgComponent,
ConfigurationComponent,
BasePageComponent,
AttachmentComponent,
DocattachmentComponent,
// NavControlComponent,
// MatProgressSpinnerModule,
],
imports: [
BrowserAnimationsModule,
MatProgressSpinnerModule,
MatIconModule,
MatButtonModule,
// MatSelectModule,
BrowserModule,
AppRoutingModule,
SharedModule,
NgbDropdownModule,
NgbTooltipModule,
NgbButtonsModule,
NgbTabsetModule,
HttpClientModule,
ToastrModule.forRoot({
preventDuplicates: true,
}),
FormsModule,
NgbTabsetModule,
NgbTooltipModule,
ReactiveFormsModule,
// NgxMaterialTimepickerModule,
MaterialModule,
NgbModule,
],
// providers: [NavigationItem],
// schemas: [NO_ERRORS_SCHEMA],
providers: [NavigationItem,
DatePipe,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
// { provide: NZ_I18N, useValue: en_US },
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Upvotes: 0
Views: 117