json - Angular 19 module Import Issue: common module into Workspace - Stack Overflow

admin管理员组

文章数量:1202373

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

frontend/
│
├── common-reporting/ 
│   ├── src/
│   │   ├── Util2-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] (appponent.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/appponent.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: './appponent.html',
  styleUrl: './appponent.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/appponent';

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 and added common-reporting module in it.

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

Thank you in advance!

本文标签： jsonAngular 19 module Import Issue common module into WorkspaceStack Overflow