Problem to import module

[raphdom]

I install the od-virtualscroll using:

yarn add od-virtualscroll

But when I try to import the module on my own module doesn't find it:

import {VirtualScrollModule} from 'od-virtualscroll';

"Cannot find module od-virtualscroll'

I have my code using angular-cli and angular4

Can anyone help me, certainly I'm doing something wrong

[dhormale]

Getting same error on
npm i -S od-virtualscroll OR npm install od-virtualscroll --save

FYI...

npm install od-virtualscroll --save
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]

[dinony]

I had a problem with ngc upgrading from 4.1 to 4.2 - in summary: the ngc's output differed from 4.1, so the build was broken. I'm pretty sure this is related to this issue. I hope to get some spare hours to look into this again this week.

[ronzeidman]

look into https://github.com/dherges/ng-packagr

[dinony]

Thanks a lot! Will check it this week.

[JBorgia]

Running into the same problem here. Haven't yet had a chance to try it, but definitely enthused to see it in action. Thanks ahead of time, Dinony!

[dinony]

Issue / Observation

I'm using the recommended angularCompilerOptions (see tsconfig.json)
with the flatModuleOutFile option to create a fesm.

• ngc v4.1.3 does output a fesm file
• ngc >=4.2 does not output a fesm file

Quickfix

As a quick fix to this issue, I've published v1.0.1 of the lib with compilation relying on v4.1.3 of ngc. For the lib, the peer dependencies are set to >=4.

I've tried to use the lib with the latest Angular version (currently 4.3.5) and it worked. As a proof, I've updated od-vsstatic to Angular 4.3.5 and will also update all the other demos.

Help

Unfortunately, I could not find good documentation on ngc and for me it is currently just a beautiful time sink to find out what the actual problem is - therefore the quickfix with 4.1.3. Furthermore, there seem to be regressions in ngc >= 4.2.

In the long term, I obviously want to upgrade to the newest ngc version.

ngc

If somebody has a clue what's going on in ngc >= 4.2 and why the output differs, I'm very thankfull for hints.

Test

I'm also very thankful if somebody tests the new release with the newest Angular version, both using npm and yarn, as extra confirmation.

Thanks!

[ronzeidman]

Works for me (AOT, angular 4.3.5, npm 5.3.0, node 8.4.0)

[dinony]

Thanks! Haven't heard from the others, yet. I assume it is silently working - so closing this issue for now.

[JBorgia]

Working here as well

[dhormale]

Worked for me...
angular/compiler: ^4.0.1
angular/cli: 1.2.7
node: v6.11.2
npm: 3.10.10

[raphdom]

Worked for me as well, thanks a lot.

[kenisteward]

@dinony I recently came into this issue and resolve it with something very silly. It seems for the main/module/es2015/typings fields in package.json for compiler over 4.2 you need to give the full relative path e.g.

Your Package.json

  "main": "dist/bundles/od-virtualscroll.umd.js",
  "typings": "dist/fesm15/od-virtualscroll.d.ts",
  "module": "dist/fesm5/od-virtualscroll.js",
  "es2015": "dist/fesm15/od-virtualscroll.js"

becomes

  "main": "./dist/bundles/od-virtualscroll.umd.js",
  "typings": "./dist/fesm15/od-virtualscroll.d.ts",
  "module": "./dist/fesm5/od-virtualscroll.js",
  "es2015": "./dist/fesm15/od-virtualscroll.js",

I know this might seem odd but i made these changes and i was able to use FESM's in another internal project with my library being set that way. If you want I can try it with your library or you can do it and let me know if it worked.

As an added note. The typescript team prefers "types" over "typings" but they do the same thing I believe. I just don't know if it will be deprecated or is already.

[dinony]

@kenisteward AH strange! Thanks a lot, will give it a try this week.. hope it will work!

Yep, "types" seems to be the preferred/default property. In the Module Resolution section of the TS docs they use types. In the Angular Package Format 4.0 spec "typings" is used.
I think I will switch to "types".

[dinony]

@kenisteward I think I misunderstood what you were saying. You had problems consuming this lib and fixed it by changing it's package.json file by specifying the relative paths as stated? If so, I don't think that this is related to the initial issue here.

The problem here was (afaik) that ngc >= 4.2 did not produce a fesm, like ngc 4.1 did before, in this project setup. So, my initial reaction was to limit this package to Angular peer dependecies >=4.1<4.2, which, of course, let to the issues described initially. Then I noticed that the compiler output of ngc 4.1 can be used in Angular projects >=4.1 - which led to the quickfix described above.

Does somebody know, is there any specification of ngc or @angular/compiler-cli, where we could learn about the compatibility of the compiler output or about possible breaking changes due to recompilation? Last night I experimented with the latest Angular version (4.4.6) and ngc produced the correct outputs as expected. I would like to make a new release with the new compiler, but I would like to learn more about the compatibility.
E.g. When I compile the lib with v4.4.6, will it be usable in projects <4.4.6?
This needs quite some black-box testing to get some certainty :/

[kenisteward]

@dinony I didn't try to consume this library. I've created on my own library and was having the same issues you were. I fixed my issues by adding those changes and thought that might help your issues with compiler >=4.2. I'm compiling mine with compiler 4.4.6 and consuming it with an Angular 4.1.3 app and I'm having no troubles.

As far as I could tell the only difference was changing that path in the package.json so consuming the app properly finds the files it is looking from.