Angular 19 module Import Issue: common-reporting in Web Workspace

I have created an Ionic/Angular workspace with the following structure:

frontend/
│
├── common-reporting/
│ ├── src/
│ │ ├── api-service.ts
│ │ ├── ionic-common-component.ts
│ │ ├── index.ts (exports all components and services)
│ ├── package.json
│ ├── ts.config.json
│
├── web/ (Web application consuming `common-reporting`)
│ ├── src/
│ ├── angular.json
│ ├── package.json
│ ├── ts.config.json


I am trying to use the common-reporting module inside my web project. However, when I import common-reporting and run ng serve, I encounter an below error:

ERROR: The injectable 'UtilService2' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (core.mjs:2531:11)
at UtilService2.get (core.mjs:5595:28)
at getOwnDefinition (core.mjs:629:39)
at getInjectableDef (core.mjs:619:10)
at R3Injector.get (core.mjs:2150:55)
at ChainedInjector.get (core.mjs:4732:32)
at lookupTokenUsingModuleInjector (core.mjs:5075:31)
at getOrCreateInjectable (core.mjs:5121:10)
at Module.ɵɵdirectiveInject (core.mjs:11824:17)
at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:13:26)


Code Implementation:

common-reporting/util-service.ts

import { Injectable, inject } from '@angular/core';
import { ToastController, LoadingController, AlertController } from '@ionic/angular/standalone';

@Injectable({
providedIn: 'root'
})
export class UtilService {
private _toastController = inject(ToastController);
private _loadingController = inject(LoadingController);
private _alertController = inject(AlertController);

constructor() { }

async showToast(message: string) {
const toast = await this._toastController.create({
message,
});
await toast.present();
}
}


common-reporting/package.json

{
"name": "common-reporting",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc && tsc-alias"
},
"keywords": [],
"author": "",
"license": "ISC",
"peerDependencies": {
"@angular/common": "^19.0.5",
"@angular/compiler": "^19.0.5",
"@angular/core": "^19.0.5",
"@angular/router": "^19.0.5",
"@angular/platform-browser": "^19.0.5",
"@angular/platform-browser-dynamic": "^19.0.5",
"@ionic/angular": "^8.4.1",
"@ionic/core": "^8.4.1",
"rxjs": "~7.8.0"
},
"devDependencies": {
"@ionic/angular": "^8.4.1",
"@angular/cli": "^19.0.5",
"@angular/compiler-cli": "^19.0.5",
"@types/mocha": "^10.0.10",
"@types/node": "^22.10.2",
"tsc-alias": "^1.8.10",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "^5.7.2"
}
}


web/app.component.ts

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { UtilService } from 'common-reporting';

@Component({
selector: 'app-root',
imports: [IonApp, IonRouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
constructor(private _utilService: UtilService) {}

ngOnInit() {
this._utilService.showToast("Hello World");
}
}


web/package.json

{
"name": "web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.0.5",
"@angular/common": "^19.0.5",
"@angular/compiler": "^19.0.5",
"@angular/core": "^19.0.5",
"@angular/forms": "^19.0.5",
"@angular/platform-browser": "^19.0.5",
"@angular/platform-browser-dynamic": "^19.0.5",
"@angular/router": "^19.0.5",
"@capacitor/android": "6.2.0",
"@capacitor/app": "6.0.2",
"@capacitor/core": "6.2.0",
"@capacitor/haptics": "6.0.2",
"@capacitor/keyboard": "6.0.3",
"@capacitor/status-bar": "6.0.2",
"@ionic/angular": "^8.4.1",
"@ionic/core": "^8.4.1",
"common-reporting": "file:../common-reporting",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.5",
"@angular/cli": "^19.0.5",
"@angular/compiler-cli": "^19.0.5",
"@capacitor/cli": "6.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.2"
}
}


web/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

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


web/app.config.ts

import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideIonicAngular({ mode: 'md' }),
provideRouter(routes),
provideHttpClient(),
]
};


I build my common-reporting using tsc-alias (npm run build) command it is getting build without error but when after addign import of common-reproting in web project it throws error, I did a lot of search but unable to find the exact root cause of the issue.

In short: I just created a basic ionic/angular web project i have created and added common-reporting module in it.

Can someone help me to find root cause of the mistake?

Thank you in advance!

Continue reading...