I am trying to upgrade angular v9 to v17. So move with the approach by upgrading all packages that support version 17. After that, I fixed all the errors that came in the terminal. so at last I got only warnings and at the console, I got JIT Compiler unavailable. which i fixed by making aot = false after that i got this
main.js:34 ERROR NullInjectorError: R3InjectorError(XO)[AEe -> mu -> mu]:
NullInjectorError: No provider for mu!
at ole.get (main.js:34:24830)
at xK.get (main.js:34:26419)
at xK.get (main.js:34:2641`<kbd>your text</kbd>`9)
at z4t (main.js:4:2123)
at pl (main.js:4:2204)
at Object.AEe_Factory [as factory] (ɵfac.js:1:1)
at xK.hydrate (main.js:34:27192)
at xK.get (main.js:34:26332)
at fSe.get (main.js:34:56013)
at b8e (main.js:7:15406)
Here is my app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
import { MatFormFieldModule } from '@angular/material/form-field';
import { fuseConfig } from 'app/fuse-config';
import { DatePipe, PlatformLocation, APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common';
import 'hammerjs';
import { QuillModule } from 'ngx-quill';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import { LoaderComponent } from './common/loader/loader.component';
import { LoaderInterceptor } from './common/loader/loader.interceptor';
import { LoaderService } from './common/loader/loader.service';
import { BaseService } from './services/base.service';
import { ConfirmDialogComponent } from './common/confirm-dialog/confirm-dialog.component';
import { ShowDialogComponent } from './common/show-dialog/show-dialog.component';
import { DialogService } from './common/confirm-dialog/dialog.service';
import { MatDialogModule } from '@angular/material/dialog';
import { ErrorInterceptor } from './helpers/error.interceptor';
import { BasicAuthInterceptor } from './helpers/basic-auth.interceptor';
import { LoginComponent } from './auth/login/login.component';
import { ProgressBarModelComponent } from './common/progress-bar-model/progress-bar-model.component';
import { HttpService } from './services/http.service';
import { IgmiteModule } from './main/igmite.module';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { FakeDbService } from './fake-db/fake-db.service';
import { ProjectDashboardModule } from './dashboards/dashboard.module';
import { CookieService } from 'ngx-cookie-service';
import { MatTableExporterModule } from 'mat-table-exporter';
// import { fuseperfectscrollbaroptions }
export const MY_FORMATS = {
parse: {
dateInput: "DD/MM/YYYY"
},
display: {
dateInput: "DD/MM/YYYY",
monthYearLabel: "MM YYYY",
dateA11yLabel: "DD/MM/YYYY",
monthYearA11yLabel: "MM YYYY"
}
};
export function getBaseHref(platformLocation: PlatformLocation): string {
return platformLocation.getBaseHrefFromDOM();
}
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: 'login' }, // otherwise redirect to summary-dashboard
];
@NgModule({
declarations: [
AppComponent,
LoaderComponent,
ConfirmDialogComponent,
ShowDialogComponent,
ProgressBarModelComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
QuillModule,
MatFormFieldModule,
RouterModule.forRoot(appRoutes),
TranslateModule.forRoot(),
NgIdleKeepaliveModule.forRoot(),
InMemoryWebApiModule.forRoot(FakeDbService, {
delay: 0,
passThruUnknownUrl: true
}),
// Material moment date module
MatMomentDateModule,
// FormsModule, //added here too
// MatPaginator,
// ReactiveFormsModule, //added here too
// Material
MatTableExporterModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatDialogModule,
// Fuse modules
FuseModule.forRoot(fuseConfig),
FuseProgressBarModule,
FuseSharedModule,
FuseSidebarModule,
FuseThemeOptionsModule,
// App modules
LayoutModule,
ProjectDashboardModule,
IgmiteModule
],
exports: [
// MatPaginator
LoaderComponent,
],
bootstrap: [
AppComponent
],
providers: [
DatePipe,
BaseService,`your text`
DialogService,
HttpService,
CookieService,
LoaderService,
{
provide: HTTP_INTERCEPTORS,
useClass: LoaderInterceptor,
multi: true
},
{ provide: MAT_DATE_LOCALE, useValue: "en_IN" }, //you can change useValue
{
provide: DateAdapter,
useClass: MomentDateAdapter
},
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
{
provide: APP_BASE_HREF,
useFactory: getBaseHref,
deps: [PlatformLocation]
},
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: LocationStrategy, useClass: PathLocationStrategy },
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
static injector: Injector;
constructor(injector: Injector) {
console.log({
injector
})
AppModule.injector = injector;
}
}
Here is Package.json file
{
"name": "fuse",
"version": "9.0.0",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
"start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
"build": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --dev",
"build-stats": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",`your text`
"build-prod": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --prod",
"build-prod-stats": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@angular/animations": "17.1.1",
"@angular/cdk": "17.1.1",
"@angular/common": "17.1.1",
"@angular/compiler": "17.1.1",
"@angular/core": "17.1.1",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "17.1.1",
"@angular/localize": "17.1.1",
"@angular/material": "^17.1.1",
"@angular/material-moment-adapter": "17.1.1",
"@angular/platform-browser": "17.1.1",
"@angular/platform-browser-dynamic": "17.1.1",
"@angular/router": "17.1.1",
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ng-idle/core": "14.0.0",
"@ng-idle/keepalive": "14.0.0",
"@ngrx/effects": "17.0.1",
"@ngrx/router-store": "17.0.1",
"@ngrx/store": "17.0.1",
"@ngrx/store-devtools": "17.0.1",
"@ngx-translate/core": "12.0.0",
"@popperjs/core": "^2.11.8",
"@swimlane/dragula": "3.8.0",
"@swimlane/ngx-charts": "20.4.1",
"@swimlane/ngx-datatable": "^20.1.0",
"@types/crypto-js": "4.1.1",
"@types/prismjs": "1.26.3",
"angular-in-memory-web-api": "0.17.0",
"bootstrap": "5.3.0",
"crypto-js": "4.1.1",
"date-fns": "3.2.0",
"file-saver": "^2.0.5",
"guid-typescript": "1.0.9",
"hammerjs": "2.0.8",
"html2canvas": "1.4.1",
"lodash": "4.17.15",
"mat-select-filter": "^2.4.1",
"mat-table-exporter": "^15.0.0",
"moment": "2.30.0",
"ngx-color-picker": "16.0.0",
"ngx-cookie-service": "17.0.1",
"ngx-device-detector": "7.0.0",
"ngx-mat-file": "^1.0.4",
"ngx-mat-file-input": "^3.0.0-beta.0",
"ngx-material-file-input": "^4.0.1",
"ngx-quill": "24.0.4",
"perfect-scrollbar": "^1.5.5",
"prismjs": "1.29.0",
"quill": "^1.3.7",
"rxjs": "7.8.1",
"tslib": "2.6.2",
"web-animations-js": "2.3.2",
"xlsx": "^0.18.5",
"zone.js": "0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.1.1",
"@angular/cli": "17.1.1",
"@angular/compiler-cli": "17.1.1",
"@angular/language-service": "17.1.2",
"@angularclass/hmr": "3.0.0",
"@types/jasmine": "5.1.4",
"@types/jasminewd2": "2.0.8",
"@types/lodash": "4.14.202",
"@types/node": "20.10.0",
"@typescript-eslint/eslint-plugin": "6.20.0",
"@typescript-eslint/parser": "6.20.0",
"codelyzer": "6.0.2",
"eslint": "8.56.0",
"jasmine-core": "5.1.1",
"karma": "6.4.2",
"karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0",
"ts-node": "10.9.2",
"tslint": "5.18.0",
"typescript": "5.2.2",
"webpack-bundle-analyzer": "4.10.1"
}
}
here is angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fuse": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
},
"@schematics/angular:component": {
"inlineStyle": true,
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"aot": false,
"outputPath": "dist/fuse",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"optimization": {
"fonts": {
"inline": true
},
"scripts": true,
"styles": {
"inlineCritical": false,
"minify": true
}
},
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css"
],
"scripts": [
"./node_modules/quill/dist/quill.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "20mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "100kb"
}
]
},
"aws": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.aws.ts"
}
]
},
"lahi": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.lahi.ts"
}
]
},
"gj": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.gj.ts"
}
]
},
"mh": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.mh.ts"
}
]
},
"jh": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.jh.ts"
}
]
},
"od": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.od.ts"
}
]
},
"ec": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"sourceMap": true
},
"hmr": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "fuse:build",
"port": 4213
},
"configurations": {
"production": {
"buildTarget": "fuse:build:production"
},
"aws": {
"buildTarget": "fuse:build:aws"
},
"lahi": {
"buildTarget": "fuse:build:lahi"
},
"gj": {
"buildTarget": "fuse:build:gj"
},
"mh": {
"buildTarget": "fuse:build:mh"
},
"jh": {
"buildTarget": "fuse:build:jh"
},
"od": {
"buildTarget": "fuse:build:od"
},
"hmr": {
"hmr": true,
"buildTarget": "fuse:build:hmr"
},
"ec": {
"buildTarget": "fuse:build:ec"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "fuse:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",`your text`
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "fuse:serve"
},
"configurations": {
"production": {
"devServerTarget": "fuse:serve:production"
}
}
}
}
}
},
"cli": {
"analytics": "272c2101-67e2-4887-8849-6a69f012ab38",
"cache": {
"enabled": false
}
}
}
and here is main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from 'hmr';
if ( environment.production )
{
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if ( environment.hmr )
{
if ( module['hot'] )
{
hmrBootstrap(module, bootstrap);
}
else
{
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
}
else
{
bootstrap().catch(err => console.error(err));
}
and here is tsconfig.json file
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from 'hmr';
if ( environment.production )
{
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if ( environment.hmr )
{
if ( module['hot'] )
{
hmrBootstrap(module, bootstrap);
}
else
{
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
}
else
{
bootstrap().catch(err => console.error(err));
}
able to know about the depreciated packages and NullInjector error should get resolved.