[英]How to import third party module in angular2 using angular-cli project?
How to import third party module in angular2 project using cli. 如何使用cli在angular2项目中导入第三方模块。 Like ng2-validation OR ng2-bootstrap etc. I have don't any idea for how to plugin third party module. 像ng2-validation或ng2-bootstrap等。我对如何插入第三方模块一无所知。
Like (Note: Angular-cli don't use system js file) : 喜欢(注意: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);
I have find this solutions. 我找到了这个解决方案。
I have don't configure any file. 我没有配置任何文件。 but, directly import my usual angular module. 但是,直接导入我通常的角度模块。
users.module.ts 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 附加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. rangeLength是我的第三方模块验证。
for the usage of any third party lib in angular cli you have to list down the file named angular-cli-build.js
要在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
]
});
};
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. 可以从vendor文件夹中导入index.html文件中的文件。
npm install --save @ types / {package name eg underscore}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.