angular2 failing lodash import
Question
I started simple Angular 2 app, all working. But when I add import of lodash and try to use it, I get errors and the app stops working, and can't figure out what is the problem.
I am getting these 2 errors in console:
Uncaught SyntaxError: Unexpected token <__exec @ system.src.js:1374entry.execute @ system.src.js:3300linkDynamicModule @ system.src.js:2921link @ system.src.js:2764execute @ system.src.js:3096doDynamicExecute @ system.src.js:715link @ system.src.js:908doLink @ system.src.js:569updateLinkSetOnLoad @ system.src.js:617(anonymous function) @ system.src.js:430run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2-polyfills.js:138
Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/lodash Error loading http://localhost:3000/app/app.jsrun @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
FILES
index.html
<html> <head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/app') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] }
package.json
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \\"npm run tsc:w\\" \\"npm run lite\\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.2", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "lodash": "^4.1.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "systemjs": "0.19.6", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.4", "typescript": "^1.7.5" } }
import {bootstrap} from 'angular2/platform/browser' import {Component} from 'angular2/core'; import * as _ from 'lodash'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App with lodash</h1>' }) export class AppComponent { constructor(){ console.log(_.last([1, 2, 3])); console.log('hello'); } } bootstrap(AppComponent);
3 answers
solution1
14 ACCPTED 2016-02-01 13:03:17
Perhaps you could try this configuration at SystemJS level:
System.config({
(...)
map: {
lodash: 'node_modules/lodash/lodash.js'
},
meta: {
lodash: { format: 'amd' }
}
}
In a TS file, you can then use it as described below:
import _ from 'lodash';
_.forEach([1,2,3], function(e) {
console.log(e);
});
This issue could help you: https://github.com/systemjs/systemjs/issues/951 .
Thierry
solution2
2 2016-03-05 21:50:17
Fully working:
Install all thru terminal:
npm install lodash --save
tsd install lodash --save
Add paths in index.html
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
lodash: './node_modules/lodash/lodash.js'
}
});
System.import('app/init').then(null, console.error.bind(console));
</script>
Import lodash at the top of the .ts file
import * as _ from 'lodash'
solution3
0 2016-07-13 16:27:47
I solved importing lodash in the following way:
import * as _ from 'lodash';
and in systemjs.config.js i defined this:
map: { 'lodash' : 'node_modules/lodash/lodash.js' }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.