problem using generator-angular2-library to import non-Angular dependencies (FullCalendar.io)

[kktam]

I have used generator-angular2-library to create a component to wrap and use FullCalendar http://fullcalender.io for Angular 4 projects, but found I cannot include and package the FullCalendar libraries properly within the generator-angular2-library generated component. The end result is that using in final application (like the one created from angular-cli), the component within the app cannot load reference to FullCalendar.io.

I have created 2 demos, one is the component itself created by generator-angular2-library, fullcalendar-ag4 https://github.com/kktam/fullcalendar-ag4. This is published in npm https://www.npmjs.com/package/fullcalendar-ag4.

The demo applicaton that consumes fullcalendar-ag4, is fullcalendar-app-ag4, https://github.com/kktam/fullcalendar-app-ag4.

Aftering installing and runnning

npm i
ng serve

Then the following error occurs during ng serve.

$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: fdfb486dd1a1fc9bf051                                                              
Time: 33871ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.41 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/fullcalendar-ag4/index.js
Module not found: Error: Can't resolve 'fullcalendar/index' in '/Users/user/Documents/Work/angular2/fullcalendar-app-ag4/node_modules/fullcalendar-ag4'
 @ ./~/fullcalendar-ag4/index.js 5:0-28
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I have checked another example https://github.com/lbertenasco/ap-ng2-fullcalendar that uses hand crafted bundling method, and it fullcalendar is packaged correctly. Your help is most appreciated.

[izifortune]

Hi @kktam have a look here https://github.com/angular/angular/issues/16084 can you try to set annotateForClosureCompiler to false?

[kktam]

I does not seemed to be related (I do not have this flag in my tsconfig.json at first). I put it on and try enable and disable and does not make a difference.

[kktam]

I attempt to try to see if modifying the gulp step and bundle jquery and fullcalendar directly into umd build would help. I need some help to work on the gulp task. I have part of the work in gulp branch https://github.com/kktam/fullcalendar-ag4/tree/gulp. Help is most welcome.

[jvandemo]

@kktam — Do you have fullcalendar listed as peer dependency in your library's package.json?

[kktam]

By check here https://github.com/kktam/fullcalendar-app-ag4/blob/master/package.json I believed I missed that. I will add that and retest.

[kktam]

Question. I added FullCalendar in the generated library package here https://github.com/kktam/fullcalendar-ag4/blob/fullcalendar-ag4/package.json.

The dependencies are

 "dependencies": {
    "@types/fullcalendar": "^2.7.44",
    "@types/jquery": "3.2.5",
    "fullcalendar": "^3.4.0",
    "jquery": "^3.2.1"
}

Will this already work?

[BenevidesLecontes]

I'm having this issue as well. I have in my module import {BsDropdownModule} from 'ngx-bootstrap'; but in my index.js i have import { BsDropdownModule } from 'ngx-bootstrap/index';. Throwing the error Module not found: Error: Can't resolve 'ngx-bootstrap/index'; If i edit the generated index.js, removing these /index from the imports it's working fine with cli.

[adjioev]

@BenevidesLecontes have the same problem with openlayers library. Banging my head for three hours, still, can't find the solution.

[BenevidesLecontes]

@adjioev we did it with simple gulp task, but it is temporary until this generator fix it.

gulp.task('rollup:fix:replace', function () {
  gulp.src(['dist/index.js', 'dist/wiseit-ui.umd.js'])
    .pipe(replace('ng-selectize/index', 'ng-selectize'))
    .pipe(replace('ngx-ngSelectize_index', 'ngSelectize'))
    .pipe(replace('ngx-bootstrap/index', 'ngx-bootstrap'))
    .pipe(replace('ngxBootstrap_index', 'ngxBootstrap'))
    .pipe(replace('ng2-daterangepicker/index', 'ng2-daterangepicker'))
    .pipe(replace('ng2-daterangepicker/index', 'ng2-daterangepicker'))
    .pipe(replace('ng2Daterangepicker_index', 'ng2Daterangepicker'))
    .pipe(gulp.dest('dist'));

});

gulp.task('rollup:fix', function () {
  runSequence(
    'rollup:fix:replace',
    function() {
      gulp.src("dist/.replace/*")
        .pipe(gulp.dest('dist'));
    }
  );
});

[adjioev]

@BenevidesLecontes, are you trying to include closure library?

If yes try to edit /src/tsconfig.ts5.json and set "annotateForClosureCompiler" to false.

[kktam]

@adjioev can you try to fork my test library and see if that work?

[kktam]

@BenevidesLecontes I am a bit new to gulp. Can you fork both my project https://github.com/kktam/fullcalendar-ag4 and https://github.com/kktam/fullcalendar-app-ag4 with a commit to show me how to apply your changes? many thanks.

In the meantime, I will try to patch my project using your approach.

[BenevidesLecontes]

@kktam Hi, i did a pull request with some changes and now it's working fine. I tested with your app.

[kktam]

@BenevidesLecontes Thanks for the pull request. I am testing it on my demo app, but I think I am missing something on app code and webpack build failed with a different problem now.

Can you show me how you setup your demo app (if it is ok to ask if you can fork my demo app as well).

Demo app https://github.com/kktam/fullcalendar-app-ag4

Error

npm run start

> fullcalendar-app-ag4@0.0.0 start /Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4
> ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 5fc714906c60e021f348                                                               
Time: 16735ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 8.22 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.34 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in /Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4/src/app/app.module.ts (5,32): Cannot find module 'fullcalendar-ag4'.

ERROR in Error encountered resolving symbol values statically. Could not resolve fullcalendar-ag4 relative to /Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4/src/app/app.module.ts., resolving symbol AppModule in /Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4/src/app/app.module.ts, resolving symbol AppModule in /Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4/src/app/app.module.ts

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'fullcalendar-ag4' in '/Users/xyz/Documents/Work/angular2/fullcalendar-app-ag4/src/app'
 @ ./src/app/app.module.ts 10:0-50
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

[BenevidesLecontes]

@kktam you doing wrong look at https://gist.github.com/BenevidesLecontes/b54cbfa8e83cb17fdcd99f8b8f9ebca4

And you need to publish the dist folder only, not all the package. Look the pull request that i made on the app repo...

[jvandemo]

@BenevidesLecontes — Thank you for your help, much appreciated! 👍

@kktam — Can you let us know if you got it working? Thanks!

[kktam]

@BenevidesLecontes first problem solved. Now I got the same result as in your screenshot. Thanks very much!

@BenevidesLecontes second question. FullCalendar comes with its own set of .css. It appeared the css never got built into the webpack, so that when the final host app import npm library it does not contain the non angular library css as well. I am not sure if there is a solution for this, or just the developer must always look and import all underlying dependencies css inside the final application in the index.html. (a bit undesirable).

@BenevidesLecontes another quick question. Since you fixed my issue with annotateForClosureCompiler. So under what situation do we need to apply your patch with gulp tasks ('rollup:fix')?

[kktam]

@jvandemo @BenevidesLecontes based on the readme.md help for importing css using scss...

... use a tilde to import a file from the nearest parent node_modules directory:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

I have created a scss import file, but it does not work right now. Is the scss feature intended for this type of purpose (to import dependent library css into npm project so users don't need to add them separately in each application setup).

I have checked in the test changes here: https://github.com/kktam/fullcalendar-ag4/commit/dedc2d87fcf852e7cbd7a694d9eecf293d9ec353

the error message is

Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1689)
    at compiler.es5.js:15373
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15356)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26679)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26652)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26581)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4595)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4581)
    at Object.../../../../../src/main.ts (main.ts:11)

[BenevidesLecontes]

@kktam i'll try to make the css import work for you and you don't need to apply the patch in the gulp file. I think you may close this issue since the main problem is fixed.

Check your branches, it has the PR, for styles.

[kktam]

@BenevidesLecontes Thanks very much.

[jvandemo]

@BenevidesLecontes — Thank you, really appreciate your help!

@kktam — Thank you for your follow-up 👍

[kktam]

@jvandemo @BenevidesLecontes Thanks very much for all your help. It turns out amongst many users errors, I did not synchronize peer dependencies in src/package.json and match exactly with /package.json and caused problems in the umd file. It would be a nice feature if the generator library can transform the package.json contents and render src/package.json automatically. Cheers

[kktam]

@jvandemo You may consider using project https://github.com/kktam/fullcalendar-ag4 and https://github.com/kktam/fullcalendar-app-ag4 to demo the use case on how to build npm components using generator-angular2-component referencing non-angular peer dependencies.

[jvandemo]

@kktam, @BenevidesLecontes — Would you be interested in writing out a guide on how to do that?

I would be happy to add the guide to the documentation and WIKI page so others can benefit from your learnings.

Thanks in advance!

[jvandemo]

Quick update: I added an FAQ to the README: https://github.com/jvandemo/generator-angular2-library#what-if-my-library-depends-on-a-third-party-library.