0

我在 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';

我真的对此一无所知，请在否决之前给我一些建议。

4

1 回答 1

1

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

更改您的系统配置如下：

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

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

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

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

于 2016-01-08T23:12:27.520 回答