Angular2：语法错误：Unexpected token <(…)

Question

我知道这个问题已经被问过了，但是我找不到适合我的解决方案，我无法理解错误的真正原因。

我有一个运行良好的angularjs2应用程序。现在我想导入marked库。

我做了什么：

npm install marked
tsd install marked --save

还有 tsd.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "marked/marked.d.ts": {
      "commit": "cc3d223a946f661eff871787edeb0fcb8f0db156"
    }
  }
}

现在我正在尝试将"marked"导入到我的组件中

import {Component} from 'angular2/core';
import * as marked from 'marked';

@Component({
  selector: 'blog-component',
  templateUrl: 'app/components/blog/blog.html'
})
export class BlogComponent {
  private md: MarkedStatic;

  constructor() {
    this.md = marked.setOptions({});
  }

  getMarked() {
    return this.md.parse("# HELLO");
  }
}

这行代码：this.md = marked.setOptions({}); 会产生错误，错误信息为 SyntaxError: Unexpected token。删除这行代码不会出现错误。我认为MarkedStatic已经被正确导入了，但是无法解析Markdown，因为它应该首先使用setOptions进行初始化。

所以我认为导入marked失败了，或者setOptions方法失败了，但我无法找出原因...

以下是我的index.html中的脚本部分：

<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/marked/marked.min.js"></script>
<script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System
        .import('app/boot')
        .then(null, console.error.bind(console));
    </script>

- user1908375

---

这很可能是由于无法解析的模板URL引起的。检查所有的模板URL并在浏览器中指向它们。它们都能正常工作吗？ - pixelbits

模板URL没问题。它在没有导入“marked”库的情况下使用，并且正确显示了。 - user1908375

Answer 1

您需要将以下内容添加到您的SystemJS配置中，而不是将其包含在script元素中：

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    map: {
      marked: 'node_modules/marked/marked.min.js'
    },
    packages: {'app': {defaultExtension: 'ts'}}
  });
</script>

请查看此Plunkr：https://plnkr.co/edit/0oSeaIyMWoq5fAKKlJLA?p=preview。

这个问题可能对你有用：

• 如何检测ng-content的异步更改

- Thierry Templier

---

谢谢。这解决了这个错误。你能解释一下为什么应该通过“map”而不是直接通过“script”添加吗？有什么区别？ - user1908375

实际上，您使用SystemJS，而marked.min.js文件不使用SystemJS来注册其模块（类似于System.register('marked', ...)，因此您需要配置SystemJS以适应此/建立桥梁。 - Thierry Templier