2016-06-08 37 views
7

Mac OSX El capitan | angular-cli: 0.1.0 | nodo: 5.4.0 | os: darwin x64Angular2 - Angular-CLI che installa lodash - Impossibile trovare il modulo

Si tenta di installare un modulo npm di terze parti in base al wiki angular-cli: https://github.com/angular/angular-cli/wiki/3rd-party-libs ma non riescono. Ho lottato con questo per giorni e apprezzerei molto ogni aiuto.

passi per ottenere l'errore:

ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save

angolare-cli-build.json:

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; ng build (lodash viene correttamente aggiunto dist/fornitore) 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' 
    } 
}; 

(tutto secondo le specifiche in https://github.com/angular/angular-cli/wiki/3rd-party-libs) Nota: ho provato tutte le impostazioni di configurazione a cui riesco a pensare, dando tutti lo stesso risultato.

lodashtest3.component.ts: import * as _ from 'lodash';

ng build

Could not start watchman; falling back to NodeWatcher for file system events. 
Visit http://ember-cli.com/user-guide/#watchman for more info. 
Build failed. 
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: 
Error: Typescript found the following errors: 
    /Users/danielmattsson/git/lodashtest3/tmp/broccoli_type_script_compiler-input_base_path-g2lDIaq6.tmp/0/src/app/lodashtest3.component.ts (2, 20): Cannot find module 'lodash'. 
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19) 
    at BroccoliTypeScriptCompiler.build (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21 
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17) 
    at lib$rsvp$$internal$$publish (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11) 
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9) 
    at nextTickCallbackWith0Args (node.js:456:9) 
    at process._tickCallback (node.js:385:13) 

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31) 
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10) 
    at BroccoliTypeScriptCompiler (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49) 
    at Angular2App._getTsTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:280:18) 
    at Angular2App._buildTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:101:23) 
    at new Angular2App (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:42:23) 
    at module.exports (/Users/danielmattsson/git/lodashtest3/angular-cli-build.js:6:10) 
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19) 
    at Class.module.exports.Task.extend.init (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10) 
    at new Class (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12) 
    at Class.module.exports.Task.extend.run (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24 
    at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17) 
    at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11 
    at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9) 

EDIT: ulteriori informazioni in base alle osservazioni che seguono

dist/index.html:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Lodashtest3</title> 
    <base href="/"> 

    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Service worker support is disabled by default. 
     Install the worker script and uncomment to enable. 
     Only enable service workers in production. 
    <script type="text/javascript"> 
    if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('/worker.js').catch(function(err) { 
     console.log('Error installing service worker: ', err); 
     }); 
    } 
    </script> 
    --> 
</head> 
<body> 
    <lodashtest3-app>Loading...</lodashtest3-app> 

    <script src="vendor/es6-shim/es6-shim.js"></script> 
    <script src="vendor/reflect-metadata/Reflect.js"></script> 
    <script src="vendor/systemjs/dist/system.src.js"></script> 
    <script src="vendor/zone.js/dist/zone.js"></script> 

    <script> 
    System.import('system-config.js').then(function() { 
     System.import('main'); 
    }).catch(console.error.bind(console)); 
    </script> 
</body> 
</html> 
+0

è possibile controllare la dist/index.html, dove lodash.js percorso sta mostrando o si può pubblicare il tuo codice di dist/index.html. Ho avuto un problema simile con jquery. Quindi posso aiutare :) –

+0

Si prega di controllare il percorso che hai fornito a ''lodash': 'vendor/lodash/lodash.js'' è corretto? perché 'npm install' installerà lodash nella directory node_modules –

+0

@pdfarhad Ho aggiunto dist/index.html al post originale. –

risposta

25

Con il rilascio stabile e corrente angolare cli (1.0.0-beta.15), è semplicemente aggiungendo il pacchetto NPM più definizioni di tipo

npm install lodash --save 
npm install @types/lodash --save-dev 

Per le prime versioni, come 1.0.0-beta .15, il prossimo è necessario. Non dovrebbe essere richiesto per le versioni correnti:

Aggiungere la libreria allo angular-cli.json all'elenco di script globali (aggiungere "../node_modules/lodash/lodash.js" all'elenco apps[0].scripts).

Vedi https://github.com/angular/angular-cli#global-library-installation

+0

Ho cambiato la risposta a quella corretta, poiché ora è stata modificata a partire dall'ultima versione. Grazie a Dio hanno reso tutto più facile :) –

+0

a partire dalla 1.0.0-beta.26 Devo ancora usare declare const _: any; che compromette anche il completamento automatico. – ChrisGeo

+2

La versione corrente di cli ('@ angular/cli @ 1.4.4') il processo specificato nella risposta di @Eric Liprandi dovrebbe essere aggiornato correttamente, in quanto non è più necessario aggiungere l'intera libreria su globale ('angular-cli.json'). È una pratica molto migliore aggiungerla nell'ambito usando la sintassi 'import'. –

5

[ risposta aggiornato] Dopo la nuova versione di angular-cli (1.0.0-beta.15):

basta aggiungere

npm install lodash --save 
npm install @types/lodash --save-dev 

quindi aggiungere la libreria al angolare cli.json alla lista di script globali (aggiungere "../node_modules/lodash/lodash.js" alla lista apps[0].scripts) .

e nel componente in cui si desidera utilizzare, provare in questo modo

declare var _:any; 

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

prima: angular-cli (1.0.0-beta.15):

aggiungere questa linea in src/index.html

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script> 

e nel componente in cui si desidera utilizzare, provare in questo modo

declare var _:any; 

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

ho provato subito, ha funzionato per me

+0

Grazie mille, sì ha funzionato e lo userò come soluzione alternativa finché non ottengono un supporto migliore per le librerie di terze parti. Lo scopo di webpack/systemjs è compilare le librerie e caricarle (quindi non è necessario aggiungere nulla a index.html). Tuttavia, sembra molto instabile, quindi immagino che soluzioni come questa debbano fare fino a quando non migliora. Grazie ancora! –

+0

@DanielMattsson: ho aggiornato la mia risposta. la mia precedente risposta era per la tua domanda specifica. ed è stato accettato da te. Come è arrivata la nuova versione, ho aggiornato la risposta –

2

Al fine di supportare le librerie 3a parte in CLI angolare e System.js, è necessario specificare manualmente su system.config.ts e angular-cli-build.js. Ho risposto here con esempio per lodash e anche altre dipendenze.

7

FWIW, a partire da oggi (1.0.0-beta.26), aggiungendo la voce scripts non è più necessario.

Basta aggiungere le voci corrette per package.json utilizzando:

npm i --save lodash 
npm i --save-dev @types/lodash 

Poi, nel codice tipografico, uso:

import * as _ from 'lodash'; 

Il codice verrà eseguito bene.

Nel mio caso, l'aggiunta della voce scripts causava problemi.

2

A partire dal 2017/04/15 con @ angolare/CLI 1.0.0:

È necessario essere molto specifiche su quali versioni di installare in caso contrario le associazioni dattiloscritto darà tutti i tipi di guasti. Quello che ho fatto è aggiornare il mio devDependencies come segue in package.json:

"@types/lodash": "ts2.0" 
+0

Questo è ciò che ha funzionato per me con 1.0.0-beta.28.3, lodash 4.15.0, @ types/lodash ts2.0. – paulwhitman