总的来说，我对 Angular 和 Web 开发非常陌生，我正在尝试遵循 this tutorial ，并且我将 angular2 脚本添加到了我的 index.html 文件中，但是当我尝试运行该应用程序时，我得到 SyntaxError: expected expression, got '<'在我所有的 .js 脚本中，第 1:0 行，这似乎相当常见。
奇怪的是，当我通过控制台打开这些脚本时，它们都打开 index.html而不是实际的 .js 文件，甚至是 angular2 文件。
这是index.html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<title>Test Page</title>
</head>
<body ng-app="testApp" ng-controller="testController">
<p>Testing</p>
<app></app>
<script src="../../../node_modules/rxjs/bundles/Rx.umd.js"></script>
<script
src="../../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script
src="../../../node_modules/angular2/bundles/angular2-all.umd.dev.js"></script>
<script src="hello.js"></script>
<script src="refactor.js"></script>
</body>
</html>
hello.js ，取自 this video :
import {bootstrap} from "../../../node_modules/angular2/platform/browser";
import {Component} from "../../../node_modules/angular2/core";
@Component({
selector:'app',
template:`<div>Hello World</div>`
})
class App{}
bootstrap(App);
和refactor.js ，来自提到的第一个教程:
var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
angular.element(document.body).ready(function() {
upgradeAdapter.bootstrap(document.body, ['app']);
});
编辑:我无法运行 ng-serve因为该项目不是用 ng new project 创建的。这会是问题所在吗？
最佳答案
您应该使用:
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
而不是
import {bootstrap} from "../../../node_modules/angular2/platform/browser";
import {Component} from "../../../node_modules/angular2/core";
此外angular2-all.umd.dev.js是当你想使用ES5来实现你的Angular2应用程序时。在这种情况下你应该使用
var AppComponent = ng.core
.Component({
selector: 'app',
template: '<div>Hello world</div>',
})
.Class({
constructor: function (http) {
}
});
而不是@Component装饰器...
我认为你需要选择你想要使用的技术，因为你似乎混合了它们的几个部分。
以下是不同技术的示例:
关于javascript - Angular2 语法错误 : expected expression, 得到 '<'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35920225/