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

Question

如何使用cli导入angular2项目中的第三方模块。像NG2-验证或NG2-引导等等。我不知道如何插件第三方模块。

像(注意:角-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 { }

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

Answer 2

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

通过在这里提供条目，它将从您可以在项目中使用这些文件的位置将所需的文件复制到供应商文件夹中。

之后，您可以从供应商文件夹导入index.html文件中的文件。