如何使用 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

我找到了这个解决方案。

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

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

要在 Angular 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 文件中的文件。

Answer 3

npm install --save @types/{包名，例如下划线}