use npm package in Angular 2 component

Question

I would like to use an available npm package in my Angular 4 component but am struggling to make it work. The package is called 'ip' available from https://www.npmjs.com/package/ip

I have added the package as follows:

npm install ip --save

npm install --save @types/ip

and in my app.module.ts I have:

import { isV4Format } from 'ip';

and I add isV4Format to the imports list in app.module.ts

I then try to use the ip package it in my class as follows:

import { isV4Format } from 'ip';

export class TabValidator {
    private static _check(address: string): any {
        const ip = require('ip');
        if (!myip.isV4Format(address)) { return { 'wrongFormat': true }; }
        return null;
    }
}

The compiler complains about the component:

Cannot find name 'require'

and about app.module.ts:

Argument of type '{ declarations: (typeof InterfacesComponent | typeof EditnicComponent | typeof AppComponent)[]; i...' is not assignable to parameter of type 'NgModule'.

Can someone tell me what's wrong with the above? I suspect there are a few things wrong. I found 2 similar question on SO but they appear to be for different angular versions.

I tried 'npm install @types/node' as recommended elsewhere but that didn't help — TSG
– TSG, Commented Sep 7, 2017 at 2:11
try to move require block right below imports like this: import ... const ip = require('ip'); then use it in function. If it not helped, then write path to js in require block, like const Highcharts = require('highcharts/highstock'); — Anton Lee
– Anton Lee, Commented Sep 7, 2017 at 2:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There are lots of wrong/outdated answers on SO, including these wrong ones:

Cannot find name 'require' after upgrading to Angular4

Types not found

Angular 4: "Cannot find name 'require'

It seems that Angular has made it easier; just add this into the component where you want to use the node module:

export declare let require: any;
const ip = require('ip');

Now this may not be the BEST way to achieve what you want, since I read something about using 'require' negatively impacts code sharing or something like that in Angular. But if someone can post a better answer I'll accept that!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 7, 2017 at 13:29

TSG

4,74611 gold badges77 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

use npm package in Angular 2 component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related