How to include npm packages in angular cli

Question

Till now I practiced my ANgular 2 projects from angular-seed from here

While doing with this project ,I use to include all third-party libraries in system.config.js like this

 map: {
   'ng2-file-upload': 'npm:ng2-file-upload'
 },
 packages: {
  ng2-file-upload: {
    defaultExtension: 'js'
  }

This worked very fine for me.Now I am using angular cli and I am confused of including in it.

In angular-cli.json,

 "scripts": [
     ?????
  ],

Can any one please help me.Thanks

AFAIR you can import your scripts directly into your components and need not include then in your `angualr-cli.json` Eg: `import {DropdownModule} from 'primeng/components/dropdown/dropdown';` — yashhy, Apr 20 '17 at 07:01

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

You store your dependencies in node_modules folder. When you need them, you import them inside a file using import statement. When compiled into JS, import are usually replaced with require.

When you code is being executed in a browser, you need a loader to load those files from node_modules and such loader is SystemJS. Learn more why SystemJS is needed here. SystemJS needs to know the path to modules, that's why you need to add dependencies to system.config.js.

However, angular-cli uses webpack module bundler, which has its own built-in loader. When webpack bundles files, it resolves paths and inlines them into resulting bundle. That's why you don't need to add paths anywhere when using angular-cli.

I just tried to use ng2-tag-input with angular-cli. Everything worked OK. I just imported the following into main module:

...
import {TagInputModule} from 'ng2-tag-input';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    TagInputModule, BrowserAnimationsModule
  ],

And installed @angular/animations. And the following snippet worked OK:

@Component({
  template: '<tag-input [(ngModel)]='items'></tag-input>',
  ...
})
export class AppComponent {
  items = ['Pizza', 'Pasta', 'Parmesan'];
}

You also need to install @angular/animations

edited May 23 '17 at 11:54

Community

1
1

answered Apr 20 '17 at 07:43

Max Koretskyi

101,079
60
333
488

Thats very interesting Maximus,Just now i am importing tags through npm in module.ts as like this import { TagInputModule } from 'ng2-tag-input'; – MMR Apr 20 '17 at 07:47
but its not working.Should i need to import from the file or just the folder is enough – MMR Apr 20 '17 at 07:47
@MMR, can you be more specific? what's exactly not working? do you have a TS compilation error? or runtime error? or webpack error? – Max Koretskyi Apr 20 '17 at 07:48
I am getting this as eerors ............ng:///TagInputModule/TagInputComponent.ngfactory.js:369 ERROR TypeError: Cannot read property 'get' of undefined(…)View_TagInputComponent_0 @ ng:///TagInputModule/TagInputComponent.ngfactory.js:369 ng:///TagInputModule/TagInputComponent.ngfactory.js:369 ERROR – MMR Apr 20 '17 at 07:49
can you setup a plunker? I'll try to reproduce locally – Max Koretskyi Apr 20 '17 at 07:50
@MMR, just tried it myself. Everything worked fine. See my updated example for what I did. – Max Koretskyi Apr 20 '17 at 08:17
I am getting this error Cannot find module '@angular/animations/browser'. – MMR Apr 20 '17 at 09:14
@MMR, probably `@angular/animations` is missing, run `npm i @angular/animations` – Max Koretskyi Apr 20 '17 at 09:18
Thanks you Maximus,I missed that animations. – MMR Apr 21 '17 at 05:33
Maximus,I had an another question can you pls answer if it is relevant to you? – MMR Apr 21 '17 at 05:55
@MMR, which one? – Max Koretskyi Apr 21 '17 at 06:06
http://stackoverflow.com/questions/43535010/routerlink-not-working-in-grid-in-angular-2 – MMR Apr 21 '17 at 06:11
@MMR, [the answer](http://stackoverflow.com/a/43535360/2545680) seems to be correct – Max Koretskyi Apr 21 '17 at 06:47

score 0 · Answer 2 · answered Apr 20 '17 at 06:55

0

I haven't worked with SystemJS but:

Yes, you can add your libraries to the scripts

"scripts": [
    "pathToLibray"
]

But if you have a npm package, which is built for Angular you can use it without importing it. It gets loaded automatically from your node_modules

Hope I could help :)

answered Apr 20 '17 at 06:55

Raphael Jenni

318
1
8

Hi Raphael,Therefor if i had 20 .js file too I dont need to import in angular cli?Directly it works when i import it in my component? – MMR Apr 20 '17 at 06:58
Yes, it should. – Raphael Jenni Apr 20 '17 at 07:11

How to include npm packages in angular cli

2 Answers2