Angular2 - Angular-CLI installieren lodash - Modul Nicht finden kann
Mac OSX El capitan | Winkel-cli: 0.1.0 | node: 5.4.0 | os: darwin x64
Ich versuche die Installation einer 3rd-party-npm-Modul entsprechend der Winkel-cli-wiki: https://github.com/angular/angular-cli/wiki/3rd-party-libs aber nicht. Ich habe gekämpft, mit diesem nun seit Tagen und wäre dankbar jede Hilfe.
Schritte, um den Fehler zu erhalten:
ng new lodashtest3
cd lodashtest3
npm install lodash --save
typings install lodash --ambient --save
Winkel-cli-bauen.json:
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'lodash/**/*.js'
]
});
};
ng build
(lodash wird korrekt Hinzugefügt dist/Lieferant)
system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const packages: any = {
'lodash': {
format: 'cjs'
}
};
(alle laut Spezifikation, die in
https://github.com/angular/angular-cli/wiki/3rd-party-libs)
Hinweis - ich habe versucht alle config Einstellungen kann ich hier denken, alle geben das gleiche Ergebnis.
lodashtest3.Komponente.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: mehr Informationen nach Kommentaren unten
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>
- Können Sie überprüfen Sie Ihre dist/index.html , wo lodash.js Pfad zu zeigen, oder Sie können post Ihre dist/index.html code. Ich hatte ähnliches problem mit jquery. Also ich kann helfen 🙂
- Bitte überprüfen Sie den Pfad, den Sie zur Verfügung gestellt
'lodash': 'vendor/lodash/lodash.js'
ist die richtige ? danpm install
installieren, lodash in node_modules-Verzeichnis - Ich habe Hinzugefügt, dist/index.html zu dem original-Beitrag.
- Ja, lodash installiert ist, in node_modules, aber eckig-cli/webpack steckt es dann in dist/vendor/lodash/lodash.js. Die Skillung (github.com/angular/angular-cli/wiki/3rd-party-libs) sagt: "Verkäufer/xx' zu, so dass ich denke, dass ist korrekt.
- vielleicht Duplikat von [stackoverflow.com/questions/37717759/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit der stable-release und die aktuelle Winkel-cli (1.0.0-beta.15), es ist einfach das hinzufügen der npm-Paket plus Typ-Definitionen
Für die frühen Versionen wie 1.0.0-beta.15, die nächste ist notwendig. Es sollte nicht erforderlich sein, für die aktuellen Versionen:
Fügen Sie die Bibliothek, um die
angular-cli.json
auf die Liste der global scripts (add"../node_modules/lodash/lodash.js"
auf der Listeapps[0].scripts
).Sehen https://github.com/angular/angular-cli#global-library-installation
@angular/[email protected]
) die Verfahren angegeben, die auf @Eric Liprandi 's Antwort sollte aktualisiert werden, denn so richtig ist nicht mehr notwendig, die gesamte Bibliothek auf die Globale (angular-cli.json
). Ist eine viel bessere Methode, um fügen Sie es in den Bereich mitimport
syntax.So schön wie heute (
1.0.0-beta.26
), indem diescripts
Eintrag ist nicht mehr notwendig.Fügen Sie einfach die richtigen Einträge zu
package.json
mit:Dann, in Ihrem Typoskript-code verwenden:
Wird der code ausgeführt Prima.
In meinem Fall, tatsächlich Zugabe die
scripts
Eintrag wurde verursacht Probleme.[aktualisierte Antwort] Nachdem die neue version von
angular-cli (1.0.0-beta.15):
fügen Sie einfach
dann fügen Sie die Bibliothek, um die Winkel-cli.json-Liste der global scripts(add
"../node_modules/lodash/lodash.js"
auf der Listeapps[0].scripts
).und in der Komponente, wo Sie Sie benutzen wollen , versuchen Sie diese Weise
vor :
angular-cli (1.0.0-beta.15):
fügen Sie diese Zeile in src/index.html
und in der Komponente, wo Sie Sie benutzen wollen , versuchen Sie diese Weise
Versuchte ich sofort , es war für mich
Zur Unterstützung von 3rd-party-Bibliotheken in Winkel-CLI und System.js haben, müssen Sie diese manuell auf
system.config.ts
undangular-cli-build.js
.Ich habe es beantwortet hier mit Beispiel für
lodash
und auch andere Abhängigkeiten.Als der 4/15/2017 mit @Winkel/cli 1.0.0:
Müssen Sie sehr spezifisch über, welche Versionen du installieren, sonst wird die TypeScript-Bindungen geben alle Arten von Fehlern. Was ich gemacht habe ist das update meiner devDependencies wie folgt in
package.json
: