SyntaxError: ожидаемое выражение, получило '<' с Angular2

Я очень новичок в развитии углов и веб-сайтов в целом, и я стараюсь следовать this tutorial, и до сих пор добавлял скрипты angular2 в свой индекс. html, но когда я пытаюсь запустить приложение, я получаю SyntaxError: expected expression, got '<' на всех моих сценариях .js, строка 1: 0, что кажется довольно распространенным явлением.SyntaxError: ожидаемое выражение, получило '<' с Angular2

Странная вещь, когда я открываю эти скрипты через консоль, все они открывают index.html вместо фактического .js-файла, даже углового2.

Вот 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']); 
});

EDIT: Я не смог запустить ng-serve, потому что проект не был создан с помощью ng new project. Это может быть проблема?

источник

2016-03-10 napstablook

Вы должны использовать:

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
Машинопись: https://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1

источник

2016-03-10 15:08:28

Я должен добавить это, мой .js и индекс .html все находятся на 'src/main/resources/templates', а мой каталог' node_modules' находится на том же уровне, что и 'src'. Должен ли я использовать «angular2/platform/browser»? – napstablook

Но 'angular2/platform/browser' зарегистрирован неявно с' System.register' ... Нет пути здесь. Ваша проблема заключается в том, что вы включаете файл ES5 Angular2 и пытаетесь использовать TypeScript или ES6 при реализации вашего компонента ... Какой из них вы хотите использовать? –

Я не знаю ... Я не знаю различий между этими версиями. Я попытался отредактировать 'hello.js', как вы предложили, но проблема не устранена. – napstablook

SyntaxError: ожидаемое выражение, получило '<' с Angular2

ответ

Смежные вопросы