ng-packagr: [AoT] [ngc] Re-exports causing build error during

Any news?

In Angular, the error occurs when importing stuff from barrels in a module or routing file. As many people said in above comments, the error disappears when one imports the component/service from the actual file path and not from the barrel. Versions: “ng-packagr”: “^4.1.0” “@angular/cli”: “^6.2.7” “@angular/xxx”: “^6.1.10” “typescript”: “^2.9.2”.

It would be really wonderful if at least the error message was a bit more descriptive because this minor issue can make people waste a lot of time.

BUILD ERROR
Cannot read property 'module' of undefined
TypeError: Cannot read property 'module' of undefined
    at MetadataBundler.convertSymbol (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:312:61)
    at createReference (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:438:27)
    at MetadataBundler.convertReference (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:486:28)
    at MetadataBundler.convertExpression (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:415:37)
    at MetadataBundler.convertValue (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:396:29)
    at MetadataBundler.convertValue (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:405:36)
    at /home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:399:62
    at Array.map (<anonymous>)
    at MetadataBundler.convertValue (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:399:30)
    at MetadataBundler.convertValue (/home/sergiojoker11/IdeaProjects/collect/node_modules/@angular/compiler-cli/src/metadata/bundler.js:405:36)


Compilation failed. Watching for file changes...

This frequently affects me when working on a large project and I spend way too much time finding out what export is missing. The error message is useless.

BUILD ERROR
src/index.ts(8,1): error TS2308: Module '...' has already exported a member named 'ɵa'. Consider explicitly re-exporting to resolve the ambiguity.

I did get a similar issue due to Typescript Barrels.

My secondary entry point uses a barrel but didn’t export all the component which were imported elsewhere this lead to the creation of an extra file with this forgotten to export component:

/**
 * Generated bundle index. Do not edit.
 */
export * from './index';
export { MatOverlayOriginComponent as ɵa } from './mat-overlay-origin/mat-overlay-origin.component';

As multiple of my libraries had the same issue it complained about re-exporting the same symbol.

I could resolve the issue by exporting the MatOverlayOriginComponent in the index.ts of its module.

Hope this can help in resolving this issue

@siderite you have to export all components, modules and pipes out of the index file that ng packagr uses. That means that you can’t have any private modules used only internally. They have to all be exported towards the top level

I got the same issue in my project. We defined the following rule for our development “Export from barrels, but only explicitly import from single files instead of barrels”.

Is there a solution on your side to fix this in an upcoming version? It would make our code more lean if imports from barrels are possible (e.g. in routing-modules defining routes and navigation structure)

Not a v1 issue. issue reproducible in v2 with angular 5.

By applying this change set, the compile error goes away.

diff --git a/my-lib/src/lib.module.ts b/my-lib/src/lib.module.ts
index 0ad912a..ef862f8 100644
--- a/my-lib/src/lib.module.ts
+++ b/my-lib/src/lib.module.ts
@@ -2,7 +2,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FooComponent } from './foo/foo.component';
 import { BarService } from './bar/bar.service';
-import { SharedModule } from './shared/index';
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   imports: [

On first sight, it looks related to TypeScript barrels (#195). But, the import was explicit to the ./shared/index (not the folder name which will be aliased to index).

Here are the bundle indexes:

$ cat my-lib.d.ts

/**
 * Generated bundle index. Do not edit.
 */
export * from './public_api';
export { SharedModule as ɵa } from './shared/shared.module';

$ cat my-lib.metadata.json

{
  "__symbolic": "module",
  "version": 4,
  "metadata": {
    "BarService": {
      "__symbolic": "class",
      "decorators": [
        {
          "__symbolic": "call",
          "expression": {
            "__symbolic": "reference",
            "module": "@angular\/core",
            "name": "Injectable",
            "line": 5,
            "character": 1
          }
        }
      ],
      "members": {
        
      }
    },
    "FooComponent": {
      "__symbolic": "class",
      "decorators": [
        {
          "__symbolic": "call",
          "expression": {
            "__symbolic": "reference",
            "module": "@angular\/core",
            "name": "Component",
            "line": 2,
            "character": 1
          },
          "arguments": [
            {
              "selector": "my-foo",
              "template": "<h1>foo<\/h1>",
              "styles": [
                "h1 {\n  color: #ff00ff; }\n"
              ]
            }
          ]
        }
      ],
      "members": {
        
      }
    },
    "MyLibModule": {
      "__symbolic": "class",
      "decorators": [
        {
          "__symbolic": "call",
          "expression": {
            "__symbolic": "reference",
            "module": "@angular\/core",
            "name": "NgModule",
            "line": 6,
            "character": 1
          },
          "arguments": [
            {
              "imports": [
                {
                  "__symbolic": "reference",
                  "name": "\u0275a"
                }
              ],
              "declarations": [
                {
                  "__symbolic": "reference",
                  "name": "FooComponent"
                }
              ],
              "exports": [
                {
                  "__symbolic": "reference",
                  "name": "FooComponent"
                }
              ]
            }
          ]
        }
      ],
      "members": {
        
      },
      "statics": {
        "forRoot": {
          "__symbolic": "function",
          "parameters": [
            
          ],
          "value": {
            "ngModule": {
              "__symbolic": "reference",
              "name": "MyLibModule"
            },
            "providers": [
              {
                "__symbolic": "reference",
                "name": "BarService"
              }
            ]
          }
        }
      }
    },
    "\u0275a": {
      "__symbolic": "class",
      "decorators": [
        {
          "__symbolic": "call",
          "expression": {
            "__symbolic": "reference",
            "module": "@angular\/core",
            "name": "NgModule",
            "line": 3,
            "character": 1
          },
          "arguments": [
            {
              "imports": [
                {
                  "__symbolic": "reference",
                  "module": "@angular\/common",
                  "name": "CommonModule",
                  "line": 5,
                  "character": 4
                }
              ]
            }
          ]
        }
      ],
      "members": {
        
      }
    }
  },
  "origins": {
    "BarService": ".\/bar\/bar.service",
    "FooComponent": ".\/foo\/foo.component",
    "MyLibModule": ".\/lib.module",
    "\u0275a": ".\/shared\/shared.module"
  },
  "importAs": "@my\/lib"
}