angular2：SyntaxError：意外的令牌<（...）

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"
    }
  }
}

現在嘗試將“標記”導入我的組件

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生成錯誤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>

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的異步更改