Does not package with ng-packagr

[nmrichards]

Bug, feature request, or proposal:

When using ng-packagr, I receive a build error "ENOENT: no such file or directory, open '.../node_modules/@angular/packages/material...'

What is the expected behavior?

It packages properly with no build errors.

What is the current behavior?

It errors out and doesn't build successfully but I can do ng build without issues.

What are the steps to reproduce?

1. Start a new project using cli. ng new material-test
2. Update dependencies to use @angular/material 2.0.0-beta.12 and all peer dependencies.
3. Add ng-packagr to dev dependencies, all necessary files for ng-packagr (public_api & ng-package.json) and run npm install.
4. Import any material module into main app module
5. run ng-packagr -p ng-package.json.

OR

1. Checkout https://github.com/nmrichards/material-issue-project
2. run npm install
3. run npm run packagr

What is the use-case or motivation for changing an existing behavior?

To be able to use ng-packagr with beta.12 in personal libraries.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular 4.4.4
Material 2.0.0-beta.12
TypeScript 2.3.3

Is there anything else we should know?

I also receive messages during the ng-packagr process stating a number of items are imported but never used even if I only import one module from material library. See file below for said messages. In this particular test project, I'm only importing MatIconModule into the main app module. If I run ng-packagr on beta.11, I don't receive the build error but still get the imported but not used messages and it successfully builds. I will also be submitting this to the ng-packagr project as I'm not sure if this an ng-packagr issue or material beta.12 issue but I only get the issue if I import any module from material beta.12. And also putting on Stack Overflow in case it's just an issue that I'm causing due to something I'm doing wrong, in which case I apologize for submitting this issue.

EDIT: ng-packagr issue can be tracked here #172

[jelbourn]

I'm not really sure what that is. We maintain our own packaging tooling currently with gulp.

gulp material:build-release

[matt328]

I don't think this should have been closed. Some clarification: we aren't trying to use ng-packagr to build material itself. We are working on library projects that include material, and using ng-packagr to build those. The problem seems isolated to the esm5 packaging of material, which I am guessing not many people are using or else this issue would have much more traffic.

Is there a working example of a project successfully using beta.12's esm5 packaging anywhere?

Edit: I have another project that is using a custom rollup configuration only building umd and fesm modules successfully with material beta.12, so I really think its an issue specific to the esm5 packaging.

[wallace41290]

I agree with @matt328 , it is very important for us to be able to use Material in our own component libraries. Something must have changed between beta.11 and beta.12 to break what ng-packagr is trying to accomplish. I am seeing the same issue and looking forward to your insight, @jelbourn

[jelbourn]

It's impossible for me to say what the issue might be, since this is the first time I've heard of this tool. We unfortunately don't have the capacity to track down issues with 3rd party tools; if someone is able to point to a specific issue with the package output, we can make any necessary changes to the packaging.

[willshowell]

@nmrichards I only have brief experience with ng-packagr, but it looks like you're trying to bundle @angular/material with your component library. Does it work with setting it as a peer dependency instead? It appears that @angular/cdk/* are listed as externals by default, but @angular/material should be added as one in order to not bundle it with your lib.

@jelbourn it does look like there is an invalid sourcemap url (also could be my own ignorance about how they work).

maybe from #7403

We are removing sorcery until we can upgrade tsickle and ngc to latest. Our versions of these break when mapping all the way back to TS. (temporary)

[jelbourn]

@willshowell I'll defer any sourcemap stuff to @kara

[matt328]

@willshowell adding material to lib.externals in ng-package.json:

{
  "lib": {
    "entryFile": ...,
    "externals": {
      "@angular/material": "ng.material"
    }
}

seems to have fixed my issue, my library is now building successfully with ng-packagr.

That is not to say there still isn't some issue here with the esm5 packaging's sourcemaps. I think someone consuming the esm5 package would likely face the same errors.

[dherges]

Hi @jelbourn,

author of ng-packagr here. It's a tool for (publicApi: TypeScriptFile) => { fesm5, fesm15, umd, ... } compiling/bundling, pretty much like angular-quickstart-lib in a CLI command.

Two observations:

1. Users need to configure their external dependencies. rxjs and some @angular/* core packaged are pre-configured. @angular/material is not on the list.

2. On sourcemaps, there had been some issues w/ the ng CLI in the past. It could happen sourcemaps of a library were corrupt and then some of the webpack tools produced build errors. Error was in build of an app depending on a lib; not in library build.

For your concerns, sourcemaps could potentially break a user's build. Someone would need to find a repro.

[denver-HJS]

Just my two cents, but I've found ng-packagr to be a great tool for packaging/publishing reusable components.

The suggestion from @matt328 worked for me as well.

[mohyeid]

@matt328 I spent 2 days on this. This saved some other days I was going to waste. Thank you!

[drullo]

I'm having the same issue with @angular/material and the "externals" fix has not resolved it.

{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"ngPackage": {
"lib": {
"entryFile": "public_api.ts",
"externals": {
"@angular/material": "ng.material"
}
}
}
}

I'm getting:

BUILD ERROR ENOENT: no such file or directory, open '...\node_modules\@angular\packages\material\esm5\core\animation\animation.js.map' Error: ENOENT: no such file or directory, open '...\node_modules\@angular\packages\material\esm5\core\animation\animation.js.map'