当我尝试添加指令时使用 Angular2 出现意外令牌 < 错误
Unexpected token < error using Angular2 while I try to add directive
我在 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';
我真的不知道这个,请在投票前给我一些建议。
问题出在你的System.config
按如下方式更改您的系统配置:
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {defaultExtension: 'ts'},
'components': {defaultExtension: 'ts'},
format: 'register'
}
});
如您所见,我正在添加一个新包。由于您的组件文件夹在 'app' 包之外,因此无法正确加载。 (您可以通过在 import 语句中明确添加扩展名来加载它,尽管这不是正确的做法)
另一个解决方案是将您的组件文件夹移动到您的应用程序文件夹中,这样它也可以工作,因为您将只有一个名为 'app'.
的包
我也是新手,还在学习中。如果有人有什么要补充的,请补充。
我在 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';
我真的不知道这个,请在投票前给我一些建议。
问题出在你的System.config
按如下方式更改您的系统配置:
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {defaultExtension: 'ts'},
'components': {defaultExtension: 'ts'},
format: 'register'
}
});
如您所见,我正在添加一个新包。由于您的组件文件夹在 'app' 包之外,因此无法正确加载。 (您可以通过在 import 语句中明确添加扩展名来加载它,尽管这不是正确的做法)
另一个解决方案是将您的组件文件夹移动到您的应用程序文件夹中,这样它也可以工作,因为您将只有一个名为 'app'.
的包我也是新手,还在学习中。如果有人有什么要补充的,请补充。