How to add node module to Angular project if is not schematics enabled?

Question

Cannot use ng add and npm install doesn't meet the requirements which are somewhat unclear.

How do I add an node module to angular app/project? I've installed it with npm install so what's next?

I tried adding it into scripts array in angular.json but is caused just error "require is not defined"

adding the dependencies to package.json and running `npm install` does that not work for you? — nircraft, Dec 17 '18 at 14:03
@nkuma_12 Isn't npm install for adding dependencies - no need to add dependency but just to install one with npm. Screenshot of what? — user1271930, Dec 17 '18 at 14:17
Well, in that case you can download the `tar` or `.gzp` of the npm library you need, and keep it somewhere in the project directory and refer to it in index.html for use. — nircraft, Dec 17 '18 at 14:21

score 1 · Answer 1 · answered Dec 17 '18 at 18:42

1

If I understand correctly, the answer to "what's next" is this:

In your angular.json file, add the scripts to the scripts tag:

  "scripts": [
    "../node_modules/itsFolder/dist/js/its.js",
    // Add any other scripts here
  ],

This includes the script as part of the build process.

Also, check out the answers here: Use external javaScript library in angular 4 application

answered Dec 17 '18 at 18:42

DeborahK

57,520
12
104
129

This ends up in "require is not defined" – user1271930 Dec 18 '18 at 06:38
Now I tried to browserify this module and by inculding that version my browser console says Error: Cannot find module 'http' – user1271930 Dec 18 '18 at 08:35

score 1 · Answer 2 · answered May 03 '20 at 10:34

Example:

import * as md5 from 'js-md5'

ngOnInit(){
  console.log(md5(""));
}

Soruce: https://www.freecodecamp.org/forum/t/can-i-use-npm-packages-directly-inside-angular-2/132935/6 NOTE: I have tested this and it works. You can include any npm package and try in Angular 'ts' file, knowing what you are doing with it and how to do it. Thank You!

score -1 · Answer 3 · answered Dec 17 '18 at 14:16

-1

Below steps might help you to start your first project in Angular. Nicely explained here

Go to https://nodejs.org/en/download/ and select npm version based on your OS (Windows or Mac)

To check npm is installed, run npm -v. it will give you installed npm version.

Another commands to install latest npm

npm install -g @angular/cli

To check available CLI commands type this.

Now you can use below commands to Create New Angular 4 Project

ng new first-project

It will create Angular project first-app and will install required npm packages.

To start project, you can use

ng serve

To create Angular 4 Component

ng g component cities

How to create Router for The Newly Component

To make access the new component, we have to make routing for it. Open and edit src/app/app.module.ts the add this import.

import { RouterModule }   from '@angular/router';

imports: [  BrowserModule,  FormsModule,  HttpModule,  RouterModule.forRoot([    { path: '', redirectTo: 'newComponentName'},
    { path: 'componentname', component: ComponentName }  ])
]

Next, replace all tags in src/app/app.component.html with this tag.

<router-outlet></router-outlet>

answered Dec 17 '18 at 14:16

Prashant M Bhavsar

1,136
9
13

But how do I use a node module with this component? All forementioned is angular specific and although I want to use Angular the whole idea of node is to support modular approach: install and use it but now I missing the idea of how to install and use. I could have ever thought that it would be this hard to use a simple NPM provided module/script... – user1271930 Dec 17 '18 at 14:18
for example you want to use primeng dropdown module then you can do npm i primeng --save Import DropdownModule into parent module 1 import { DropdownModule } from 'primeng/primeng'; @NgModule({ imports: [ DropdownModule ] }); You will get same help in this tutorial in simple way [http://musttoknow.com/how-to-use-angular-4-angular-5-and-angular-6-primeng-dropdown/] ..You can try with dropdown module... – Prashant M Bhavsar Dec 17 '18 at 14:29
If I want to use something that has nothing to with NG (angular) but rather with this technology (javascript) and available via NPM? Currently it keeps reportin "module not found; error cannot resolve crypto, https, http, zlib. zlib_bindingins etc" – user1271930 Dec 17 '18 at 14:31
Yes..if you want to use some feature of JS tech then you find available npm for same in angular..it will get it – Prashant M Bhavsar Dec 17 '18 at 14:33

How to add node module to Angular project if is not schematics enabled?

3 Answers3