The library's service under NG6 is not currently defined

Currently, I am in need of assistance, pointers, or guidance in debugging and understanding an issue with a derived class that extends a service provided by a library in an Angular 6 project.

I am working on migrating an existing Angular 5.x project to the new workspace format for angular.json in Angular 6 projects.

My current project includes an Angular application and a separate shared NgModule that offers services and other features. This shared module will be utilized in multiple applications structured like this:

project-root/
    library/
    main-app/
    other-app/

In my Angular 5 codebase, the shared library is linked into main-app as TypeScript source files using npm link, which suits our team workflow even though it is not recommended by the Angular CLI team.

In the Angular 6 app, the library is set up as a library project within angular.json, built accordingly, and incorporated into the project through path configuration in tsconfig.json. The workspace follows the standard layout for Angular 6 projects:

workspace-root/
    dist/...
    node_modules/...
    projects/
        library/
            src/lib/...
        main-app/
            src/app/...
        other-app/
    ...

Mostly, the services from the library are used without any modifications, but occasionally they are extended in main-app (or other-app) to cater to application-specific requirements. This setup functions seamlessly in Angular 5; however, in Angular 6, I encounter an error when trying to load the page while running ng serve:

Object prototype may only be an Object or null

The warning is triggered at this line of code:

export class FooService extends FooBaseService { // ...
--------------------------------^

During the bootstrap process, FooBaseService is found to be 'undefined' when attempting to instantiate FooService.

After conducting some research, it appears that this error is typically linked to circular dependency issues, though I believe that might not be the case here. No circular dependency warnings are raised during the library build or when building main-app. Moreover, performing madge -c doesn't detect any circular dependencies in either dist/library or dist/main-app.

I am currently at a loss regarding how to proceed with resolving this issue. Are there any individuals well-versed in Angular 6's handling of module-provided services who could offer some insights on how to tackle this problem?

angulartypescriptangular6angular-cli-v6

Answer №1

It appears that your FooBarService is located within the library itself.
In the new workspace structure provided by ng6, it is necessary to build the libraries before using them. You should run 'ng build --prod' (using prod for AOT) on the library and then import it directly as a library, not from its sources. For example: 

import FooBarService from 'foobar-service-library'
;

You can find more information about this process here:

Answer №2

Is it feasible to incorporate an ng6 Library into an ng5 App, similar to the inquiry posed here? I've encountered a specific error:

19:66-82 "export 'defineInjectable' was not found in '@angular/core'
while utilizing the new providedIn feature that ng6 implements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React - retrieving the previous page's path after clicking the browser's "back" button

Imagine I'm on Page X(/path-x) and then navigate to page Y(/path-y). Later, when I click the "back" button in the browser. So my question is, how do I retrieve the value of /path-y in PageX.tsx? Note: I am utilizing react-router-dom ...

javascriptreactjstypescript

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

I have an array of objects called arrlist and a parameter uid If the property value has duplicate values (ignoring null) and the id is not the same as the uid, then autoincrement the value until there are no more duplicate values. How can I achieve the a ...

javascriptreactjsarraystypescriptobject

'Error: The type is missing the 'previous' property - Combining TypeScript with ReactJS'

I am quite new to using reactjs and ts. While I understand the error that is occurring, I am unsure of the best solution to fix it. Currently working with reactjs, I have created an: interface interface IPropertyTax { annul: { current: number; p ...

javascriptreactjstypescriptsetstate

Stop any ongoing search requests in Angular 7 using Ng2SmartTable

My current setup involves Angular version 7.0.1 and ng2-smart-table version 1.4.0. The issue I'm facing is that each search within the table triggers a new API request to fetch data. What I actually want is for only the latest search request to be pro ...

angulartypescriptng2-smart-table

What are the steps for importing KnockOut 4 in TypeScript?

It appears straightforward since the same code functions well in a simple JS file and provides autocompletion for the ko variable's members. Here is the TypeScript code snippet: // both of the following import lines result in: `ko` undefined // impo ...

javascripttypescriptimportknockout.jstsc

Adding a new row with the click of a button in Angular 4 can be achieved by following these steps:

https://i.sstatic.net/T4Wgg.pngI am working on a code snippet that creates a row and a button named Add Person. When Add Person is clicked, I need to dynamically generate additional rows with Person 2, Person 3, and so on. https://i.sstatic.net/VCzvO.png ...

angularbuttonclickrowaddition

How can I restrict the return type of a generic method in TypeScript based on the argument type?

How can we constrain the return type of getStreamFor$(item: Item) based on the parameter type Item? The desired outcome is: When calling getStream$(Item.Car), the type of stream$ should be Observable<CarModel> When calling getStream$(Item.Animal), ...

typescript

Maintain the nullability of object fields when casting

I have been working on a type called DateToNumber that converts all the Date properties of an object to number. Here is what I have come up with so far: type LiteralDateToNumber<T> = T extends Date ? number : T extends Date | null ? number | nu ...

typescripttypescastingtypescript-generics

How to use ngModel directive in Angular to select/unselect dynamically generated checkboxes and retrieve their values

Currently, I am working with a dataset retrieved from an API and dynamically creating checkboxes in my HTML page using the DataView component from PrimeNG. My objective is to implement a feature where users can select or deselect all checkboxes with a cli ...

javascriptangulartypescriptprimeng

What exactly is an npm "modular construction" and what is the process for setting it up?

I am aiming to integrate sortablejs's MultiDrag feature with Vuejs2 and Typescript. The official documentation states: MultiDrag is a plugin for SortableJS, but it may not be included in all of Sortable's builds. It comes pre-installed in the ...

typescriptnpmvuejs2sortablejs

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Encountering a mysterious error while trying to implement React's Context API in Next.js with TypeScript. The issue seems to be revolving around wrapping the context provider around the _app.tsx file. Even though I am passing values to the Context Pr ...

reactjstypescriptnext.js

Exploring nested objects and arrays with Plunker - extracting their values

I have retrieved two arrays, each containing nested objects, from API endpoints. One array (preview) consists solely of numbers. For example: [{ obj1:[1, 2], obj2:[3, 4] }] To obtain strings associated with IDs, I made another call to a different en ...

javascriptarraysangular

Angular 8 form controls becoming unresponsive while the list is being loaded

Hello, I am currently experiencing an issue in Angular. I have a page with a basic Angular form and two independent components that load lists from an API (comments with 500+ records and posts with 500+ records). The Problem: While trying to enter values ...

htmlangularangular5angular7angular8

Using Angular and ngModel to Hide a Form

My task involves creating a form for employers to edit their employees' information. Utilizing Angular, we have implemented a template-driven form with ngModel for seamless two-way data binding. Initially, the employee's details are fetched from ...

angular

Struggling to upload files in .NET Core 3? The Request.Form.Files is coming up empty

After conducting extensive research and experimenting with various methods, I encountered an issue during the upgrade of my .NET Core site from version 2 to 3.2. Everything was functioning well on .NET Core 2, but upon migrating my Angular project to the n ...

angular.net-core

When using Angular 2, an error may occur where you receive a message stating that you cannot read the property 'length' of undefined while attempting to call

When creating a component (let's call it A) with the @input decorator to retrieve values from the selector, keep in mind that this component will generate text fields based on the input values specified in the selector. Component A is then utilized in ...

angulartypescript

Angular 2 encountered a fatal error: Issues with parsing the template:

Here is the code snippet I am currently working with: <div class="container"> <div [hidden]="loggedIn"> <md-grid-list cols="6" [style.margin-top]="'20px'"> <md-grid-tile [colspan]="1"></md-grid-tile> I have already ...

javascriptangular

How to deactivate the mobile hardware back button functionality in Ionic 2

Our team has been developing a business application and we've encountered a perplexing issue. Every time we press the mobile hardware back button, our application's GUI becomes disrupted. Despite dedicating numerous hours to finding a solution, t ...

javascriptangularionic2

Make sure to call the child API only after the parent API in your

Currently facing an issue where I have two entities - child and parent, each with its own API and a one-to-many relationship. The parent component contains the child component within it, allowing users to create children when creating a new parent. How c ...

angularrestapi

Utilize an object as the value of a radio button component in an Angular application

Within my dynamic form, I am aiming to implement a radio control. Each choice in the control should have a value of an array. Although the functionality works, the selected choice does not seem to initialize when the page initially loads. For a visual exa ...

angularangular-material