Geek Answers Handbook

Angular2 refusal to import lodash

I started a simple Angular 2 application, everything worked. But when I add lodash import and try to use it, I get errors and the application stops working and cannot understand what the problem is.

I get these 2 errors in the 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 $ continue $$ internal $$ tryCatch @ angular2 -polyfills.js: 1511lib $ es6 $ continue $$ internal $$ invokeCallback @ angular2 -polyfills.js: 1523lib $ es6 $ sell $$ 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 <Evaluation http: // localhost: 3000 / lodash Error loading http: // localhost: 3000 / app / app.jsrun @ angular2 -polyfills.js: 138zoneBoundFn @ angular2 -polyfills.js: 111lib $ es6 $ prom $$ internal $$ tryCatch @ angular2 -polyfills.js: 1511lib $ es6 $ prom $$ internal $$ invokeCallback @ angular2 -polyfills.js: 1523lib $ es6 $ prom $$ internal $$ publish @ angular2 -polyfills.js : 1494lib $ es6 $ continue $$ 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
source share
3 answers

Perhaps you can try this configuration at the SystemJS level:

 System.config({ (...) map: { lodash: 'node_modules/lodash/lodash.js' }, meta: { lodash: { format: 'amd' } } }

In the TS file, you can use it as described below:

 import _ from 'lodash'; _.forEach([1,2,3], function(e) { console.log(e); });

This issue may help you: https://github.com/systemjs/systemjs/issues/951 .

Thierry

+14
source

Fully working:

Install everything through the terminal:

 npm install lodash --save tsd install lodash --save

Add paths to 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 to the top of the .ts file

 import * as _ from 'lodash'
+2
source

I decided to import lodash as follows:

import * as _ from 'lodash';

and in systemjs.config.js I defined this:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

0
source

More articles:


All Articles