SyntaxError: expected expression, got '<' with Angular2

Question

I'm very new to Angular and web development in general, and I'm trying to follow this tutorial, and I got as far as adding the angular2 scripts to my index.html file, but when I try to run the application, I get the SyntaxError: expected expression, got '<' on all my .js scripts, line 1:0, which seems fairly common.

The strange thing is, when I open these scripts through the console, they all open index.html instead of the actual .js file, even the angular2 ones.

Here's 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, taken from 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);

And refactor.js, from the first tutorial mentioned:

var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
angular.element(document.body).ready(function() {
  upgradeAdapter.bootstrap(document.body, ['app']);
});

EDIT: I couldn't run ng-serve because the project wasn't created with ng new project. Could this be the problem?

Marcos Dimitrio · Accepted Answer · 2017-07-03 14:59:26Z

1

You should use:

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

instead of

import {bootstrap} from "../../../node_modules/angular2/platform/browser";
import {Component} from "../../../node_modules/angular2/core";

Moreover angular2-all.umd.dev.js is when you want to use ES5 to implement your Angular2 application. In this case you should use

var AppComponent = ng.core
    .Component({
        selector: 'app',
        template: '<div>Hello world</div>',
    })
    .Class({
        constructor: function (http) {
        }
    });

instead of the @Component decorator...

I think that you need to choose the technologies you want to use because it seems that you mixed several parts of them.

Here are samples for different technologies:

ES5 only: https://plnkr.co/edit/Ki6e9KgsPaiHIxfhKH3E
ES6 only: https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r
TypeScript: https://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1

edited Jul 3, 2017 at 14:59

Marcos Dimitrio

6,9306 gold badges42 silver badges64 bronze badges

answered Mar 10, 2016 at 15:08

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

napstablook Over a year ago

I should have added this, my .js and index.html files are all on src/main/resources/templates, and my node_modules directory is in the same level as src. Should I still use "angular2/platform/browser"?

Thierry Templier Over a year ago

But the angular2/platform/browser is registered implicitly with System.register... No path here. Your problem I think is that you include ES5 Angular2 file and try to use TypeScript or ES6 when implementing your component... Which one do you want to use?

napstablook Over a year ago

I don't know... I don't know the differences between those versions. I tried editing hello.js as you suggested but the problem persists

Thierry Templier Over a year ago

You need to make a choice ;-) I updated my answer with samples for each of them...

Collectives™ on Stack Overflow

SyntaxError: expected expression, got '<' with Angular2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related