bug: rollup inlines external dependency because import path was re-written #101

dherges · 2017-08-10T11:35:24Z

Type of Issue

Bug Report
Feature Request

Description

FESM bundles include inlined external dependencies.

How To Reproduce

The ng-package.json:

{
    "$schema": "../../node_modules/ng-packagr/lib/ng-package.schema.json",
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core"
        }
    }
}

The source code:

import { TranslateService } from '@ngx-translate/core';

export class MyLib {
  // do stuff with TranslateService
}

In the .ng_build directory, the generated .js file ends up with the following import:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core/index';

The import path from @ngx-translate/core in the source was re-written to @ngx-translate/core/index, thus the externals mapping does not match and rollup inlines the third-party dependency.

To confirm the cause, the following setting then produces a good FESM bundle!

{
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core",
            "@ngx-translate/core/index": "ngx-translate-core"
        }
    }
}

FESM Bundle:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core/index';

Expected Behaviour

Externals dependencies shouldn't be rewritten.

Usage of lib.externals in ng-package.json SHOULD BE the TypeScript import path from sources!
In above examples: @ngx-translate/core.

Version Information

ng-packagr: v1.0.0-pre.14
node: v8.1.1
@angular: v4.3.3
@ngx-translate/core: v7.1.0
rxjs: 5.4.2
zone.js: 0.8.16

The text was updated successfully, but these errors were encountered:

dherges · 2017-09-06T06:31:46Z

Cause explained in angular/angular#16084

Issue tracked by angular/tsickle#376

dherges · 2017-09-07T05:50:48Z

In Angular, there is one place where they set to false and one to true

tsc-wrapped sets it to false:
https://github.com/angular/angular/blob/6af2396cf75a6c6f691c7551b89440a217d9de93/packages/tsc-wrapped/src/main.ts#L68-L69

compiler-cli sets it to true:
https://github.com/angular/angular/blob/450a13dea03b5b3cd3b92c5a840a6536ec003f83/packages/compiler-cli/src/main.ts#L58-L64

dherges · 2017-09-07T05:53:12Z

See also angular/angular#16152 (back-dating to April...Oo)

avatsaev · 2017-09-19T11:47:30Z

Is it why I get the Field 'browser' doesn't contain a valid alias configuration errors all over the place?

Is there any work around?

dherges · 2017-09-19T12:28:55Z

@avatsaev Possibly yes. Possibly no. Angular CLI's error messaging can be quite verbosive w/o concrete indication of the cause. The above error message often raises when an import cannot be properly resolved.

avatsaev · 2017-09-19T12:42:42Z

Could you please help me out, I've been pulling my hair for 2 days, every time I install my custom built package from an archive or npm, I get this error when I build the host angular app with angular cli:


ERROR in ./node_modules/ngx-codemirror/ngx-codemirror/ngx-codemirror.es5.js
Module not found: Error: Can't resolve '../../lib/codemirror' in '/Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/ngx-codemirror'
resolve '../../lib/codemirror' in '/Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/ngx-codemirror'
  using description file: /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/package.json (relative path: ./ngx-codemirror)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/package.json (relative path: ./ngx-codemirror)
    using description file: /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/package.json (relative path: ./node_modules/lib/codemirror)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/lib/codemirror doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/lib/codemirror.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/lib/codemirror.js doesn't exist
      as directory
        /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/lib/codemirror doesn't exist

this is my ng-package.json:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "name": "ngx-codemirror",
    "entryFile": "src/app/lib/index.ts",
    "externals": {
      "codemirror/index": "codemirror"
    }
  }
}

My external dependency is codemirror and I use the typings from @types/codemirror

And when I package the lib without externals defined in ng-package.json i get these warnings:

'codemirror/index' is imported by .ng_build/ts/ngx-codemirror/directives/codemirror/codemirror.directive.js, but could not be resolved – treating it as an external dependency
'codemirror/index' is imported by .ng_build/ngx-codemirror/ngx-codemirror.es5.js, but could not be resolved – treating it as an external dependency
No name was provided for external module 'codemirror/index' in options.globals – guessing 'index'

dherges · 2017-09-19T13:09:32Z

Did you try the workaround as described above?

{
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core",
            "@ngx-translate/core/index": "ngx-translate-core"
        }
    }
}

avatsaev · 2017-09-19T13:13:50Z

isn't it what I did?

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "name": "ngx-codemirror",
    "entryFile": "src/app/lib/index.ts",
    "externals": {
      "codemirror/index": "codemirror"
    }
  }
}```

dherges · 2017-09-20T08:03:40Z

Did you add both? codemirror and codemirror/index?

If still not working, you could try to check the global token "codemirror" - which one do they use? Seems like they write "CodeMirror" ... is it case sensitive? see #119

If then still not working, you could try to upgrade to ng-packagr@1.2.0 since it has added rollup-plugin-commonjs support and that may (maybe?) solve your issue.

When you find the solution, please let us know so we can keep this as documentation on how to configure external libraries.

avatsaev · 2017-09-20T08:46:51Z

So I did add both as you suggested (with 1.2.0):
Here is the public repo: https://github.com/avatsaev/ngx-codemirror

"lib": {
    "name": "ngx-codemirror",
    "entryFile": "src/app/lib/index.ts",
    "externals": {
      "codemirror/index": "codemirror",
      "codemirror": "codemirror"
    }
  }

and got this error:


ERROR in ./node_modules/ngx-codemirror/ngx-codemirror/ngx-codemirror.es5.js
Module not found: Error: Can't resolve 'codemirror/index' in '/Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/ngx-codemirror'
resolve 'codemirror/index' in '/Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/ngx-codemirror'
  Parsed request is a module
  using description file: /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/package.json (relative path: ./ngx-codemirror)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/package.json (relative path: ./ngx-codemirror)
    resolve as module
      /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/ngx-codemirror/node_modules doesn't exist or is not a directory
      /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/ngx-codemirror/node_modules doesn't exist or is not a directory
      /Users/avatsaev/DEV/Angular/LIBS/ngx-codemirror/node_modules/node_modules doesn't exist or is not a directory
      /Users/avatsaev/DEV/Angular/LIBS/node_modules doesn't exist or is not a directory
      /Users/avatsaev/DEV/Angular/node_modules doesn't exist or is not a directory
      /Users/avatsaev/DEV/node_modules doesn't exist or is not a directory
      /Users/avatsaev/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

Thing is, it works without any problems when I run the project with ng serve

Ks89 · 2017-09-25T23:00:04Z

I have the same problem with Mousetrap

ronnyek · 2017-09-26T14:12:57Z

Same problems with @swimlane/ngx-datatable, which is unfortunate because soooo close to having converted my entire manual build process over to jsut ng-packagr + asset bundling

ferreirarod · 2017-09-29T13:26:59Z

Same problem with angular-calendar

dherges · 2017-10-03T12:37:50Z

Hi all, @avatsaev @ferreirarod @ronnyek @Ks89,

I wanted took a look at the ngx-codemirror error. I think it should be representative for what most of you are experiencing. This is what I got:

$ git checkout https://github.com/avatsaev/ngx-codemirror.git && cd ngx-codemirror
$ yarn install && yarn pkg
yarn install v1.1.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "license-webpack-plugin@1.0.2" has unmet peer dependency "webpack-sources@>= 1.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 381.03s.
yarn run v1.1.0
$ ng-packagr -p ng-package.json && cd dist && npm pack
Building Angular library from ng-package.json
Built Angular library from ~/github/ngx-codemirror, written to ~/github/ngx-codemirror/dist
ngx-codemirror-1.0.0.tgz
✨  Done in 43.61s.

This is a build success for the library.

What exactly is the build error? Can you provide repros?

avatsaev · 2017-10-03T12:41:50Z

It builds no problem, but try to use the resulting pkg in a host angular cli app, then compile the app in prod mode, you’ll get an error

dherges · 2017-10-03T12:42:09Z

Sorry. I stopped one step short:

$ cd dist && yarn link && cd ..
$ yarn link "ngx-codemirror"
$ yarn build
ERROR in ./dist/ngx-codemirror/ngx-codemirror.es5.js
Module not found: Error: Can't resolve 'codemirror/index' in '~/github/ngx-codemirror/dist/ngx-codemirror'
resolve 'codemirror/index' in '~/github/ngx-codemirror/dist/ngx-codemirror'
  Parsed request is a module
  using description file: ~github/ngx-codemirror/dist/package.json (relative path: ./ngx-codemirror)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: ~github/ngx-codemirror/dist/package.json (relative path: ./ngx-codemirror)
    resolve as module

dherges · 2017-10-03T12:56:21Z

Modified app.module.ts to try to find out why the import cannot be resolved.

//import {CodeMirrorModule} from 'ngx-codemirror';
import { fromTextArea } from 'codemirror/index';

It builds.

Then, I modified ngx-codemirror.es5.js by hand:

import { Directive, ElementRef, EventEmitter, Input, NgModule, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fromTextArea } from 'codemirror';
var CodeMirrorDirective = /** @class */ (function () {

and app.module.ts:

import {CodeMirrorModule} from 'ngx-codemirror';

And yarn build:

Time: 22340ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 636 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 20.4 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.33 MB [initial] [rendered]
✨  Done in 28.95s.

I see two possibilities:

either wait for tsickle#376 to be fixed
or try to get PR angular#19083 so good that it gets merged
beside that, I find it strange that one time ng build is fine when "import 'codemirror/index'" is in the app and it fails when the import is in the library ... very very strange ... it could also be an ng CLI issue. It's hard to tell because the "Field 'browser' doesn't contain a valid alias configuration" error message is so un-descriptive of the issue and it seems to happen quite often ...

avatsaev · 2017-10-03T13:56:36Z

"Field 'browser' doesn't contain a valid alias configuration" error message is so un-descriptive of the issue and it seems to happen quite often ..

very true, and there is a lot of these confusing build system err msgs.

sumigoma · 2017-10-03T16:49:31Z

I'm running into a similar situation with a library I'm trying to create with ng-packagr. The library builds fine, but when I try to npm link from a host angular-cli app, I get a similar error. The library is simple and has no peerDependencies besides @angular/core, @angular/common, rxjs and zone.js, but I get a Field 'browser' doesn't contain a valid alias configuration error as well, with it being unable to resolve any of the .d.ts files generated by the library.

Using angular 4.4.4, cli 1.4.4, ng-packagr 1.2.1, though I tried a bunch of different combinations to no avail.

sumigoma · 2017-10-03T16:56:43Z

@dherges The library produced by ng-packagr looks structurally similar to @angular's packages (the recommended angular package format), so what's the difference between what they're doing and what we're doing? I tried changing tsconfig in the library to have

"angularCompilerOptions": {
		"annotateForClosureCompiler": false

(which seems to be related to the issues above) but that didn't work either.

dherges · 2017-10-03T16:57:22Z

Hi @sumigoma,

please make sure that your issue IS or IS NOT the appended /index path.

If it's not, please check whether your issue is solved by #117 (or #132).

sumigoma · 2017-10-03T19:42:30Z

You're right, my issue actually looks more like #117. I did encounter the appended /index path problem at one point as well, but adding externals: to ng-package.json did the trick for that issue.

dherges · 2017-10-10T18:15:30Z

though not much ng-packagr can do about it, it's causing a lot of confusion and thus it's high prio

DavidParks8 · 2017-10-17T04:28:15Z

As of the release of angular 4.4.5, this should no longer be an issue due to this fix

avatsaev · 2017-10-17T11:44:22Z

Seems to be working with 4.4.5 on ngx-codemirror

dherges · 2017-10-18T13:33:55Z

Is this issue solved by angular/angular#19579 ?

I think it is.

If yes, this issue can be closed.

dherges · 2017-10-18T13:37:16Z

Should the dependency on @angular/tsc-wrapped be bumped to ^4.4.5 to work for it properly?

Ks89 · 2017-10-18T19:08:00Z

I confirm that now it's working also with Mousetrap. Well done and thank u.

DavidParks8 · 2017-10-18T22:57:57Z

Let's bump the dependency.

dherges · 2017-10-19T19:34:18Z

Closing this issue as it should be solved by the change in @angular/tsc-wrapped!

Should the same issue re-occur, please verify that you are using the latest version of tsc-wrapped. If then the issue still re-occurs, please let know in this thread!

github-actions · 2020-06-19T13:05:46Z

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.}

This was referenced Aug 10, 2017

Configuring lib.externals for third-party library #85

Closed

JavaScript heap out of memory (w/ @progress/kendo-*) #100

Closed

dherges added the bug label Aug 10, 2017

dherges mentioned this issue Sep 6, 2017

Import path of third-party library is rewritten from openlayers to openlayers/index #118

Closed

2 tasks

This was referenced Sep 21, 2017

[v1] Working with third-party dependencies #129

Closed

Support commonjs dependencies, e.g. class-transformer #62

Closed

dherges mentioned this issue Sep 28, 2017

bug: integration with rxjs 5.5.0-beta.0: import path gets appended with "/index" #133

Closed

1 task

flynetworks pushed a commit to HarmoWatch/ngx-redux-core that referenced this issue Oct 5, 2017

fixed redux/index bug ng-packagr/ng-packagr#101

660d8cf

dherges added the roadmap (high) label Oct 10, 2017

dherges mentioned this issue Oct 18, 2017

Unable to link an external library #187

Closed

2 tasks

avatsaev mentioned this issue Oct 19, 2017

Bump angular and ts version #200

Merged

dherges closed this as completed Oct 19, 2017

avatsaev mentioned this issue Oct 19, 2017

[RFC] Library Support and Boilerplate Comment Thread angular/angular-cli#6510

Closed

dherges mentioned this issue Oct 26, 2017

[NG] update dependency ng-packagr to ^1.5.0 vmware-archive/clarity#1608

Merged

dherges removed the roadmap (high) label Jan 10, 2018

github-actions bot locked and limited conversation to collaborators Jun 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: rollup inlines external dependency because import path was re-written #101

bug: rollup inlines external dependency because import path was re-written #101

dherges commented Aug 10, 2017 •

edited

dherges commented Sep 6, 2017

dherges commented Sep 7, 2017

dherges commented Sep 7, 2017

avatsaev commented Sep 19, 2017 •

edited

dherges commented Sep 19, 2017

avatsaev commented Sep 19, 2017 •

edited

dherges commented Sep 19, 2017

avatsaev commented Sep 19, 2017

dherges commented Sep 20, 2017

avatsaev commented Sep 20, 2017 •

edited

Ks89 commented Sep 25, 2017

ronnyek commented Sep 26, 2017

ferreirarod commented Sep 29, 2017

dherges commented Oct 3, 2017

avatsaev commented Oct 3, 2017

dherges commented Oct 3, 2017

dherges commented Oct 3, 2017 •

edited

avatsaev commented Oct 3, 2017

sumigoma commented Oct 3, 2017 •

edited

sumigoma commented Oct 3, 2017

dherges commented Oct 3, 2017

sumigoma commented Oct 3, 2017

dherges commented Oct 10, 2017

DavidParks8 commented Oct 17, 2017 •

edited

avatsaev commented Oct 17, 2017 •

edited

dherges commented Oct 18, 2017

dherges commented Oct 18, 2017

Ks89 commented Oct 18, 2017

DavidParks8 commented Oct 18, 2017

dherges commented Oct 19, 2017 •

edited

github-actions bot commented Jun 19, 2020

bug: rollup inlines external dependency because import path was re-written #101

bug: rollup inlines external dependency because import path was re-written #101

Comments

dherges commented Aug 10, 2017 • edited

Type of Issue

Description

How To Reproduce

Expected Behaviour

Version Information

dherges commented Sep 6, 2017

dherges commented Sep 7, 2017

dherges commented Sep 7, 2017

avatsaev commented Sep 19, 2017 • edited

dherges commented Sep 19, 2017

avatsaev commented Sep 19, 2017 • edited

dherges commented Sep 19, 2017

avatsaev commented Sep 19, 2017

dherges commented Sep 20, 2017

avatsaev commented Sep 20, 2017 • edited

Ks89 commented Sep 25, 2017

ronnyek commented Sep 26, 2017

ferreirarod commented Sep 29, 2017

dherges commented Oct 3, 2017

avatsaev commented Oct 3, 2017

dherges commented Oct 3, 2017

dherges commented Oct 3, 2017 • edited

avatsaev commented Oct 3, 2017

sumigoma commented Oct 3, 2017 • edited

sumigoma commented Oct 3, 2017

dherges commented Oct 3, 2017

sumigoma commented Oct 3, 2017

dherges commented Oct 10, 2017

DavidParks8 commented Oct 17, 2017 • edited

avatsaev commented Oct 17, 2017 • edited

dherges commented Oct 18, 2017

dherges commented Oct 18, 2017

Ks89 commented Oct 18, 2017

DavidParks8 commented Oct 18, 2017

dherges commented Oct 19, 2017 • edited

github-actions bot commented Jun 19, 2020

dherges commented Aug 10, 2017 •

edited

avatsaev commented Sep 19, 2017 •

edited

avatsaev commented Sep 19, 2017 •

edited

avatsaev commented Sep 20, 2017 •

edited

dherges commented Oct 3, 2017 •

edited

sumigoma commented Oct 3, 2017 •

edited

DavidParks8 commented Oct 17, 2017 •

edited

avatsaev commented Oct 17, 2017 •

edited

dherges commented Oct 19, 2017 •

edited