Ngx-infinite-scroll: AOT building fails: Module not found: Error: Can't resolve 'ngx-infinite-scroll/index'

Created on 18 May 2017 · 34Comments · Source: orizens/ngx-infinite-scroll

This is the building command:

ng build --environment=demos --aot --progress --verbose

and this is the error output:

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts Module not found: Error: Can't resolve 'ngx-infinite-scroll/index' in '/home/user/Git/project/Application/frontend/src/$$_gendir/app' @ ./src/$$_gendir/app/app.module.ngfactory.ts 16:0-53 @ ./src/main.ts @ multi ./src/main.ts

The code compiles correctly with tsc

Installed version: ngx-infinite-scroll@0.5.1

invalid

Source

developxible

Most helpful comment

@orizens This pr should solve the problem without look for different configurations for who are using Rollup: https://github.com/orizens/ngx-infinite-scroll/pull/187

Greetings,
Roberto

robisim74 on 12 Sep 2017

👍2 🎉1

All 34 comments

hi @cronosxfiles
I'm using successfully with AOT compilation in http://github.com/orizens/echoes-player

orizens on 21 May 2017

Hi @orizens,
Thanks for attending. Are you using the same version for this component? Using @angular-cli too for compilation? I've been forced to go back to angular2-infinite-scroll to be able to compile it.
Today I've tried again with no luck. Guess there's no new version published after only a week. I'm using webpack version 2.2.1. This is my current package.json file:

...
"dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angular2-notifications": "^0.4.53",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-toggle": "^2.2.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "moment": "^2.18.1",
    "ng2-recaptcha": "^1.7.0",
    "ngx-bootstrap": "^1.6.6",
    "ngx-infinite-scroll": "^0.5.1",
    "roboto-fontface": "^0.7.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "angular-animate": "^1.6.4",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
...

developxible on 24 May 2017

@orizens, I've reviewed your project's package.json file and you're using @angular packages for version ^4.0.0 and my project is around versions ^2.4.0. Might this be a key difference? Which is the minimum Angular2 version for using ngx-infinite-scroll instead of angular2-infinite-scroll? Thanks.

developxible on 24 May 2017

hi.
it might be the reason.

orizens on 25 May 2017

This IS the reason. Major jumps in versions, like that, is bound to cause issues.

I'd advice towards updating to 4.x @cronosxfiles.

larssn on 13 Jun 2017

👎1 👍1

closing this - as this occurs because of versions difference.

orizens on 7 Sep 2017

This doesn't work with angular 4.3.6 for the above stated reason. The error is:
Module not found: Error: Can't resolve 'ngx-infinite-scroll/index' in ...
What a pity. I'll have to use the deprecated version which builds with Angular 4.3.6.
I am using this in a library that gets imported into my app.

broweratcognitecdotcom on 11 Sep 2017

👍1

This issue should be reopened. This module does not currently compile if it is included as a dependency in a library being bundled with rollup.

I understand @orizens that you're compiling with aot with webpack but there is still something wrong here.

jcroll on 11 Sep 2017

hi @jcroll
can share a repo with the problem?

orizens on 11 Sep 2017

Hi @orizens I can but for now I am diving deeper into the problem. I believe it's because you only expose a index.d.ts file which does not seem to be looked for during module resolution after rollup bundles the library.

If you could include a index.js or index.ts file in your dist I bet all this would go away!

jcroll on 11 Sep 2017

See below:
```
Module not found: Error: Can't resolve 'ngx-infinite-scroll/index' in
...
frontend_1 | [/usr/share/frontend/node_modules/node_modules]
frontend_1 | [/usr/share/node_modules]
frontend_1 | [/usr/node_modules]
frontend_1 | [/node_modules]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index.ts]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index.js]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index.ts]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index.js]
frontend_1 | [/usr/share/frontend/node_modules/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index.ts]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index.js]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index.ts]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index.js]
frontend_1 | [/usr/share/frontend/src/ngx-infinite-scroll/index]

jcroll on 11 Sep 2017

hi @jcroll
This needs further investigation.
I'm using https://github.com/robisim74/angular-library-starter, so i assume the rollup.config might be a good place to start with.

orizens on 12 Sep 2017

@robisim74
can you assist on this one? is there any way for including index.js in the final build?

orizens on 12 Sep 2017

@orizens I'll give it a look, and let you know.

robisim74 on 12 Sep 2017

I can't recreate the problem without a repro, because they said that they are using this library as a dependency of another library.

However: including _index.js_ is useless, because the library provides for building using ES2015 the ./modules/ngx-infinite-scroll.js file. So if they are using Rollup for building, they should use something like this:

    nodeResolve({
      es2015: true,
      module: false,
    }),

because the old index.js is included in _"es2015"_ property inside the package.json, exaclty as the official Angular packages.
Another reason could be that the nested libraries are using different versions of Angular.

robisim74 on 12 Sep 2017

@orizens If you decide to deploy the library with the old _index.js_ file as during Angular 2, that's enough that you remove these lines from the building process: https://github.com/orizens/ngx-infinite-scroll/blob/master/build.js#L54-L57 But as I said, it is not necessary.

robisim74 on 12 Sep 2017

Ok (and forgive me if I'm wrong as I'm just learning rollup) but here you are suggesting compiling this library's code with my library's code. So instead of including ngx-infinite-scroll as a peer dependency of my library it now comes bundled with my library.

Which I don't in theory have a problem with but my library has many dependencies and if I turn this on from what I can tell (and again please inform me if I am wrong here) I have to bundle every dependency my library has which becomes quite problematic.

jcroll on 12 Sep 2017

For the record I am using the starter pack https://github.com/jvandemo/generator-angular2-library
and it appears working quite nicely.

It might be easier just to see if your library compiles with it. I might fork and give it a try myself.

jcroll on 12 Sep 2017

No, I'm not suggesting that. It's correct to keep it as a peer dependency. But by default, Rollup tries to use _index.js_, and not the "es2015" file.

robisim74 on 12 Sep 2017

See here in rollup.js docs

The resulting bundle.js will still work in Node.js, because the import declaration gets turned into a CommonJS require statement, but the-answer does not get included in the bundle. For that, we need a plugin.

rollup-plugin-node-resolve

The rollup-plugin-node-resolve plugin teaches Rollup how to find external modules. Install it...

npm install --save-dev rollup-plugin-node-resolve
...and add it to your config file:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';

export default {
input: 'src/main.js',
output: {
file: 'bundle.js'
format: 'cjs'
},
plugins: [ resolve() ]
};
This time, when you npm run build, no warning is emitted — the bundle contains the imported module.

To me it implies including nodeResolve will bundle the library.

jcroll on 12 Sep 2017

In another situation, I used _resolve()_ and then I added the dependency in the globals and external properties: so the dependency was not included in the bundle.

But this is just one example: the point is that the problem is not in this library: the problem is in working with libraries that have other libraries as dependencies.

robisim74 on 12 Sep 2017

Here is my rollup config:

  // Bundle's entry point
  // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
  entry: `${buildFolder}/index.js`,

  // Allow mixing of hypothetical and actual files. "Actual" files can be files
  // accessed by Rollup or produced by plugins further down the chain.
  // This prevents errors like: 'path/file' does not exist in the hypothetical file system
  // when subdirectories are used in the `src` directory.
  allowRealFiles: true,

  // A list of IDs of modules that should remain external to the bundle
  // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
  external: [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/compiler-cli',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/platform-server',
    '@angular/router',
    '@ng-bootstrap/ng-bootstrap',
    '@ngrx/core',
    '@ngrx/effects',
    '@ngrx/store',
    '@ngrx/store-devtools',
    '@types/lodash',
    '@types/numeral',
    'angular2-jwt',
    'angular2-ui-switch',
    'bootstrap',
    'chart.js',
    'core-js',
    'deep-diff',
    'font-awesome',
    'glyphicons-halflings',
    'lodash',
    'md5',
    'moment',
    'ng2-charts',
    'ng2-nouislider',
    'ng2-table',
    'ngx-infinite-scroll',
    'nouislider',
    'numeral',
    'rxjs',
    'ts-helpers',
    'typescript',
    'web-animations-js',
    'zone.js',
  ],

  // Format of generated bundle
  // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
  format: 'es',

  plugins: [
    resolve({
      jsnext: true,
      module: false,
    }),
    commonjs({
      include: [
        'node_modules/ngx-infinite-scroll/**',
      ],
      exclude: [
        'node_modules/@angular/animations/**',
        'node_modules/@angular/common/**',
        'node_modules/@angular/compiler/**',
        'node_modules/@angular/compiler-cli/**',
        'node_modules/@angular/core/**',
        'node_modules/@angular/forms/**',
        'node_modules/@angular/http/**',
        'node_modules/@angular/platform-browser/**',
        'node_modules/@angular/platform-browser-dynamic/**',
        'node_modules/@angular/platform-server/**',
        'node_modules/@angular/router/**',
        'node_modules/@ng-bootstrap/ng-bootstrap/**',
        'node_modules/@ngrx/core/**',
        'node_modules/@ngrx/effects/**',
        'node_modules/@ngrx/store/**',
        'node_modules/@ngrx/store-devtools/**',
        'node_modules/@types/lodash/**',
        'node_modules/@types/numeral/**',
        'node_modules/angular2-jwt/**',
        'node_modules/angular2-ui-switch/**',
        'node_modules/bootstrap/**',
        'node_modules/chart.js/**',
        'node_modules/core-js/**',
        'node_modules/deep-diff/**',
        'node_modules/font-awesome/**',
        'node_modules/glyphicons-halflings/**',
        'node_modules/lodash/**',
        'node_modules/md5/**',
        'node_modules/moment/**',
        'node_modules/ng2-charts/**',
        'node_modules/ng2-nouislider/**',
        'node_modules/ng2-table/**',
        // 'ngx-infinite-scroll',
        'node_modules/nouislider/**',
        'node_modules/numeral/**',
        'node_modules/rxjs/**',
        'node_modules/ts-helpers/**',
        'node_modules/typescript/**',
        'node_modules/web-animations-js/**',
        'node_modules/zone.js/**',
      ],
    }),
  ]

When I attempt to compile I get:

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: 'BehaviorSubject' is not exported by node_modules/rxjs/BehaviorSubject.js

I have tried to exclude rxjs twice in the above config. Any idea what I am missing?

Additionally you can get an idea from the above how many libraries I've gotten to compile. It is just this one not working :(

jcroll on 12 Sep 2017

Are you using _generator-angular2-library_? Later I'll try to understand what's happening here.

robisim74 on 12 Sep 2017

Yes, I am using that.

That config is actually located in gulpfile.js which uses gulp-rollup but for all intents and purposes it's the same that would be found in rollup.config.js.

jcroll on 12 Sep 2017

And as to your point above:

the point is that the problem is not in this library: the problem is in working with libraries that have other libraries as dependencies.

Yes. This library compiles fine into a binary using angular cli. But yeah, if being included as part of a library it does not seem to work. Up to you how important this is to you but perhaps hints at more compatibility issues down the line. I would try that starter pack, quite comprehensive!

jcroll on 12 Sep 2017

I'm trying this configuration (adding _/index_ to the external property):

gulp.task('rollup:fesm', function () {
  return gulp.src(`${buildFolder}/**/*.js`)
  // transform the files here.
    .pipe(rollup({

      // Bundle's entry point
      // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
      entry: `${buildFolder}/index.js`,

      // Allow mixing of hypothetical and actual files. "Actual" files can be files
      // accessed by Rollup or produced by plugins further down the chain.
      // This prevents errors like: 'path/file' does not exist in the hypothetical file system
      // when subdirectories are used in the `src` directory.
      allowRealFiles: true,

      // A list of IDs of modules that should remain external to the bundle
      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
      external: [
        '@angular/core',
        '@angular/common',
        'ngx-infinite-scroll/index'
      ],

      // Format of generated bundle
      // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
      format: 'es'
    }))
    .pipe(gulp.dest(distFolder));
});

and it seems compile without problems:

Try it, and let me know if this solution works also in your library.

robisim74 on 12 Sep 2017

@orizens The problem here is that we are using to export the APIs a file called _index_ instead of _name-of-library_: so Rollup tries to find _'ngx-infinite-scroll/index'_, but this should not happen. I'll try to update my repo, and if it works I'll do a pr also to this library.

robisim74 on 12 Sep 2017

Yes @robisim74 your config is basically what I had when I first commented in this thread. My library compiled but when pulled into my angular-cli application as a npm dependency webpack does not compile with an error like so:

Module not found: Error: Can't resolve 'ngx-infinite-scroll/index' in '/usr/share/frontend/node_modules/straticsdev-frontend-base/dist'
frontend_1  | resolve 'ngx-infinite-scroll/index' in '/usr/share/frontend/node_modules/straticsdev-frontend-base/dist'
frontend_1  |   Parsed request is a module

jcroll on 12 Sep 2017

Get it. I'll fix the problem into my repo, and I'll do a pr to this library.

robisim74 on 12 Sep 2017

👍1

@jcroll Are you still there? Could you try this quick fix?

Go to _node_modules/ngx-infinite-scroll_ and rename:

index.d.ts -> ngx-infinite-scroll.d.ts
index.metadata.json -> ngx-infinite-scroll.metadata.json
in package.json: "typings": "./ngx-infinite-scroll.d.ts"

and:

external: [
        '@angular/core',
        '@angular/common',
        'ngx-infinite-scroll'
      ],

Let me know (so you can work in the meantime).

robisim74 on 12 Sep 2017

👍1

Yeah @robisim74 that appears to work!!

jcroll on 12 Sep 2017

Hi robisim74,

where can i find
external: [
'@angular/core',
'@angular/common',
'ngx-infinite-scroll'
],

Thanks you

pagelinsan on 12 Sep 2017

In your rollup.config.json @pagelinsan

jcroll on 12 Sep 2017

@orizens This pr should solve the problem without look for different configurations for who are using Rollup: https://github.com/orizens/ngx-infinite-scroll/pull/187

Greetings,
Roberto

robisim74 on 12 Sep 2017

👍2 🎉1

Was this page helpful?

0 / 5 - 0 ratings