当我尝试添加指令时使用 Angular2 出现意外令牌 < 错误

Question

我在 angular.io 进行了 5 分钟的游览；

这是我的app.ts

import {Component} from 'angular2/core';
import {Banner} from '../components/banner/banner';    

@Component({
    selector: 'app',
    styles: [`
    .title {
      font-family: Arial, Helvetica, sans-serif;
    }
    .container {
      height : 100%;
      overflow : hidden;
    }
  `],
    template: `
    <div class="container">
        <header>
          <banner></banner>
        </header>
    </div>
    `,
    directives: [Banner]
})
export class AppComponent { }

这是我的 banner.ts,

import {Component} from 'angular2/core';

@Component({
  selector: 'banner',
    template: `
    <h1>Test</h1>
    `
})

export class Banner {

}

我的文件结构如下所示：

app
  app.ts
  bootstrap.ts
components
  banner
     banner.ts
index.html

在我的 index.html 文件中

<!DOCTYPE html>
<html>
  <head>
    <!-- Set the base href -->
    <script>document.write('<base href="' + document.location + '" />');</script>

    <title>Router Sample</title>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- Add the router library -->
    <script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script>

    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'},
                  format: 'register'}
      });
      System.import('app/bootstrap')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <app>loading...</app>
  </body>

</html>

我在控制台中看到一个错误：

Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/components/banner/banner Error loading http://localhost:3000/app/bootstrap.ts

我不明白，我按照 angular.io 上的说明并尝试按照他们所做的去做，但是我得到了一个错误。

我现在所知道的是，当我尝试使用这些指令时，它会给我一个错误，无论是预构建的指令，还是我自己构建的指令。

我也尝试添加 import {Directive} from 'angular2/angular2';

我真的不知道这个，请在投票前给我一些建议。

Answer 1

问题出在你的System.config

按如下方式更改您的系统配置：

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {
       'app': {defaultExtension: 'ts'},
       'components': {defaultExtension: 'ts'},
        format: 'register'
    }
  });

如您所见，我正在添加一个新包。由于您的组件文件夹在 'app' 包之外，因此无法正确加载。（您可以通过在 import 语句中明确添加扩展名来加载它，尽管这不是正确的做法）

另一个解决方案是将您的组件文件夹移动到您的应用程序文件夹中，这样它也可以工作，因为您将只有一个名为 'app'.

的包

我也是新手，还在学习中。如果有人有什么要补充的，请补充。

当我尝试添加指令时使用 Angular2 出现意外令牌 < 错误

Unexpected token < error using Angular2 while I try to add directive

angular

angular2-forms

angular2-directives