Как импортировать сторонний модуль в angular2 с помощью проекта angular-cli?

Как импортировать сторонний модуль в проект angular2 с помощью cli. Например, 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);

введите описание изображения здесь


angular angular-cli ng2-bootstrap
person Bharat Chauhan    schedule 19.10.2016    source источник
comment
Слишком много вопросов и учебники об этом.   -  person Reyraa    schedule 19.10.2016
comment
Пожалуйста, проверьте мой обновленный вопрос   -  person Bharat Chauhan    schedule 19.10.2016

Ответы (3)


arrow_upward
4
arrow_downward

Я нашел это решение.

Я не настраиваю никаких файлов. но напрямую импортируйте мой обычный угловой модуль.

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 – проверка моего стороннего модуля.

person Bharat Chauhan    schedule 20.10.2016
comment
хорошо, сам ответ :) - person Pardeep Jain; 20.10.2016

arrow_upward
2
arrow_downward

для использования любой сторонней библиотеки в 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 из папки поставщика.

person Pardeep Jain    schedule 19.10.2016
comment
Я не нашел файл angular-cli-build.js - person Bharat Chauhan; 19.10.2016
comment
см. на корневом уровне приложения, вы найдете там этот файл - person Pardeep Jain; 19.10.2016
comment
Привет, друзья, я загрузил файл структуры каталогов .. пожалуйста, проверьте - person Bharat Chauhan; 19.10.2016
comment
какую версию angular-cli вы используете? - person Pardeep Jain; 19.10.2016
comment
проект: {версия: 1.0.0-beta.15, имя: ngcli}, - person Bharat Chauhan; 19.10.2016
comment
@pradeep jain: привет друзья - person Bharat Chauhan; 19.10.2016
comment
Я попытался добавить в свой проект файл angular-cli-build.js. Файл игнорируется. Когда я делаю «ng --version», я получаю: похоже, вы используете новейшую версию Angular CLI, которая использует webpack. Для этой версии не требуется файл angular-cli-build, но он есть в вашем проекте. Это будет проигнорировано. Похоже, файл angular-cli-build устарел. Я использую angular-cli: 1.0.0-beta.16. узел: 4.4.2. нпм: 3.10.6. - person chaze; 20.10.2016
comment
И веб-пакет 2.1.0-бета.22 - person chaze; 20.10.2016

arrow_upward
-3
arrow_downward

npm install --save @types/{имя пакета, например, подчеркивание}

person Emre Öztürk    schedule 23.10.2016
comment
вопрос не в package.json - person Conrado; 15.06.2017