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

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 25 (17 by maintainers)

Most upvoted comments

@BenevidesLecontes — Thank you, really appreciate your help!

@kktam — Thank you for your follow-up 👍

jvandemo on Jul 22, 2017

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

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

jvandemo on Jul 21, 2017

@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…

BenevidesLecontes on Jul 21, 2017

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

BenevidesLecontes on Jul 21, 2017

@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'));
    }
  );
});

BenevidesLecontes on Jul 17, 2017

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.

BenevidesLecontes on Jul 13, 2017

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?

kktam on Jul 12, 2017

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

izifortune on Jul 3, 2017