angular 2 – aggiunta di librerie di terze parti

Sto cercando di iniziare ad usare angular 2 cli.
Voglio usare momentjs nel mio progetto quindi ecco cosa ho fatto:
1. progetto creato usando angular cli.
2. eseguire npm install --save moment
3. dalla cartella src eseguite typings init + typings install --save moment .
4. momento aggiunto ai moduli di sistema:

 System.config({ packages: { app: { format: 'register', defaultExtension: 'js' }, moment: { map: 'node_modules/moment/moment.js', type: 'cjs', defaultExtension: 'js' } } }); 
  1. aggiunta import * as moment from 'moment'; al mio componente desiderato
  2. eseguire ng serve e ottenere:

[DiffingTSCompiler]: Typescript ha rilevato i seguenti errori: app / angular-day-picker.ts (2, 25): imansible trovare il “momento” del modulo. Errore: [DiffingTSCompiler]: Typescript ha rilevato i seguenti errori: app / angular-day-picker.ts (2, 25): imansible trovare il “momento” del modulo. at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) a DiffingTSCompiler.rebuild (/ Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / lib / broccoli / broccoli-typescript.js: 101: 18) su DiffingPluginWrapper.rebuild (/ Users / vioffe / personale / angular-day-picker / node_modules / angular-cli / lib / broccoli / diffing-broccoli-plugin.js: 87: 45) su / Users / vioffe / personale / angular-giorno-picker / node_modules / angular-cli / node_modules / angular-cli / node_modules / broccoli / lib / api_compat. js: 42: 21 a lib $ rsvp $$ internal $$ tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js : 1036: 16) a lib $ rsvp $$ internal $$ invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js : 1048: 17) in / Users / vioffe / personale / angular-day-picker / node_modules / angular-cli / node_modules / angular -cli / node_modules / rsvp / dist / rsvp.js: 331: 11 a lib $ rsvp $ asap $$ flush (/ Users / vioffe / personale / angular-day-picker / node_modules / angular-cli / node_modules / angular-cli /node_modules/rsvp/dist/rsvp.js:1198:9) at doNTCallback0 (node.js: 430: 9) a process._tickCallback (node.js: 359: 13)

Ecco il mio file tsconfig.json:

 { "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "mapRoot": "", "module": "system", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, "rootDir": ".", "sourceMap": true, "sourceRoot": "/", "target": "es5" }, "files": [ "typings/main.d.ts" ], "exclude": [ "typings/browser.d.ts", "typings/browser" ] } 

Che cosa ho fatto di sbagliato? Non riesco a trovare nei documenti una guida per aggiungere librerie di terze parti.

Quando si includono le librerie di terze parti, ci sono due parti … il codice javascript che si desidera eseguire e i file di definizione per dare all’IDE tutto il suo carattere fortemente tipizzato.

Ovviamente, il primo deve essere presente se l’app deve funzionare. Il modo più semplice per farlo è includere la libreria di terze parti con un nella pagina html che ospita l'app Angular 2. Questo non ti darà le definizioni, quindi non avrai la bontà dell'IDE, ma l'app funzionerà. (per impedire all'IDE di lamentarsi del fatto che non conosca la variabile 'thirdLib', aggiungi declare var thirdLib:any al tuo file ts. Poiché è di tipo any l'IDE non offre il completamento del codice per thirdLib, ma lo farà anche non generare errori IDE.)

Per ottenere codice e definizioni in esecuzione, se la lib è stata scritta in Typescript, è ansible aggiungere un riferimento a tale file ts dal codice con import {thirdLib} from 'thirdLibfolder/thirdLib' . Il file ts di lib per sua natura ha sia il codice di esecuzione che le definizioni di typescript.

Se la lib non è scritta in Typescript, ma una buona anima ha scritto per essa un file di definizione thirdLib.d.ts, puoi fare riferimento al file d.ts con /// nel tuo file ts. E quindi includi ancora il javascript di esecuzione effettivo con il riferimento allo script come menzionato sopra.

La posizione di questi file e l'eventuale inclusione delle estensioni nel riferimento, sono specifici per l'impostazione del progetto e per lo strumento di raggruppamento e di creazione che si sta utilizzando. Webpack cercherà la cartella node_modules per le librerie a cui si fa riferimento import {... e accetterà un riferimento con estensione .ts e senza. Meteor genererà un errore se includi l'estensione .ts .

Esempio .. Per prima cosa dobbiamo installare ChartJS da npm.

 npm install chart.js --save 

Ora che abbiamo installato ChartJS, dobbiamo dire alla CLI nel file angular-cli-build.js in cui si trova il nuovo file JavaScript in modo che possa essere raggruppato.

 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/**/*.+(js|js.map)', 'rxjs/**/*.+(js|js.map)', '@angular/**/*.+(js|js.map)', 'chart.js/Chart.min.js', ] }); }; const map: any = { 'chartjs': 'vendor/chart.js/' }; const packages: any = { chartjs: { defaultExtension: 'js', main: 'Chart.min.js' } }; 

il supporto per la lib di terze parti tramite comando non è ancora supportato.

Fai quanto segue per il momento:

  1. npm istante istante
  2. copia moment.js da node_modules / moment a src / assets / js / moment.js
  3. includi asset / js / moment.js nel tuo index.html
  4. installa i tipi e importa lib nel tuo file .ts dove ti serve
  5. run ng serve e divertiti usando il momento 🙂

Questa pagina wiki fornisce una spiegazione più dettagliata:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Still Angular-cli ha qualche problema con l’integrazione della libreria di terze parti. Fino a quando non lo sistemano correttamente, posso darti un trucco. Diciamo che vuoi usare _ di lodash nel tuo codice. Quindi ti darò il mio scenario di codice funzionante-

Per installare il lodash

 npm install lodash --save typings install lodash --ambient --save 

prima di questo, assicurati di installare le tipizzazioni a livello globale

 npm install typings -g 

Quindi, nel tuo angular-cli-build.json, assicurati che rimanga in questo modo

 module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; 

e nel tuo sistema-config.ts:

 /** Map relative paths to URLs. */ const map: any = { 'lodash': 'vendor/lodash/lodash.js' }; /** User packages configuration. */ const packages: any = { 'lodash': { format: 'cjs' } }; 

nel tuo src / index.html aggiungi questa riga (Questa è la soluzione strana)

  

ora nel tuo componente in cui vuoi usare lodash, scrivi in ​​questo modo

 declare var _:any; @Component({ }) export class YourComponent { ngOnInit() { console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); } } 

ha funzionato per me :). Ho usato enormi librerie di terze parti nel mio progetto angular2 attraverso angular-cli. Spero che ti aiuti anche tu

Modificare:

Se non ottieni alcun npm per le tue librerie di terze parti. Crea una cartella di assets sotto la cartella src . Quindi puoi aggiungere cartelle separate per js , css e images . Inserisci i js di terze parti nella cartella js . Quindi devi fare riferimento al file js nel tuo index.html in questo modo:

  

Ora, quando ng serve o ng build aggiornerà automaticamente la cartella pubblica con le assets/js . Spero tu capisca l’intero scenario 🙂

Se la libreria che vuoi includere non è nelle tipizzazioni hai due modi per includerla in un’applicazione angular 2:

  1. usando npm: step a. installa la libreria usando il gestore di pacchetti

    passo b. aggiungi il percorso della libreria all’object mappa nel file systemjs.config.js.

esempio:

‘jquery’: ‘npm: jquery / dist / jquery.js’, ‘d3’: ‘npm: d3 / build / d3.js’

passo c. importalo nell’esempio app.module.ts:

importare ‘jquery’; importare ‘d3’;

passo d. dichiararlo

esempio: declare var $: any;

dichiarare var d3: any;

  1. semplicemente puoi includerlo nel tag script in index.html e dichiararlo.

La risposta può essere trovata al seguente link: https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Al momento non sto utilizzando moment.js personalmente. Quindi non sono sicuro, ma mi sembra che tu stia cercando di usare moment.js come un modulo typescript e forse non è un modulo typescript. Suggerisco un altro approccio. Non utilizzare moment.js come modulo da importare, ma utilizzare invece un file d.ts. Per fare ciò, sto usando tsd: Apri un cmd:

  • npm installa tsd -g
  • Installazione globale di tsd

  • cd [il tuo progetto dir]
  • Passa alla tua radice del progetto

  • tsd init
  • Tra le altre cose, crea un file tsd.json per tenere traccia dei tuoi file d.ts installati

  • tsd install moment -save

Dopo questo ho ottenuto il completamento del codice in typescript dopo: momento.

Non ho provato ulteriormente …

Ora sto usando tipizzazioni , invece di tds, come manager per le definizioni TypeScript. Tds ora è deprecato.

Probabilmente puoi installare moment.d.ts in questo modo: types installa moment –ambient –save

Controlla https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries , per come aggiungere la libreria di terze parti con systemjs.