如何使用angular-cli项目在angular2中导入第三方模块？

Question

如何使用cli在angular2项目中导入第三方模块。 像ng2-validation或ng2-bootstrap等。我对如何插入第三方模块一无所知。

喜欢（注意：Angular-cli不使用系统js文件） ：

(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);

Answer 1

我找到了这个解决方案。

我没有配置任何文件。 但是，直接导入我通常的角度模块。

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 { }

附加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是我的第三方模块验证。

Answer 2

要在angular cli中使用任何第三方lib，您必须列出名为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
    ]
  });
};

通过在此处输入条目，它将在供应商文件夹中复制您所需的文件，您可以在其中使用项目中的文件。

可以从vendor文件夹中导入index.html文件中的文件。

Answer 3

npm install --save @ types / {package name eg underscore}