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>

我在控制台中看到错误：

未捕获的SyntaxError：意外的令牌＆lt;评估 http://localhost:3000/components/banner/banner加载错误 http://localhost:3000/app/bootstrap.ts

我不明白，我按照angular.io上的说明进行操作并尝试做他们所做的事情，但是我收到了错误。

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

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

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

Answer 1

问题在于您的System.config

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

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

如您所见，我正在添加一个新包。由于您的组件文件夹位于“应用程序”之外包，它没有正确加载。（您可以通过在import语句中明确添加扩展名来加载它，尽管这不是正确的事情）

另一个解决方案是将您的组件文件夹移动到您的应用程序文件夹中，然后它也会起作用，因为您只有一个名为＆＃39; app＆＃39;。

的软件包。

我也是新手，仍然在学习它。如果有人要添加任何东西，请做。

意外的令牌＆lt;我尝试添加指令时使用Angular2时出错

1 个答案: