Angular-cli: 'Unexpected value 'undefined' exported by the module' * ... in generated typings file. When importing custom library.

[CHAZTATS]

Versions

Angular CLI: 6.0.3
Node: 8.11.2
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

I have a data table I wrote and hosted in my private repo.
I've moved it into an angular 6 library.
It builds and publishes fine when I was using a custom rollup configuration before.
But now when I import it into an app it fails to compile with:
'ERROR in : Unexpected value 'undefined' exported by the module 'DataTableModule in node_modules/angular-data-table-6-test/angular-data-table-6-test.d.ts'

It would be maybe important to note that this module contains 1 entry component which is built within the DataTableModule.

Observed behavior

The above file looks like this:

/**
 * Generated bundle index. Do not edit.
 */
export * from './public_api';
export { CellComponent as ɵg, ColourPickerComponent as ɵk, ColumnHeaderComponent as ɵb, DataTableComponent as ɵa, PageSizeSelectorComponent as ɵl, RowComponent as ɵc, SelectRowCellComponent as ɵi, SettingsComponent as ɵd, SortListComponent as ɵm } from './lib/components';
export { CustomComponentHostDirective as ɵh } from './lib/directives';
export { AllColumnsFilterPipe as ɵe, ColumnFilterPipe as ɵf, SortFilterPipe as ɵj } from './lib/pipes';

The ColourPickerComponent is an entrycomponent.
The DataTableModule looks like this:

import { NgModule } from '@angular/core';
import { CommonModule, CurrencyPipe, PercentPipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { ModalModule } from 'ngx-bootstrap/modal';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { NgxPaginationModule } from 'ngx-pagination';

import {
  RowComponent,
  ColumnHeaderComponent,
  DataTableComponent,
  SettingsComponent,
  CellComponent,
  CustomComponentBaseComponent,
  SelectRowCellComponent,
  PageSizeSelectorComponent,
  SortListComponent,
  ColourPickerComponent
} from './components';

import {
  CustomComponentHostDirective
} from './directives';

import {
  AllColumnsFilterPipe,
  SortFilterPipe,
  ColumnFilterPipe
} from './pipes';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    PopoverModule.forRoot(),
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    PaginationModule.forRoot(),
    NgxPaginationModule
  ],
  declarations: [
    DataTableComponent,
    ColumnHeaderComponent,
    RowComponent,
    SettingsComponent,
    AllColumnsFilterPipe,
    ColumnFilterPipe,
    CellComponent,
    CustomComponentHostDirective,
    SelectRowCellComponent,
    SortFilterPipe,
    ColourPickerComponent,
    PageSizeSelectorComponent,
    SortListComponent
  ],
  entryComponents: [
    ColourPickerComponent
  ],
  providers: [
    PercentPipe,
    CurrencyPipe
  ],
  exports: [
    DataTableComponent
  ]
})
export class DataTableModule { }

The public_api file looks like this:

/*
 * Public API Surface of angular-data-table
 */

export { DataTableModule } from './lib/data-table.module';

I have also tried with the file like this:

/*
 * Public API Surface of angular-data-table
 */

export { DataTableModule } from './lib/data-table.module';
export * from './lib/components';
export * from './lib/directives';
export * from './lib/models';
export * from './lib/pipes';
export * from './lib/services';

When importing in to the app the module looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './components/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { environment } from '../../environments/environment';
import { NavService } from './services/navbar/navbar.service';
import { AccessDeniedComponent } from './components/access-denied/access-denied.component';
import { DataTableModule } from 'angular-data-table-6-test';

@NgModule({
  imports: [
    CommonModule,
    DataTableModule,
  ],
  declarations: [
    NavbarComponent,
    HomeComponent,
    AccessDeniedComponent
  ],
  providers: [
    NavService
  ],
  exports: [
    NavbarComponent
  ]
})
export class CoreModule { }

When I run ng serve --port 9000 I get 'ERROR in Cannot read property 'members' of undefined'
When I run ng serve --aot --port 9000 I get the above error.

I'm led to believe these 2 things are related.

Desired behavior

I'd like the library to be imported correctly into my app so that it runs.

[CHAZTATS]

Fixed issue.
Turns out having your files bundled into various index.ts files in your library is not appreciated by ng-packagr.

[geetee24]

I have this sudden error msg:

ERROR in Cannot read property 'members' of undefined

Is this related to yours? I do not understand what your fix was. Can you elaborate?

[CHAZTATS]

It depends on your scenario.
Normally I get that error when I've mispelled a component declaration in a module or something like that.
but in this case as I was importing my own library from a repo it turned out to be a different issue.
If you're using index.ts files for your imports/exports you may want to try removing them and referring to your imports directly.

[jmsegrev]

For anyone interested dherges/ng-packagr#917

[daniele-pecora]

@jmsegrev thanx that helped me
To being able to create --aot buils necessarily any import has to be explicit.
Especially if it is an angular 6 library project.

So I had to rewrite the imports.

Wrong:

import { Component1, Component2} from 'my-package'

Right:

import { Component1} from 'my-package'
import { Component2} from 'my-package'

[dyh333]

It depends on your scenario.
Normally I get that error when I've mispelled a component declaration in a module or something like that.
but in this case as I was importing my own library from a repo it turned out to be a different issue.
If you're using index.ts files for your imports/exports you may want to try removing them and referring to your imports directly.

it is really strange , is it an angular bug ???

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}