Angular6.x Library not exposing all members in public_api.ts

Question

After updating my project to the latest version of Angular (6.0.4) i wanted to finally separate my code into different libraries.

The setup is as followed:

1. CMS - app
2. Client - app
3. Core - Library with shared members for both apps

I created 3 empty projects and started moving all my components and services into the right folders. After finally finished all these edits and removing the TS errors, my build is still failing. It seems like my CMS app can't find any of the modules, components or services defined in my library. My library is building correctly and seems to contain all these elements.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '**\Webdictaat.Client\dist\core\core' in '**\Webdictaat.Client\projects\cms\src\app'

My library contains a public_api.ts which looks like it's working correctly BUT the generated core.ts file does not contain all exported members. For example, the wd-core.module which is on the second line of the public_api.d.ts

The real question: What am i doing wrong in my library that not all members are exported?

//dist/core/public_api.d.ts
export * from './lib/avatar/avatar.component';
    export * from './lib/wd-core.module'; 
export * from './lib/modal-component/modal-component.component';
export * from './lib/game-elements/game-elements.module';
export * from './lib/core/html-outlet.directive';
export * from './lib/services';
export * from './lib/models';

//dist/core/core.d.ts
//No wd-core.module :(
/**
 * Generated bundle index. Do not edit.
 */
export * from './public_api';
export { BaseModalService as ɵg } from './lib/core/basemodal.service';
export { GroupByPipe as ɵv } from './lib/core/group-by.pipe';
export { ArraySortPipe as ɵw } from './lib/core/order-by.pipe';
export { ProcessTokenComponent as ɵx } from './lib/core/process-token.component';
export { DirtyGuard as ɵk } from './lib/core/security/dirty.guard';
export { wdApi as ɵb } from './lib/core/wd.service';
export { WdFilterPipe as ɵu } from './lib/core/wdfilter.pipe';
export { DialogComponent as ɵs } from './lib/dialog/dialog.component';
export { ModalComponentComponent as ɵy } from './lib/modal-component/modal-component.component';
export { NavMenuService as ɵm } from './lib/nav-menu/nav-menu.service';
export { AccountService as ɵa } from './lib/services/account.service';
export { AchievementService as ɵi } from './lib/services/achievement.service';
export { AssignmentService as ɵn } from './lib/services/assignment.service';
export { ConfigService as ɵd } from './lib/services/config.service';
export { DialogService as ɵe } from './lib/services/dialog.service';
export { DictaatService as ɵc } from './lib/services/dictaat.service';
export { GoogleAnalyticsEventsService as ɵq } from './lib/services/google-analytics.service';
export { ImageService as ɵh } from './lib/services/images.service';
export { ParticipantService as ɵo } from './lib/services/participantService';
export { PollService as ɵr } from './lib/services/poll.service';
export { QuizService as ɵf } from './lib/services/quiz.service';
export { RatingService as ɵj } from './lib/services/rating.service';
export { StylingService as ɵp } from './lib/services/styling.service';
export { VideoService as ɵl } from './lib/services/video.service';
export { SpinnerComponent as ɵt } from './lib/spinner/spinner.component';

Full Github project:

https://github.com/Webdictaat/Webdictaat.Client/tree/update6

Library project

https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/core

CMS app project

https://github.com/Webdictaat/Webdictaat.Client/tree/update6/projects/cms

Hanser

Answer 1

What you need to do is put all that needs to be available outside of the library in the public_api.ts file like already the first answer suggests. This is the intention of this file and needs to be done so you can use the library correctly. Also the issue with the index.ts files is real so if you still get issues after the changes just export all in the public_api.ts. Then you do the imports from 'core' not 'core/core' or even a longer path like you do in your code now. For example in your dictaat.module.ts it should look like this:

import { WdCoreModule, DictaatService } from 'core';

If it does not work like this it means the exports are missing in the public_api.ts file.

Monarchist

Thnx @Alesd. My editor was initially throwing errors about importing directly from 'core' but i've got it up and running now! Thnx for the help. – Hanser

Answer 2

I found (by trail and error) that ng-packagr, which is used by Angular 6 to package your libraries, does not properly handle imports exposed through "barrel" files named "index.ts" that are referenced by their parent directory name.

So, in your public_api.ts file, where you have, for instance,

export * from './lib/services';

you need to change it to

export * from './lib/services/index';

This is annoying, and I was hoping that it would be fixed, or at least well documented, when the Angular CLI incorporated it, but alas, it seems not.

It's actually not clear to me whether this is an ng-packagr issue or an Angular issue (possibly with ngc), but there is an issue at https://github.com/dherges/ng-packagr/issues/195 that describes what's going on, and that links to some Angular issues, and a pull request for Angular to partially fix it.

In other words, it's complicated.

In the meantime, I find that just referring directly to the index.ts file makes it work.

Panter

Thnx for the reply. I don't think this is the issue for me. As you can see in the compiled core.ts the service 'barrel' is working correctly and the services are being exported. – Hanser