CODEWITHSUNDEEP
angularangular-cling2-bootstrap
Bharat Chauhan
Bharat Chauhan

Reputation: 3332

How to import third party module in angular2 using angular-cli project?

How to import third party module in angular2 project using cli. Like ng2-validation OR ng2-bootstrap etc. I have don't any idea for how to plugin third party module.

Like (Note: Angular-cli don't use system js file):

(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

enter image description here

Upvotes: 1

Views: 3819

Answers (3)

Emre Öztürk
Emre Öztürk

Reputation: 2860

npm install --save @types/{package name e.g underscore}

Upvotes: -3

Bharat Chauhan
Bharat Chauhan

Reputation: 3332

I have find this solutions.

I have don't configure any file. but, directly import my usual angular module.

users.module.ts

import { NgModule } from '@angular/core';
import { UsersComponent } from './component/users.component';
import { AddUsersComponent } from './component/add-user.component';
import { UsersListComponent } from './component/user-list.component';

import { UsersService } from './service/user.service';

import { usersRouting } from './users.route';
import { SharedModule }       from '../shared/shared.module';
import { CustomFormsModule } from 'ng2-validation'; // ====== My third party module ======

@NgModule({
  imports: [
    usersRouting,
    SharedModule,
    CustomFormsModule // ======= My third party module =========
  ],
  declarations: [UsersComponent,AddUsersComponent,UsersListComponent],
  providers:[UsersService]
})
export class UsersModule { }

add-user.html

<div class="col-md-4">
     <div class="form-group">
          <label>Password</label>
          <input type="text" class="form-control" name="password" [(ngModel)]="user.password" #password="ngModel" required [rangeLength]="[5, 10]">
          <div *ngIf="password?.errors && (password.dirty || password.touched)" class="alert alert-danger">
                <div *ngIf="password?.errors?.required">
                     Password is required.
                </div>
                <div *ngIf="password?.errors?.rangeLength">
                     Please enter 5 to 10 character.
                </div>
           </div>
      </div>
 </div>

rangeLength is my third party module validation.

Upvotes: 4

Pardeep Jain
Pardeep Jain

Reputation: 86740

for the usage of any third party lib in angular cli you have to list down the file named angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function (defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/jquery.min.+(js|map)',
      'ng2-validation/**/*.+(js|map)    //here is new entry
    ]
  });
};

By giving the entry here it will copy your required files in the vendor folder from where you can use those in your project.

than after you can import the file in index.html file from vendor folder.

Upvotes: 2

Related Questions