angular2：SyntaxError：意外的标记<（...） [英] angular2: SyntaxError: Unexpected token <(…)

问题描述

我知道，这个问题已被提出，但我无法找到解决方案，我无法理解错误的真正原因。

I know, this question was asked already, but I can't find the solution for my particular case I can't not understand real reason of the error.

我有一个angularjs2应用程序，运行正常。现在我想导入标记库。

I have an angularjs2 app which is running fine. Now I would like to import marked library.

我做了什么：

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

现在尝试将已标记导入我的组件

now trying to import "marked" into my component

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

这一行：这个。 md = marked.setOptions（{}）; 使用产生错误语法错误：意外的令牌 ..删除此行不会以错误结束。我还认为 MarkedStatic 是导入的。但是不能解析降价，因为它应该首先初始化为 setOptions 。

This line: this.md = marked.setOptions({}); produces the error with SyntaxError: Unexpected token.. removing this line does not end with an error.. I also thing that MarkedStatic was imported correclty then. but then ist not possible to parse markdown, because it should be first initialized whith setOptions.

所以我假设导入标记为失败，或 setOptions 方法失败..但我无法理解为什么...

So I assume that importing of marked fails, or the setOptions method fails.. but I can't figure why...

这里是我的index.html的脚本部分：

and here the script part of my 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>

推荐答案

您需要在SystemJS配置中添加此项而不是将其包含在脚本元素中：

You need to add this in your SystemJS configuration instead of including it into a script element:

<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 。

See this plunkr: https://plnkr.co/edit/0oSeaIyMWoq5fAKKlJLA?p=preview.

这个问题可能是对你有用：

This question could be useful for you:

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

• How to detect async change to ng-content

这篇关于angular2：SyntaxError：意外的标记<（...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！