Angular 17 R3Injector error not showing actual issues

I posted a similar question yesterday, but I am having an issue where I am upgrading an Angular project and it builds, but fails to run post ng serve and ng serve --configuration=dev. I have sourceMap set to true everywhere, but the best I get is this error:



Here is the auth.service.ts code

import { Perm } from './../../app/auth/permissions';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
import { environment } from 'environments/environment';


@Injectable({
providedIn: 'root'
})

export class AuthService {
currentPerms: any = [];
currentRoles: any = [];
allUsers: any[] = [];
allRoles: string[] = []
allPermissions: string[] = []
url: string = environment.apiSecurity;
token: string = '';
currentUser: any;
isAuthorized: boolean;
activityIndicators: any[] = [];
partStatuses: any[] = [];
noteTypes: any[] = [];
grids: string[] = [];
currentGrid: string = null;

private userSource = new Subject<string>();
userChanges$ = this.userSource.asObservable();

changeUser(email: string) {
this.userSource.next(email);
}

constructor(private httpClient: HttpClient) { }

logout() {
this.currentPerms = [];
this.currentRoles = [];
this.token = '';
this.currentUser = undefined;
this.isAuthorized = false
this.currentPerms = [];
this.currentRoles = [];
let hash: string = localStorage.getItem("currentUser_hash");
localStorage.clear();
this.changeUser("");
if (!this.isNullEmptyNothing(hash) && hash.startsWith("#/mobile")) {
localStorage.setItem("currentUser_hash", hash);
}
}

public async initializeApp() {

let request: AcquireAccessTokenRequest = {
email: null,
password: null,
token: localStorage.getItem("currentUser_token")
};
try {
await this.acquire(request);
}
catch(error) {

console.log(error.error);
}
}

public async acquireAccessToken(email: string, password: string) {
let request: AcquireAccessTokenRequest = {
email: email,
password: password,
token: null
};

await this.acquire(request);

}

async acquire(request: AcquireAccessTokenRequest ) {
return await this.httpClient.post<any>(this.url + 'api/auth/acquire', request).toPromise()
.then(settings => {
this.currentUser = settings.user;
this.currentGrid = null;
this.allRoles = settings.roles;
this.allPermissions = settings.permissions;
this.allUsers = settings.allUsers;
this.activityIndicators = settings.activityIndicators;
this.noteTypes = settings.noteTypes;
this.partStatuses = settings.partStatuses;
this.grids = settings.grids;
this.token = settings.token;
if (settings.user !== null) {
this.isAuthorized = true;
this.currentPerms = settings.user.permissions;
this.currentRoles = settings.user.roles;
}
localStorage.setItem("currentUser_token", this.token );
this.changeUser(this.currentUser.email);

});
}

get manageUsers(): boolean { return this.hasPermission(Perm.Users_Manage); }
get manageRoles(): boolean { return this.hasPermission(Perm.Roles_Manage); }
get reportUsers(): boolean { return this.hasPermission(Perm.Reports_Manage); }
get qa_Manage(): boolean { return this.hasPermission(Perm.QA_Manage); }
get repair_Complete(): boolean { return this.hasPermission(Perm.Repair_Complete); }

get partsDelivery_Manage(): boolean { return this.hasPermission(Perm.PartsDelivery_Manage); }
get offHolds_Complete(): boolean { return this.hasPermission(Perm.OffHolds_Complete); }
get testResults_View(): boolean { return this.hasPermission(Perm.TestResults_View); }
get onc_Manage(): boolean { return this.hasPermission(Perm.ONC_Manage); }
get packing_Manage(): boolean { return this.hasPermission(Perm.Packing_Manage); }

get diagnosis_Manage(): boolean { return this.hasPermission(Perm.Diagnosis_Manage); }
get customerInfo_Edit(): boolean { return this.hasPermission(Perm.CustomerInfo_Edit); }
get order_Promote_All(): boolean { return this.hasPermission(Perm.Order_Promote_All); }
get order_Promote_Restricted(): boolean { return this.hasPermission(Perm.Order_Promote_Restricted); }
get ediMessage_Send(): boolean { return this.hasPermission(Perm.EdiMessage_Send); }
get activityIndicator_Set(): boolean { return this.hasPermission(Perm.ActivityIndicator_Set); }

get cidQuote_Edit(): boolean { return this.hasPermission(Perm.CIDQuote_Edit); }
get oneTimeException_Edit(): boolean { return this.hasPermission(Perm.OneTimeException_Edit); }

get oba_tech(): boolean { return this.hasPermission(Perm.OBA_Tech); }
get oba_admin(): boolean { return this.hasPermission(Perm.OBA_Admin); }
get fa_admin(): boolean { return this.hasPermission(Perm.FA_Admin); }
get eng_admin(): boolean { return this.hasPermission(Perm.Eng_Admin); }

get partOrder_Cancel(): boolean { return this.hasPermission(Perm.PartOrder_Cancel); }
get partOrder_DNC(): boolean { return this.hasPermission(Perm.partOrder_DNC); }
get partOrder_DNCApprove(): boolean { return this.hasPermission(Perm.partOrder_DNCApprove); }
get partOrder_DOA(): boolean { return this.hasPermission(Perm.partOrder_DOA); }
get partOrder_FADOA(): boolean { return this.hasPermission(Perm.partOrder_FADOA); }
get partOrder_Consume(): boolean { return this.hasPermission(Perm.partOrder_Consume); }
get partOrder_Post(): boolean { return this.hasPermission(Perm.partOrder_Post); }
get partOrder_Order(): boolean { return this.hasPermission(Perm.partOrder_Order); }
get partOrder_Order_Global(): boolean { return this.hasPermission(Perm.partOrder_Order_Global); }
//receiving
get photoVMI_Manage(): boolean { return this.hasPermission(Perm.photoVMI_Manage); }
get docReceiving_Manage(): boolean { return this.hasPermission(Perm.DocReceiving_Manage); }
get lineReceiving_Manage(): boolean { return this.hasPermission(Perm.LineReceiving_Manage); }
get realTimeMobile_Manage(): boolean { return this.hasPermission(Perm.realTimeMobile_Manage); }
get realTimeMobile_Manage_NewStatus(): boolean { return this.hasPermission(Perm.realTimeMobile_Manage_NewStatus); }
get partOrder_Order_NoValidations(): boolean { return this.hasPermission("") }
get user_roles(): string[] { return this.currentRoles }
get billing_code_manage(): boolean { return this.hasPermission(Perm.BillingCode_Manage); }
get order_Promote_Test(): boolean { return this.hasPermission(Perm.Order_Promote_Test); }
get osri_manage(): boolean { return this.hasPermission(Perm.Osri_Manage); }
get doa_review(): boolean { return this.hasPermission(Perm.Doa_Review); }



getRequestHeaders(): { headers: HttpHeaders | { [header: string]: string | string[]; } } {
let headers = new HttpHeaders({
'Authorization': 'Bearer ' + this.token,
'Content-Type': 'application/json',
'Accept': `application/json, text/plain, */*`
});

return { headers: headers };
}

hasPermission(s) {
return this.currentPerms.indexOf(s) > -1;
}

private _isBusy: boolean;
public get isBusy(): boolean {
return this._isBusy;
}
public set isBusy(v: boolean) {
this._isBusy = v;
}

isNullEmptyNothing(e){
let val:boolean = false;
val = ((e == null) || (e == undefined) || (e === ""));
return val;
}
}

Here is the main.ts file


import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from '@app/app.component';
import { environment } from 'environments/environment';

export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
const providers = [
{ provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

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

bootstrapApplication(AppComponent).catch(err => console.error(err));

provideHttpClient(withInterceptorsFromDi());

export { renderModule } from '@angular/platform-server';

Here is my angular.js file

Here is the app.modules.ts file. I removed the children for the links as I do not see them as the issue. Can obfuscate them if needed.


import { Perm } from "./auth/permissions";
import { RolesComponent } from "./admin/roles/roles.component";
import { AdvanceexchangeComponent } from "./advanceexchange/advanceexchange.component";
import { AuthGardService } from "./auth/auth-gard.service";
import { UsersSearchComponent } from "./admin/users/users-search.component";
import { BrowserModule, platformBrowser } from "@angular/platform-browser";
import { NgModule, APP_INITIALIZER } from "@angular/core";
import { RouterModule } from "@angular/router";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule, provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
import { HashLocationStrategy, LocationStrategy } from "@angular/common";
import { HomeComponent } from "@app/home/home.component";
import { DockReceiveComponent } from "@app/dock-receive/dock-receive.component";
import { DiagnosisComponent } from "@app/diagnosis/diagnosis.component";
import { PartDeliveryComponent } from "@app/part-delivery/part-delivery.component";
import { RepairComponent } from "@app/repair/repair.component";
import { BomComponent } from "@app/bom/bom.component";
import { LineReceiveComponent } from "@app/line-receive/line-receive.component";
import { ObaResultComponent } from "@app/oba/oba-result/oba-result.component";
import { ShippingComponent } from "@app/shipping/shipping.component";
import { FaLooperAnalysisComponent } from "@app/fa-looper/fa-looper-analysis/fa-looper-analysis.component";
import { AuthService } from "services/auth-service/auth.service";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import {
DxRadioGroupModule,
DxTemplateModule,
DxButtonModule,
DxBoxModule,
DxDataGridModule,
DxTextAreaModule,
DxFormModule,
DxSelectBoxModule,
DxTextBoxModule,
DxPopupModule,
DxScrollViewModule,
DxTagBoxModule,
DxListModule,
DxLoadPanelModule,
DxToolbarModule,
DxValidatorModule,
DxTabsModule,
DxDropDownBoxModule,
DxCheckBoxModule,
DxDropDownButtonModule,
DxLoadIndicatorModule,
DxGalleryModule,
DxDateBoxModule,
DxNumberBoxModule
} from "devextreme-angular";
import { SearchOrdersComponent } from "./call-center/search-orders/search-orders.component";
import { OrderEditorComponent } from "./call-center/order-editor/order-editor.component";
import { NotImplementedComponent } from "./not-implemented/not-implemented.component";
import { BoxLaunchComponent } from "./box-launch/box-launch.component";
import { VmiInspectionComponent } from "./vmi-inspection/vmi-inspection.component";
import { BoxExcelComponent } from "./box-excel/box-excel.component";
import { NotificationComponent } from "./notification/notification.component";
import { MainLayoutComponent } from "./layouts/main-layout/main-layout.component";
import { MobileLayoutComponent } from "./layouts/mobile-layout/mobile-layout.component";
import { PartMoveComponent } from "./mobile/part-move/part-move.component";
import { PartSearchComponent } from "./mobile/part-search/part-search.component";
import { MobileHomeComponent } from "./mobile/mobile-home/mobile-home.component";
import { OpenPartOrderComponent } from "./open-part-order/open-part-order.component";
import { LocationMoveComponent } from "./mobile/location-move/location-move.component";
import { DmrComponent } from "./dmr/dmr.component";
import { OrderExceptionComponent } from "./line-receive/components/order-exception/order-exception.component";
import { ClosingCodeComponent } from "./closing-code/closing-code.component";
import { RepairActionComponent } from "./repair-action/repair-action.component";
import { RepairSymptomsComponent } from "./repair-symptoms/repair-symptoms.component";
import { RepairReasonsComponent } from "./repair-reasons/repair-reasons.component";
import { RepairRelatedCommoditiesComponent } from "./repair-related-commodities/repair-related-commodities.component";
import { SupPartsComponent } from './sup-parts/sup-parts.component';
import { CidReviewComponent } from "./cid/cid-review/cid-review.component";
import { CidDashboardComponent } from "./cid/cid-dashboard/cid-dashboard.component";
import { CidQuoteComponent } from "./cid/cid-quote/cid-quote.component";
import { ObaDashboardComonent } from "./oba/oba-dashboard/oba-dashboard.component";
import { ObaFailuresComponent } from "./oba/oba-failures/oba-failures.component";
import { ObaAdminComponent } from "./oba/oba-admin/oba-admin.component";
import { DNCReportComponent } from "./reports/dncreport/dnc-report.component";
import { PartReconcilationComponent } from "./reports/partreconcilation/part-reconcilation.component";
import { LooperDashboardComponent } from './fa-looper/looper-dashboard/looper-dashboard.component';
import { MasterDataComponent } from "./mobile/master-data/master-data.component";
import { TechnicianValidationAdministrationComponent } from './technician-validation-administration/technician-validation-administration.component';
import { SerialNumberSearchComponent } from './serial-number-search/serial-number-search.component';
import { BoxTypeComponent } from './box-launch/box-type/box-type.component';
import { BomPartComponent } from './bom/bom-part/bom-part.component';
import { ExbiAdminComponent } from './exbi/exbi-admin/exbi-admin.component';
import { CustomPopupComponent } from './custom-popup/custom-popup.component';
import { CommonOrderComponent } from './call-center/common-order/common-order.component';
import { SerialNumberRestrictionComponent } from './serial-number-restriction/serial-number-restriction.component';
import { BillingCodeComponent } from './billing-code/billing-code.component';
import { GoldKeyComponent } from './gold-key/gold-key.component';
import { TechPlanComponent } from './call-center/tech-plan/tech-plan.component';
import { ShopFloorOffDaysComponent } from './shop-floor-off-days/shop-floor-off-days.component';
import { StatusAgingComponent } from './call-center/status-aging/status-aging.component';
import { UphComponent } from './uph/uph.component';
import { UphPortalComponent } from './uph-portal/uph-portal.component';
import { UphToolComponent } from './uph-tool/uph-tool.component';
import { PartOrderRepairComponent } from './call-center/part-order-repair/part-order-repair.component';
import { TechLocationComponent } from './call-center/tech-location/tech-location.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { MtmTypeComponent } from './mtm-type/mtm-type.component';
import { LocationTypeComponent } from './location-type/location-type.component';
import { CidDiscountComponent } from './cid/cid-discount/cid-discount.component';
import { OsriReasonComponent } from './osri-reason/osri-reason.component';
import { FtstRepairActionComponent } from './ftst-repair-action/ftst-repair-action.component';
import { BoxRecyclingComponent } from './box-recycling/box-recycling.component';
import { KittingComponent } from './kitting/kitting.component';
import { DpkInjectionComponent } from './dpk-injection/dpk-injection.component';
import { ObaSymptomComponent } from './oba/oba-symptom/oba-symptom.component';
import { EcaTipComponent } from './eca/eca-tip/eca-tip.component';
import { WarrantyTypeComponent } from './warranty-type/warranty-type.component';
import { AppComponent } from "./app.component";

export function init_app(authService: AuthService) {
return () => authService.initializeApp();
}

@NgModule({
imports: [BrowserModule,
DxTemplateModule,
DxRadioGroupModule,
DxButtonModule,
DxDataGridModule,
DxFormModule,
DxListModule,
DxSelectBoxModule,
DxTextBoxModule,
DxTextAreaModule,
DxPopupModule,
DxCheckBoxModule,
DxScrollViewModule,
DxTagBoxModule,
DxLoadPanelModule,
DxToolbarModule,
DxBoxModule,
DxTabsModule,
DxValidatorModule,
DxDropDownButtonModule,
DxDropDownBoxModule,
DxLoadIndicatorModule,
DxGalleryModule,
DxDateBoxModule,
DxNumberBoxModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
HttpClientModule,
RouterModule.forRoot([
{
path: "",
component: MainLayoutComponent,
children: [],
},
], { onSameUrlNavigation: "reload" })],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
})

export class AppModule { }

Here is my angular.json file


{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ClientApp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"progress": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.compact.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/css/bootstrap-override.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/css/styles.css"
],
"scripts": [],
"outputHashing": "all"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"dev": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"uat": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "ClientApp:build"
},
"configurations": {
"production": {
"buildTarget": "ClientApp:buildroduction"
},
"uat": {
"buildTarget": "ClientApp:build:uat"
},
"dev": {
"buildTarget": "ClientApp:build:dev"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "ClientApp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"css/bootstrap-override.css",
"css/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"extractLicenses": true,
"buildOptimizer": true
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"extractLicenses": true,
"buildOptimizer": true
}
}
},
"e2e": {
"builder": "@angular-devkit/build-angularrotractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "ClientApp:serveroduction"
}
}
}
}
},
"ClientApp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angularrotractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"cli": {
"analytics": false
}
}

I am hoping this is just something I am unfamiliar with regarding Angular. I can post other code as needed as I ran out of space.

Continue reading...