[AoT] [2.0.0] Metadata.json incomplete (Please add a @NgModule annotation.)

[dirkluijk]

Type of Issue

[X] Bug Report
[ ] Feature Request

Description

The generated metadata.json is missing lots of exports. This results in many Please add a @NgModule annotation. errors in my app.

It may have to do with the fact that I am using barrel files?

How To Reproduce

package.json (simplified)

{
  "scripts": {
    "build": "ng-packagr -p ng-package.json",
  }
}

ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "name": "my_lib",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

public_api.ts

export * from './components/index';

components/index.ts

export * from './dir1';
export * from './dir2';
export * from './dir3';

/// ...
export * from './lastdir';

export * from './file1';
export * from './file2';
export * from './file3';

generated my_lib.metadata.json

{
  "__symbolic": "module",
  "version": 4,
  "exports": [
    {
      "from": "./components/lastdir"
    }
  ],
  "metadata": {
    "InterfaceFromFile1": {
      "__symbolic": "interface"
    },
    "InterfaceFromFile2": {
      "__symbolic": "interface"
    },
    "InterfaceFromFile3": {
      "__symbolic": "interface"
    }
  },
  "origins": {
    "InterfaceFromFile1": "./components/file1",
    "InterfaceFromFile2": "./components/file2",
    "InterfaceFromFile3": "./components/file3"
  },
  "importAs": "my_lib"
}

Expected Behaviour

It looks like the barrel exports are all overwritten by the last directory (barrel) export.

Version Information

ng-packagr: 2.0.0 (had the same issue on 2.0.0-rc.12)
@angular/*: ~5.2.0
typescript: ~2.6.0

[dirkluijk]

Closed in favour of duplicate issue #195. Fixed it by changing my index.ts barrel file:

export * from './dir1/index';
export * from './dir2/index';
export * from './dir3/index';

/// ...
export * from './lastdir/index';

export * from './file1';
export * from './file2';
export * from './file3';

[dherges]

Hi @dirkluijk,

is it possible that you provide the reproduction ina GitHub project and just by running ngc?

You already give me the most precise error description and instructions I have seen so far. If you could extract the repro, we'll be able to reach out to the Angular team about a fix.

[dirkluijk]

Hi @dherges. Thank you for taking time for this. I am really struggling with something else that is very hard to track down. I will give you access to a private repo.

[dherges]

It will have to a "minimal reproduction" like three or four source files, a tsconfig and the resulting metadata.json file with a description what is wrong in the metadata.

[dirkluijk]

Here you go. I just pushed https://github.com/dirkluijk/ng-packagr-issue, which contains two directories:

• A sample component library "foobar" with a barrel structure I use for my real library as well
• A "temppp" dir with a new Angular CLI project with "foo" lib as (local) dependency

Steps to reproduce:

git clone git@github.com:dirkluijk/ng-packagr-issue.git
cd ng-packagr-issue
cd foobar
yarn
npm run build
cd dist
npm pack
cd ../../temppp
yarn
ng serve --aot

(in case you get issues, remove the yarn.lock)

You will get:

ERROR in : Can't construct a query for the property "boxes" of "BoxWrapperComponent in /path/to/@dirkluijk/foo/dirkluijk-foo.d.ts" since the query selector wasn't defined.

Which is similar to the issues I got earlier:

: Unexpected value 'undefined' imported by the module 'SomeModule in /path/to/my-project/node_modules/my-lib/my-lib.d.ts'
: Can't resolve all parameters for MyDirective in /path/to/my-project/node_modules/my-lib/my-lib.d.ts: (?).
: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
: Can't resolve all parameters for MyComponent in /path/to/my-project/node_modules/my-lib/my-lib.d.ts: ([object Object], [object Object], ?, [object Object]).

(anonymized names)

When you remove the /index.ts suffixes in components/index.ts, build it and fetch it into tempp app, you will get the original problem back:

ERROR in : Unexpected value 'BoxModule in /path/to/temppp/node_modules/@dirkluijk/foo/dirkluijk-foo.d.ts' imported by the module 'AppModule in /path/to/temppp/src/app/app.module.ts'. Please add a @NgModule annotation.

Maybe my barrel approach is just wrong. But there is no circular reference, and I think this is just the way you should be able to use barrels.

[dirkluijk]

Maybe this is something that angular/cli has solved with a specific webpack configuration/option?

[alan-agius4]

Obsolete with VE removal

[github-actions]

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

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