Module cannot be found after installing package 'ts-odatajs' in clean project

[Diemauerdk]

Just a little comment to my report:

I have just upgraded my angular 5.2 application to angular 6. In the angular 5 application i did not see this error. So after i have been struggling with this issue for some time and since i could easily reproduce it in a clean new angular 6 solution, then I decided to submit this report :)

- [ X] bug report 
- [ ] feature request

- [ ] new
- [X ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Windows 10 Pro
Node version: 8.9.3
NPM version: 5.5.1
Angular CLI version
Angular CLI: 6.1.2
Node: 8.9.3
OS: win32 x64
Angular:
@angular-devkit/architect 0.7.2
@angular-devkit/core 0.7.2
@angular-devkit/schematics 0.7.2
@schematics/angular 0.7.2
@schematics/update 0.7.2
rxjs 6.2.2
typescript 2.7.2

Repro steps

1. ng new angularTest
2. cd angularTest
3. npm i ts-odatajs
4. go to for example app.component.ts and make it contain the following:

import { Component } from '@angular/core';
import {oData} from 'ts-odatajs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularTest';
  oData;

  constructor(){
    oData.json
  }
}

The log given by the failure

ERROR in ./node_modules/ts-odatajs/lib/odata/net.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\USER\Desktop\testDir\angularTest\node_modules\ts-odatajs\lib\odata'
ERROR in ./node_modules/ts-odatajs/lib/odata/net.js
Module not found: Error: Can't resolve 'https' in 'C:\Users\USER\Desktop\testDir\angularTest\node_modules\ts-odatajs\lib\odata'

Desired functionality

Result: A successfull build

[steffeli]

Similar or duplicate issue here maybe? #10694
We struggle with the same thing.

[Diemauerdk]

Hi @steffeli ,

I read your ticket and I see your problem is very similar. I guess it confirms even more that this is a bug since you also upgraded from angular 5.2 to 6 like me. I really hope for a solution soon because we need this to work now. :)

[clydin]

The ts-odatajs main file relies on two node builtin libraries http and https. These are specific to the node.js javascript platform and are not present within a browser javascript platform. The package in question, however, does contain a browser version (dist/odatajs-4.0.3.min.js). Since the package.json does not contain a browser field pointing to the file, a TypeScript path mapping could potentially be used to map the non-relative import to the appropriate file.

[Diemauerdk]

Hi @clydin ,

Thanks for explanation and suggestion.

For others in similar situation, this might help. I added the following to the tsconfig.json file:

    "paths": {
      "https": [ "./node_modules/ts-odatajs/dist/odatajs-4.0.3.min.js" ],
      "http": [ "./node_modules/ts-odatajs/dist/odatajs-4.0.3.min.js" ],
    }

When I build after this the error is gone. I am still not sure why this is was not needed in angular 5.2.

@steffeli maybe this knowledge can help in your situation.

Thanks :)

[steffeli]

Thank you for your suggestion @Diemauerdk, but we still can't get it to work. I have tried to add path-browserify to our project and add paths aliases as you suggested, the error/warn is still there about missing path package. I thought webpack (bundled with Angular CLI) included browser specific implementations of these by default so that we shouldn't have to do this at all, or might I be missing something?

[Diemauerdk]

I am absolutely no expert in configuring webpack but that's also what I expected - and I don't understand what the difference here is between angular 5 and 6.

Sad to hear it didn't solve your problem though, it's quite frustrating :(

[Casimodo72]

I couldn't make this work. Had to change the following line in "odata.js":

var odataNet      = exports.net       = require('./odata/net.js');

to

var odataNet      = exports.net       = require('./odata/net-browser.js');

Obviously this is just a hack I have to add every time I fetch ts-odatajs.

Is there some tsconfig path magic which can be applied so that the require('./odata/net.js') will resolve to require('./odata/net-browser.js')?
Or is this a webpack thingy which I don't want to touch?

[buchatsky]

@Casimodo72 you can use webpack module replacement plugin for that:

new webpack.NormalModuleReplacementPlugin(
    /node_modules[\\/]ts-odatajs[\\/]lib[\\/]odata[\\/]net\.js/,
    './net-browser.js'
)

PS. It's strainge but it works without this replacement with vue.js

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}