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?

Hadsall

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

Aught

Did you mean FooBaseService? If so, yes. As I wrote, "In most cases, services provided in library are used as-is, but can be extended in main-app". – Hadsall

Yes, FooBaseService*. You can extend them - you need to export them in the public_api.ts as this exports the class rather then the template - you can read more about this as well in the link I provided. – Aught

This doesn't 100% answer my question, but it got me in the right direction enough to run into other issues. – Hadsall

--prod is not needed anymore by default the build is in prod mode, for more info github.com/angular/angular-cli/issues/… – Knepper

Answer 2

Along the same lines as this question, is it possible to use an ng6 Library in an ng5 App? I'm running into this error:

19:66-82 "export 'defineInjectable' was not found in '@angular/core' as part of the new providedIn feature that ng6 uses.

Hermaphroditism