Modules Not Found in Angular CLI Application

[patrimart]

Within an Angular/CLI application (in VS Code), ES imports cannot resolve the modules. For example, these imports fail...

import { IterableX as Iterable } from 'ix/iterable';
import 'ix/add/iterable/of';
import 'ix/add/iterable-operators/map';
import { map } from 'ix/iterable/map';
import { filter } from 'ix/iterable/filter';

However, this import does work...

import * as Ix from 'ix';

That, sadly, does not give me access to 'ix/iterable' functions.

[trxcllnt]

@patrimart ah yes, we should add a section to the readme about aliasing ix via your tsconfig.json "paths" entry (probably easier once we do #27).

I think you should be able to add this to your tsconfig.json:

{
  /* ... */
  "baseUrl": ".", // This must be specified if "paths" is.
  "paths": {
    "ix/*": ["node_modules/ix/targets/es5/cjs"]
  }
}

I'll test this out later tonight and update this ticket with what I find. Thanks!

[patrimart]

That suggestion didn't work for me. I tried every path combo I could think of.

I'd like this to work without resorting to ng eject. Ix will nicely compliment RxJS, so I'm anxious to get at it!

[patrimart]

A workaround that is letting me develop with IxJS is as follows...

In root of project, git clone https://github.com/ReactiveX/IxJS.git

Add this to tsconfig.json:

{
  /* ... */
  "baseUrl": "src",
  "lib": ["esnext", "dom"],
  "paths": {
    "ix/*": ["../IxJS/src/*"]
  }

Perhaps including the src directory in the npm package would allow for more config flexibility.

[trxcllnt]

@patrimart ah, thanks for the suggestion. I'll try this out locally and work out any impact it has on the build.

[trxcllnt]

@patrimart update: I can get it working fine for normal TS projects via a "paths" entry, but not within angular-cli (v1.3.1). It looks like we might be running into angular/angular-cli#7341 here.

In the meantime, I'm going to investigate the right way to publish the TS source (be that as @reactivex/ix-ts, or including the src folder in the main ix package).

[trxcllnt]

@patrimart good news! as of @angular/[email protected], I'm able to get Ix aliased via paths entry in tsconfig. I'll add this to the readme, but here's everything you need to add to your top-level tsconfig to get it working (assuming the @reactivex/ix-ts module is installed):

{
  "compilerOptions": {
    "importHelpers": true, /* <-- optional but recommended */
    "noEmitHelpers": true, /* <-- optional but recommended */
    "downlevelIteration": true,
    "paths": {
      "ix/*": ["../node_modules/@reactivex/ix-ts/*"]
    },
    "lib": [
      "esnext.asynciterable" /* <-- in addition to any other "lib" entries you have */
    ]
  }
}

[trxcllnt]

@patrimart can you validate this works for you, so I can close the issue?

[patrimart]

I definitely will this evening, if you can wait.

[patrimart]

I finally tested this. For the given issue, this solves the problem.

However, there are a couple of side-effects.

1. Using the "paths" solution in an external module causes the importing app's compilation to fail because it's looking for "ix/..." from the external modules imports (which is not installed) instead of "@reactivex/ix-ts/...".
2. This may be a config issue on my end, but when compiling with ngc, I was seeing this error: Error: ENOENT: no such file or directory, open '/.../node_modules/@reactivex/ix-ts/iterable.metadata.json'

I found a workaround for #2 by adding the following to my tsconfig.ngc.json (which causes ngc to compile the @reactivex/ix-ts and generate the metadata files):

"paths": {
    "@reactivex/ix-ts/*": ["../node_modules/@reactivex/ix-ts/*"]
}

[trxcllnt]

So this issue is a bit tricky. Off the top of my head, we have a few options here:

1. Restructure our source code so it's in the root folder (not in src) and go about our business
2. Change the docs to say import { map } from '@reactivex/ix-ts/add/iterable-operators/map';
3. Publish the @reactivex/ix-ts project as something shorter, like ixjs or ixts. The downside here is it's harder for bundlers to dedupe dependencies (lib foo imports ix, lib bar imports ixts, and now two copies of Ix are in your app 👎 )
4. Submit a feature-request to TypeScript to rewrite the transpiled module names to the names in the "paths" entry, so if you alias ix to @reactivex/ix-ts, TS would transpile import * from 'ix' as require('@reactivex/ix-ts')

4 would be ideal, but I'd settle for 1. Thoughts? @mattpodwysocki @kwonoj @saneyuki

[tetsuharuohzeki]

Restructure our source code so it's in the root folder (not in src) and go about our business

Converting ix's structure to like rxjs's one?

[trxcllnt]

@saneyuki sort of. rxjs copies the source files into a subdirectory, and runs tsc on the copied to compile to JS (this was the only way to get valid sourcemap file URLs). Ix uses inline sourcemaps since they compose through all the different compilers I tested.

The IxJS publish step is different as well. We publish the top-level folder as the ix package, and also publish everything under (the auto-generated) targets/<js_version>/<module_format>/ folders as individual scoped packages. The ix published module includes the targets folder too, so it's easier to alias ix in a JS project.

Except now it seems VSCode is having trouble finding the types for ix/*. The package.json file has a "typings" entry, which I thought should be enough. It's possible this is a bug in TS or VSCode, but I can't find a report anywhere.

Move the d.ts files into the same folders as the transpiled JS (instead of under their own types dir) may be enough to solve this. Or, we could publish ix as just the TS source files + targets. Something like this:

-ix
  Ix.ts
  package.json
  ./add/iterable/of.ts
  # etc.
  ./targets/es5/cjs
    Ix.js
    package.json
    # etc.

[trxcllnt]

@patrimart we just published #45 as [email protected] on npm, which should address this issue. All the files in the new version directly correspond to the path structure in the docs, so you should be able to remove any path mappings you have after you've upgraded. I'll leave this issue open for a few days so you can still use this thread if there's any trouble. Otherwise, happy hacking!