Within the angular application called "app-standalone," I successfully utilized the injectables CoreService, OuterService, and OutmostService in the AppComponent. Here is the link to the corresponding code: https://github.com/moky80/angular-injectable-chain/blob/master/app-standalone/src/app/app.component.ts.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CoreService {
constructor() { console.log("Initialized Core");
} }
@Injectable({ providedIn: 'root' })
export class OuterService {
constructor(private core: CoreService) {
console.log("Initialized Outer");
}}
@Injectable({ providedIn: 'root' })
export class OutmostService { constructor(private outer: OuterService) {
console.log("Initialized Outmost");
}}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'app-standalone';
constructor(private outmost: OutmostService){
console.log("Initialized AppComponent");
}
}
In the next phase, I transferred CoreService and OuterService to an Angular library named “lib-core.” The relevant code can be found here: https://github.com/moky80/angular-injectable-chain/blob/master/lib-core/projects/lib-core/src/lib/lib-core.service.ts.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CoreService {
constructor() {
console.log("Initialized Core");
}
}
@Injectable({
providedIn: 'root'
})
export class OuterService {
constructor(private core: CoreService) {
console.log("Initialized Outer");
}
}
Subsequently, I developed a new application called “app-uses-lib-core,” which incorporates the lib-core functionality: https://github.com/moky80/angular-injectable-chain/blob/master/app-uses-lib-core/src/app/app.component.ts.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { Injectable } from '@angular/core';
import { OuterService } from 'lib-core';
@Injectable({ providedIn: 'root' })
export class OutmostService { constructor(private outer: OuterService) {
console.log("Initialized Outmost");
}}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'app-uses-lib-core';
constructor(private outmost: OutmostService){
console.log("Initialized AppComponent");
}
}
The issue arose when running "app-uses-lib-core," resulting in the error message "NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext."
I am puzzled as to why moving CoreService and OuterService to lib-core caused this problem. If anyone has insights into what might be wrong with "lib-core" and "app-uses-lib-core" and how to rectify it using Angular 7, please share your thoughts.