NG6: library-provided service is undefined

Question

I am seeking assistance / pointers / guidance in debugging / understanding a problem with a derived class which extends a library-provided service in an Angular 6 project.

I am attempting to move an existing Angular 5.x project into the new workspace format for angular.json in Angular 6 projects.

My existing project consists of an Angular application and a separate shared NgModule which provides services and other functionality. The shared module will be used in multiple applications, in a structure like this:

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

In my existing NG5 code, the shared library is npm link'ed into main-app as TS source files (which works well for my team's workflow, despite being explicitly not recommended by the CLI team).

In the NG6 app, library is a library project inside angular.json, built as such, and pulled into the project via path definition in tsconfig.json. The workspace is standard NG6 layout:

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

In most cases, services provided in library are used as-is, but can be extended in main-app (or other-app) to provide app-specific functionality. This works fine in Angular 5, but in Angular 6, I get the following error in the console when trying to load the page (with ng serve running):

Object prototype may only be an Object or null

The warning happens here:

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

FooBaseService is coming in as 'undefined' when the bootstrap process instantiates FooService.

Based on research, this error is commonly related to circular dependency issues, but I don't think that's what's happening. I'm not getting any circ-dep warnings when I build the library, or any issues building main-app. In addition, running madge -c (link) doesn't find any circ-deps in either dist/library or dist/main-app.

I'm sort of stumped on how to proceed in debugging this issue. Anyone out there with a deeper understanding of how Angular 6 handles module-provided services who might be able to point me in the right direction?

Answer 1

I guess your FooBarService is located is located inside the library.
With the new workspace structure ng6 provides, the libraries are need to be built before using them. You should 'ng build --prod' (prod because AOT) the library and then import it directly as a library, not from its sources. e.g.: import FooBarService from 'foobar-service-library';

You can read more about it here: https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5