我正在尝试在现有项目上运行角度2并且我已经遵循以下代码:
<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>
<script type="text/javascript">
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {app: {defaultExtension: 'ts'}}
});
System.import('assets/js/angular2/app/script.js')
.then(null, console.error.bind(console));
</script>
script.ts
import {bootstrap} from 'angular2/platform/browser'
import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'
bootstrap(FeedComponent)
feed.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'feeds',
template: 'assets/partials/wall/Feeds.html'
})
export class FeedComponent {
}
HTML
<feeds>
loading...
</feeds>
但它给出了一个错误:
core:1 Uncaught SyntaxError: Unexpected token <U @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost/v010-commonsocialnetwork/@angular/coreU @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Script error.
Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/feed.component.jsU @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2-polyfills.js:138 Script error.
Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js
Error loading http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js
请让我知道我做错了什么,以及如何解决这个问题。
提前致谢:)
答案 0 :(得分:1)
您使用的是哪个版本的angular2?
您似乎正在使用angular2 beta和angular2 rc版本。
在候选版本中:
import { Component } from '@angular/core';
以及之前的版本
import {bootstrap} from 'angular2/platform/browser'
如果你继续使用rc,你可以使用:
在候选版本中,您不应在脚本标记中添加角度库,
相反,你应该在系统js config中做模块
系统js config
的示例System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
map: {
'app': 'app',
'rxjs': 'libraries/rxjs',
'@angular': 'libraries/@angular',
},
packages: {
'app': { main: 'main.ts', defaultExtension: 'ts'},
'rxjs': { main: 'Rx.js' },
'@angular/core': { main: 'index.js' },
'@angular/common': { main: 'index.js' },
'@angular/compiler': { main: 'index.js' },
'@angular/router': { main: 'index.js' },
'@angular/platform-browser': { main: 'index.js' },
'@angular/platform-browser-dynamic': { main: 'index.js' },
'@angular/http': { main: 'index.js' },
}
});
答案 1 :(得分:0)
我认为你可以替换
import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'
与
import {FeedComponent} from 'assets/js/angular2/app/feed.component'
您可以在系统js config中将默认文件扩展名指定为“ts”。 不确定它是否是根本原因。请先试试。