angular2失败lodash进口 [英] angular2 failing lodash import

查看：189
本文介绍了angular2失败lodash进口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一开始简单的角2的应用程序，所有的工作。但是，当我加入lodash的进口，并尝试使用它，我得到的错误和应用程序停止工作，并无法弄清楚是什么问题。

我在控制台得到这些2个错误：


  

未捕获的SyntaxError：意外的令牌LT; __ @ 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（匿名函数）@ system.src.js：430run @ angular2- polyfills.js：138zoneBoundFn @ angular2-polyfills.js：111lib $ ES6 $承诺$$内部$$ tryCatch @ angular2-polyfills.js：1511lib $ ES6 $承诺$$内部$$ invokeCallback @ angular2-polyfills.js：1523lib $ ES6 $承诺$$内部$$发布@ angular2-polyfills.js：1494（匿名函数）@ angular2-polyfills.js：243run @ angular2-polyfills.js：138zoneBoundFn @ angular2-polyfills.js：111lib $ ES6 $ $承诺$$尽快冲洗@ angular2-polyfills.js：1305
  angular2-polyfills.js：138


  
  

未捕获的SyntaxError：意外的令牌LT;
  的http：//本地主机：3000 / lodash
  错误加载的http：//本地主机：3000 /应用/ app.jsrun @ angular2，polyfills.js ：138zoneBoundFn @ angular2-polyfills.js：111lib $ ES6 $承诺$$内部$$ tryCatch @ angular2-polyfills.js：1511lib $ ES6 $承诺$$内部$$ invokeCallback @ angular2-polyfills.js：1523lib $ ES6 $承诺$$ $$内部发布@ angular2-polyfills.js：1494lib $ ES6 $承诺$$内部$$ publishRejection @ angular2-polyfills.js：1444（匿名函数）@ angular2-polyfills.js：243run @ angular2，polyfills.js ：138zoneBoundFn @ angular2-polyfills.js：111lib $ ES6 $承诺尽快$ $$平齐@ angular2-polyfills.js：1305


文件

的index.html

\r
\r

＆LT; HTML和GT;\r
\r
  ＆LT; HEAD＆GT;\r
    ＆LT;标题＆GT; 2角及快速入门LT; /标题＆GT;\r
\r
    ＆LT;！ - 1.装入库 - ＆GT;\r
    ＆LT;！ - IE需要polyfills，在此准确顺序 - ＆GT;\r
    ＆LT;脚本SRC =node_modules / ES6-垫片/ ES6-shim.min.js＆GT;＆LT; / SCRIPT＆GT;\r
    ＆LT;脚本SRC =node_modules / systemjs /距离/系统polyfills.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
    ＆LT;脚本SRC =node_modules / angular2 /包/ angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;\r
    ＆LT;脚本SRC =node_modules / systemjs /距离/ system.src.js＆GT;＆LT; / SCRIPT＆GT;\r
    ＆LT;脚本SRC =node_modules / rxjs /包/ Rx.js＆GT;＆LT; / SCRIPT＆GT;\r
    ＆LT;脚本SRC =node_modules / angular2 /包/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
    ＆LT;！ - 2.配置SystemJS - ＆GT;\r
    ＆LT;脚本＆GT;\r
      System.config（{\r
        包：{\r
          应用：{\r
            格式为：注册，\r
            defaultExtension：'JS'\r
          }\r
        }\r
      }）;\r
      System.import（应用程序/应用程序）\r
            。然后（NULL，console.error.bind（控制台））;\r
    ＆LT; / SCRIPT＆GT;\r
\r
  ＆LT; /头＆GT;\r
\r
  ＆LT;！ - 3显示应用程序 - ＆GT;\r
  ＆LT;身体GT;\r
    ＆LT;我的应用＆GT;加载...＆LT; /我的应用＆GT;\r
  ＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

tsconfig.json

\r
\r

{\r
  compilerOptions：{\r
    目标：ES5\r
    模块：系统\r
    moduleResolution：节点，\r
    sourceMap：真实，\r
    emitDecoratorMetadata：真实，\r
    experimentalDecorators：真实，\r
    removeComments：假的，\r
    noImplicitAny：假的\r
  }，\r
  排除：[\r
    node_modules\r
  ]\r
}

\r

\r
\r

的package.json

\r
\r

{\r
  名：angular2-快速入门\r
  版本：1.0.0\r
  脚本：{\r
    TSC：台糖\r
    TSC：W：TSC -w\r
    精简版：精简版服务器\r
    开始：并发\\故宫运行TSC：W \\\\运行故宫精简版\\\r
  }，\r
  许可证：ISC\r
  依赖：{\r
    angular2：2.0.0-beta.2\r
    ES6-承诺：^ 3.0.2\r
    ES6-垫片：^ 0.33.3\r
    lodash：^ 4.1.0\r
    反映了元数据：0.1.2\r
    rxjs：5.0.0-beta.0\r
    systemjs：0.19.6，\r
    zone.js：0.5.10\r
  }，\r
  devDependencies：{\r
    同时：^ 1.0.0\r
    精简版服务器：^ 1.3.4\r
    打字稿：^ 1.7.5\r
  }\r
}

\r

\r
\r

\r
\r

进口从'angular2 /平台/浏览器{}引导\r
进口{}组件从angular2 /核心;\r
进口*为_从'lodash';\r
\r
@零件（{\r
    选择：我的应用，\r
    模板：'＆LT; H1＆gt;我的第一角2应用与lodash＆LT; / H1＆GT;'\r
}）\r
出口类AppComponent {\r
\r
    构造函数（）{\r
      的console.log（_最后（[1，2，3]））;\r
  的console.log（'你好'）;\r
    }\r
\r
}\r
\r
引导（AppComponent）;

\r

\r
\r


解决方案

也许你可以在SystemJS级别尝试此配置：

  System.config（{
  （......）
  图：{
    lodash：node_modules / lodash / lodash.js
  }，
  元：{
    lodash：{格式：'AMD'}
  }
}

在一个TS文件，然后你可以使用它，如下所述：

 进口_从'lodash';
_.forEach（[1,2,3]，功能（E）{
  的console.log（E）;
}）;

这个问题可以帮助你：<一href=\"https://github.com/systemjs/systemjs/issues/951\">https://github.com/systemjs/systemjs/issues/951.

蒂埃里

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);

解决方案

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

这篇关于angular2失败lodash进口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆