Cannot build lib with 3rd party imports.

aharris commented 7 years ago

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

I'm submitting a ... [x] bug report [ ] feature request [x] question about the decisions made in the repository
What is the current behavior? Any third party plugin I attempt to import has this issue.

npm run lib:build

Starting '!build:rollup:umd'... [02:19:12] '!build:rollup:umd' errored after 53 ms [02:19:12] Error: 'find' is not exported by node_modules/lodash/index.js at error (/Users/aharris/Projects/Royal/excalibur/node_modules/rollup/src/utils/error.js:2:14)

What is the expected behavior?

Looking at your docs it seems as though I should be able to include these if i:

"Remember to define the inter-dependency graph for extensions and multi-library configuration and of course 3rd party dependencies."

I attempted this to no avail as I am not sure what it would need to map to.

I also tried using rollup-plugin-commonjs in build.ts to define named exports:

plugins: [ commonjs({ namedExports: { 'node_modules/angular2-text-mask/dist/angular2TextMask.js': ['TextMaskModule'] } }) ]

If this is not a bug can you please provide some direction on the intended way to include 3rd party libs?

Thanks you.

Please tell us about your environment:
Angular version: 4.2.3
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

shlomiassaf commented 7 years ago

In each package the you can add a file at the root of the package (next to src directory)

Filename should be build_hooks.ts or build_hooks.js

Additionally you can add this file in the project root, it will act as a global hook point for all packages.

The global runs before the local.

See the examples directory and the global build_hooks.ts in the root folder

shlomiassaf commented 7 years ago

PS:

Adding the commonjs plugin is the complete opposite of mapping an external (3rd party) package.

Adding commonjs will actually bundle it within .

aharris commented 7 years ago

@shlomiassaf Thank you so much for the quick reply. I was able to resolve by adding these globals object in my projects local build_hooks.js.

For anyone that comes across this here is my full file for clarity: src/{your-project/build_hooks.js

const globals = {
  'node_modules/angular2-text-mask/dist/angular2TextMask.js': 'src/rcl-excalibur/node_modules/angular2-text-mask/dist/angular2TextMask.js',
  'node_modules/lodash/index.js': 'src/rcl-excalibur/node_modules/lodash/index.js'
};

]module.exports.packageJSON = function(pkgJson) { };

module.exports.jestConfig = function(jestConfig) { };

module.exports.tsconfig = function tsconfig(config) {}

module.exports.rollupFESM = function(rollupConfig) {
  config.globals = Object.assign(config.globals || {}, globals);
};

module.exports.rollupUMD = function(rollupConfig) { };

Thanks again. This lib started is very helpful.

ronnyek commented 7 years ago

I hate to comment on an old closed issue, but I've got some questions about this... I've also got a need to depend on another library. I've installed installed via npm install @swimlane/ngx-datatable --save. In my demo project, replicated the above (src/my-lib/build_hooks.js).

Project builds successfully before and after that change, but when npm build:build:sim, I get errors stating...

Starting compilation using the angular compiler.
Angular compilation done, starting webpack bundling.
 10% building modules 0/2 modules 2 active ...starter\src\demo\polyfills.browser.ts
[at-loader] Using typescript@2.5.3 from typescript and "tsconfig.json" from C:\source\angular-library-starter\.tsconfig.webpack.sim.json.
                                                                                                                                                                                      36% building modules 222/319 modules 97 active ...datatable\release\directives\ind
ex.jsModuleNotFoundError: Module not found: Error: Can't resolve '@swimlane/ngx-datatable/index' in 'C:\source\angular-library-starter\dist_package\my-lib\bundle'

I'm not trying to roll ngx-datatable into my library but rather treat it as a peer dependency. I'm unsure where I've gone wrong. Tweaking config like above is just applying externals to rollup config, no? I've had to do that elsewhere in other attempts to make library development more pleasant and that worked, but adding '@swimlane/ngx-datatable': '@swimlane/ngx-datatable' to globals appears to do nothing.

(I also tried setting rollupConfig.globals = Object.assign(rollupConfig.globals || {}, globals); which did not seem to remedy the situation)

also: It doesn't seem like I actually have problem building the library itself, but rather just consuming the built library?

I also tried to npm run lib:start:sim and same drama. I suspect I'm not registering that this is an "externally linked library" correctly... so while the library builds, the consumers expect to find those libraries within my package or something...

update: I've noticed if I take that es5.js bundle and just go manipulate the file itself, delete the /index, the library loads and the app displays components with the wrapped dependent components. Something is re-writing path of ngx data table from @swimlane/ngx-datatable to @swimlane/ngx-datatable/index

shlomiassaf / angular-library-starter

Cannot build lib with 3rd party imports. #3