Question

我对Angular和Web开发一般都很陌生，我正在尝试关注this tutorial，并且我已经将angular2脚本添加到我的index.html文件中，但是当我尝试运行应用程序时，我在所有.js脚本上得到SyntaxError: expected expression, got '<'，第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创建。这可能是问题吗？

Answer 1

您应该使用：

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装饰器......

我认为你需要选择你想要使用的技术，因为你似乎混合了它们的几个部分。

以下是不同技术的示例：

仅限ES5：https://plnkr.co/edit/Ki6e9KgsPaiHIxfhKH3E
仅限ES6：https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r
TypeScript：https://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1

SyntaxError：期望表达式，得到＆＃39;＆lt;＆＃39;与Angular2

1 个答案: