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

【问题标题】：Unexpected token < error using Angular2 while I try to add directive当我尝试添加指令时，使用 Angular2 出现意外的令牌 < 错误
【发布时间】：2016-04-13 16:50:11
【问题描述】：

我在 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 http://localhost:3000/components/banner/banner 加载错误 http://localhost:3000/app/bootstrap.ts

我不明白，我按照 angular.io 上的说明尝试做他们所做的，但我收到错误。

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

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

我真的不知道，请在投反对票之前给我一些建议。

【问题讨论】：

我认为这是一个缺失的导入。类似的问题还有很多。
我关注 angular.io，在他们的现场示例中，他们没有导入其他内容。
如果您尝试像import {Banner} from 'app/components/banner/banner';这样导入横幅会怎样？
不，它给出了404错误，因为组件和应用程序是同一级别的文件夹，
试试这个packages: {'app': {defaultExtension: 'ts'}, format: 'register', 'components', {defaultExtension: 'ts', format: 'register'}。试一试，让我们知道它是否有效。您也可以将.js 添加到您的导入行。

标签： angular angular2-forms angular2-directives

【解决方案1】：

这里的问题在于您的 System.config

如下更改您的系统配置：

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

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

另一种解决方案是将您的组件文件夹移动到您的应用程序文件夹中，然后它也可以工作，因为您将只有一个名为“应用程序”的包。

我对此也很陌生，并且仍在学习它。如果有人有什么要补充的，请做。

【讨论】：