javascript - angular2 failing lodash import

Question

Welcome To Ask or Share your Answers For Others

javascript - angular2 failing lodash import

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - angular2 failing lodash import

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:00:04+0000

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

Categories

javascript - angular2 failing lodash import

javascript - angular2 failing lodash import

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags