SyntaxError:期望表达式,得到'<'与Angular2

时间:2016-03-10 15:07:48

标签: javascript angular

我对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创建。这可能是问题吗?

1 个答案:

答案 0 :(得分: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装饰器......

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

以下是不同技术的示例: