Angular-cli: ng build not working with dependency to npm module csvtojson

[toedter]

Versions

Angular CLI: 6.0.0                                              
Node: 8.11.1                                                    
OS: win32 x64 (Windows 10)                                                  
Angular: 6.0.0                                                  
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser                    
... platform-browser-dynamic, router                            

Package                           Version                       
-----------------------------------------------------------     
@angular-devkit/architect         0.6.0                         
@angular-devkit/build-angular     0.6.0                         
@angular-devkit/build-optimizer   0.6.0                         
@angular-devkit/core              0.6.0                         
@angular-devkit/schematics        0.6.0                         
@ngtools/webpack                  6.0.0                         
@schematics/angular               0.6.0                         
@schematics/update                0.6.0                         
rxjs                              6.1.0                         
typescript                        2.7.2                         
webpack                           4.6.0                         

Repro steps

• Install CLI 6.0.0
• Create new project
• add csvtojson and @types/csvtojson to package.json and run npm install
• add the following code to app.component.ts, so that it looks like

import {Component} from '@angular/core';
import {Converter} from 'csvtojson';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor() {
    const converter = new Converter({delimiter: ';', trim: true});
    converter.fromString('1,2,3');
  }
}

Observed behavior

When running ng build, the output is

Date: 2018-05-07T11:19:06.866Z
Hash: efcc2624f253b7b09016
Time: 15011ms
chunk {main} main.js, main.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 226 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.73 MB [initial] [rendered]

ERROR in ./node_modules/csvtojson/libs/interfaces/web/webServer.js
Module not found: Error: Can't resolve 'http' in 'D:\temp\cli-test\node_modules\csvtojson\libs\interfaces\web'
ERROR in ./node_modules/csvtojson/libs/core/Converter.js
Module not found: Error: Can't resolve 'os' in 'D:\temp\cli-test\node_modules\csvtojson\libs\core'
ERROR in ./node_modules/csvtojson/libs/core/getEol.js
Module not found: Error: Can't resolve 'os' in 'D:\temp\cli-test\node_modules\csvtojson\libs\core'
ERROR in ./node_modules/csvtojson/libs/core/Converter.js
Module not found: Error: Can't resolve 'stream' in 'D:\temp\cli-test\node_modules\csvtojson\libs\core'
ERROR in ./node_modules/first-chunk-stream/index.js
Module not found: Error: Can't resolve 'stream' in 'D:\temp\cli-test\node_modules\first-chunk-stream'

Desired behavior

It should build without error, as it did with Angular CLI 1.7.4

[jmac-slash0]

I am running into a similar issue with exceljs. I installed browserify versions of the node libraries with errors: browserify-fs, browserify-os, path-browserify, stream-browserify, Then in tsconfig.json I added them in as paths:

"compilerOptions": {
    ...
    "paths": {
        ...
        "fs": [
            "../node_modules/browserify-fs/index.js"
        ],
        "os": [
            "../node_modules/os-browserify/main.js"
        ],
        "path": [
            "../node_modules/path-browserify/index.js"
        ],
        "stream": [
            "../node_modules/stream-browserify/index.js"
        ]
    }
    ...
}

This allows the project to build and run (the paths depend on the baseUrl property). However, I am still running into some errors with ng test:
Uncaught TypeError: extended.register must be called with an extender

If I remove the paths above then ng test works. So I'm in the awkward position of having either ng build work (with paths) or ng test work (without paths). I've tried playing around with the tsconfig.spec.json file to remove these paths for testing, but haven't had any luck so far.

[steffeli]

After migrating our project from Angular 5.2 to 6.1 we suddenly have similar issues regarding packages imported from node_modules. We use minimatch 3.0.4 and get the following error:

ERROR in ./node_modules/minimatch/minimatch.js Module not found: Error: Can't resolve 'path' in '/home/sl/projects/work/design/node_modules/minimatch'

We have tried to troubleshoot this as much as we can and can't really find any problems with our project as this worked flawlessly before we migrated. We tried to replace the minimatch with micromatch to see if that made any difference, but the problem is also present there.

[s25g5d4]

This is because in latest angular-cli, node.js globals and modules polyfills and mocks are removed. see https://github.com/angular/angular-cli/blob/0cfbdbc045c6e322399a2161d42816d94fbed9fe/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L117

You can find polyfills and mocks in node-libs-browser. For node.js builtin modules, see @jmac-slash0's answer above. For builtin global variables, you can add the corresponding mock to your polyfills.ts file:

import * as process from 'node-libs-browser/mock/process';
(<any>window).process = process;

But the permanent, correct way to resolve this is to avoid including packages that aren't designed to run in browser environment.

[jmac-slash0]

The ultimate fix for me was to remove the browserify versions of the node libraries, and instead add the correct browser library file to the path in tsconfig.json:

"compilerOptions": {
    "paths": {
        "exceljs": [
            "../node_modules/exceljs/dist/exceljs.min"
        ]
    }
}

I assume a similar strategy could work for csvtojson, maybe something like:

"compilerOptions": {
    "paths": {
        "csvtojson": [
            "../node_modules/csvtojson/browser/browser"
        ]
    }
}

[s25g5d4]

Glad to see you fixed and thank for inspiring me. Not every library provides browser implementation though. For me it's micromatch that caused the problem and we have other problem to replace it. I'm pretty sure in our usage, fs and process are not used at all, so I just put mocks on it. I just write notes here to hint people googleing and eventually reached here.

[filipesilva]

@s25g5d4's answer (https://github.com/angular/angular-cli/issues/10694#issuecomment-428520833) is accurate. There is more information on why we removed the node globals in https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814.

[angular-automatic-lock-bot[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._}