Угловой 2 Краткое руководство: неожиданный токен

я пытаюсь настроить angular 2 в соответствии с быстрым началом, найденным в http://angular.io. я скопировал каждый файл точно так, как описано в руководстве, но когда я запускаю npm start и открывается вкладка браузера, я получаю " загрузка..."со следующей ошибкой в консоли:



Uncaught SyntaxError: Unexpected token <                        (program):1

     __exec @ system.src.js:1374

Uncaught SyntaxError: Unexpected token <          angular2-polyfills.js:138

    Evaluating http://localhost:3000/app/boot

    Error loading http://localhost:3000/app/boot


это мой app.component.ts:



import {Component} from 'angular2/core';



@Component({

    selector: 'my-app',

    template: `<h1>My First Angular 2 App</h1>`

})

export class AppComponent {



}


мой boot.ts:



import {bootstrap} from 'angular2/platform/browser';

import {AppComponent} from './app.component';



bootstrap(AppComponent);


мой index.html:



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Angular 2 Quick Start</title>



    <script src="node_modules/es6-shim/es6-shim.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="node_modules/rxjs/bundles/Rx.js"></script>

    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>



    <script>

    System.config({

        packages: {

            format: 'register',

            defaultExtension: 'js'

        }

    });



    System.import('app/boot')

        .then(null, console.error.bind(console));

    </script>

</head>

<body>

    <my-app>Loading...</my-app>

</body>

</html>


мой package.json:



{

    "name": "angular2-quickstart",

    "version": "0.1.0",

    "scripts": {

        "tsc": "tsc",

        "tsc:w": "tsc -w",

        "lite": "lite-server",

        "start": "concurrent "npm run tsc:w" "npm run lite" "

    },

    "license": "MIT",

    "dependencies": {

        "angular2": "2.0.0-beta.0",

        "systemjs": "0.19.6",

        "es6-promise": "^3.0.2",

        "es6-shim": "^0.33.3",

        "reflect-metadata": "0.1.2",

        "rxjs": "5.0.0-beta.0",

        "zone.js": "0.5.10"

    },

    "devDependencies": {

        "concurrently": "^1.0.0",

        "lite-server": "^1.3.1",

        "typescript": "^1.7.3"

    }

}


и наконец-то мой tsconfig.json:



{

    "compilerOptions": {

        "target": "ES5",

        "module": "system",

        "moduleResolution": "node",

        "sourceMap": true,

        "emitDecoratorMetadata": true,

        "experimentalDecorators": true,

        "removeComments": false,

        "noImplicitAny": false

    },

    "exclude": [

        "node_modules"

    ]

}


заранее спасибо за любую помощь.

616   14  

14 ответов:

попробуйте заменить этот

System.config({
        packages: {
            format: 'register',
            defaultExtension: 'js'
        }
    });

С

System.config({
        packages: {
            app: { // must match your folder name
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });

Я пытался применить немного другую структуру папок для их быстрого запуска и столкнулся с той же проблемой. Я обнаружил, что имя свойства объекта "пакеты" должно совпадать с родительской папкой.

46  
2015-12-21 09:19:27

совет для тех, кто сталкивается с "неожиданной ошибкой токена

Я смог точно определить это в инструментах разработчика Chrome на вкладке "Сеть", просматривая загруженные файлы JavaScript один за другим, пока не нашел тот, где вместо этого был возвращен HTML. Это легко решить проблема с моим импортом.

надеюсь, мы можем получить более осмысленное сообщение об ошибке в какой-то момент-

34  
2016-04-29 18:40:36

у меня были подобные проблемы с различными модулями узлов и пришли сюда из Google.

обычно я получаю ошибку после importing пакет, а затем пытается использовать его.

например, у меня была такая же проблема при загрузке https://github.com/ngrx/store.

Я проверил вкладку Сеть и получается файл, который был загружен для магазина.js (основной файл этого модуля) не был правильным. Он запросил магазин.js, но получил мой индекс.формат html, который начинался с <!DOCTYPE html>, т. е. он начался с "

мне непонятно, почему мой индекс.html был подан вместо фактического файла JavaScript. Одним из объяснений может быть то, что SystemJS сделал запрос, который никуда не привел, и мой сервер был настроен для обслуживания индекса.html по умолчанию. Однако у меня недостаточно данных, чтобы доказать это. Кум Грано Салис.

в любом случае, я исправил это, явно сообщив SystemJS, где живет пакет, если он не могу найти его сам по себе. Так, например, чтобы исправить ошибку import { Store } from '@ngrx/store';, вы можете сделать:

System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: { '@ngrx/store' : '/node_modules/@ngrx/store/dist/store.js' } // <-- this!
});
System.import('src/boot')
      .then(null, console.error.bind(console));

, потому что Store модуль живет в этом файле. Таким образом, SystemJS находит его, и модуль может быть импортирован просто отлично.

19  
2016-02-15 22:12:23

у меня была аналогичная проблема импорта rx.js Я закончил тем, что решил его, добавив путь к System.config()

System.config({
  defaultJSExtensions: true,
  paths: {
    'rx' : 'lib/rx.js'
  }
});
4  
2015-12-21 17:52:57

у меня была аналогичная проблема, я настроил сервер IIS, чтобы переписать все пути к index.html для того, чтобы маршрутизатор работал правильно. (обновление страницы возвращало 404. Читайте подробности в этом ответе)

как @dchacke указывает, это потому что System.js ждет . Это действительно производит странное сообщение, начинающееся с SyntaxError: Unexpected token <. Временное отключение перезаписи URL позволяет мне видеть реальная проблема.

при импорте дочерних компонентов в родительские компоненты System.js может запутаться, если пути не объявлены должным образом.

parent.component.ts имеет следующий импорт:

import { ChildComponent } from './childComponentFolder/childComponent';

выдает эту ошибку:

GET app/parentComponentFolder/childComponentFolder/childComponent.js 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading app/parentComponentFolder/childComponentFolder/childComponent.js

изменение пути инструкции импорта от относительного к абсолютному пути решает проблему:

import { ChildComponent } from 'app/childComponentFolder/childComponent';

отображение пути в системе.конфиг.js также может сделайте трюк, но мне сложнее поддерживать, потому что не совсем понятно, почему работает путь импорта или нет. Теперь я могу раскомментировать правила перезаписи в Web.config и все работает просто отлично.

Edit:

похоже, что TypeScript transpiler очень разборчив в путях. Только относительные пути проходят без ошибок броска:

в основном вам нужно сделать шаг назад одну папку из parentComponentFolder/ до app/ папка.

import { ChildComponent } from '../childComponentFolder/childComponent';

4  
2017-05-23 15:18:17

я столкнулся с этой же проблемой. Я исправил это, реализовав следующее в моем индексе.html (Примечание: я помещаю зависимости angular2 js в папку' lib'):

<html>

<head>
    <title>Desktop main</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
   
    <script src="~/lib/anguar2/angular2-polyfills.js"></script>
    <script src="~/lib/es6-shim/es6-shim.js"></script>
    <script src="~/lib/systemjs/system.src.js"></script>
    <script>

    System.config({
        defaultJSExtensions: true

    });

    </script>
    <script src="~/lib/rxjs/rx.js"></script>
    <script src="~/lib/anguar2/angular2.dev.js"></script>
    <script>
    System.import('app/boot');
    </script>
</body>

</html>
приложение.деталь.ТС выглядит так: 

import {Component} from "angular2/core";

@Component({
    selector: "my-app",
    template: "<h1>Hello Angular 2</h1>"
})
export class AppDesktopComponent {
    
    
}

жаль, что я не могу сказать вам, почему это работает и angular2 quickstart boilerplate не делает.

2  
2015-12-21 19:45:43

я получал аналогичную проблему:

Unexpected token ]

при запуске сервера. Оказывается, у меня была конечная запятая в моем tsconfig.json:

...
  "files": [
    "app.ts",
    "typings.d.ts",
    "abc-vt/abc-vt",   <-Doh!
  ]

урок: не просто предполагайте, что это ошибка в исходном коде-проверьте ваши файлы конфигурации, а также.

2  
2016-04-12 13:33:11

в моем случае я случайно включил расширение файла в импорт...

import {SomeComponent} from 'some.component.ts';

и (очевидно!) так и должно было быть...

import {SomeComponent} from 'some.component';
2  
2016-05-18 11:25:46

конечная запятая в вашей конфигурации systemjs вызовет это.

Регистрация systemjs.config.ts файл и убедитесь, что json действителен.

2  
2016-09-19 22:57:13

у меня была похожая ошибка. Я получил:

Uncaught SyntaxError: Unexpected token =  (index):16

потому что я бросил точку с запятой в конце @Input() на .

надеюсь, это кому-то поможет.

2  
2016-11-06 00:59:54

основная причина этой проблемы заключается в том, что файл, который вы пытаетесь импортировать файл html, а не JS файл. Вы можете увидеть это, используя вкладку "Сеть" в Chrome, чтобы посмотреть на файл, который он фактически импортировал.

моя проблема не была решена с помощью указанных выше методов. Для меня это произошло потому, что я маршрутизировал все маршруты по умолчанию до индекса.html-страница, так я получаю угловую глубокую привязку, работающую в Visual Studio Enterprise. Когда я запросил файл без расширения, и он не мог найти этот файл, он будет служить индексом по умолчанию.html-страница, которая начинается с символа

поддавки для меня было то, что когда я поставил полный путь к файлам, это будет работать.

во всяком случае, чтобы исправить это, мне пришлось добавить маршрут игнорирования для папки node_modules в моем RouteConfig.cs файл:

public static void RegisterRoutes(RouteCollection routes)
{
   routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   routes.IgnoreRoute("node_modules/{*pathInfo}");

}
1  
2017-07-06 04:47:39

я получил то же сообщение об ошибке. Подобно тому, что упоминали другие люди, мой случай был вызван переписыванием url, обслуживающим html вместо javascript, ожидаемого angular.

Я использую lite-server / browser-sync для разработки и размещения моего приложения локально. Чтобы угловая маршрутизация работала правильно, я использовал

var history = require('connect-history-api-fallback')

для перенаправления соответствующей навигации pushState обратно в индекс.формат html. В конечном счете, неправильная конфигурация в моем импорте typescript привела к одному запросу не распознается как JS-файл и вместо этого перенаправляется в индекс.формат html. Трудность заключалась в том, как это выяснить.

я обнаружил, что вы можете включить подробное ведение журнала для резервного копирования connect-history-api.

 middleware: [history({
        index: '/src/index.html',
        verbose: true
    })]

который затем привел меня, чтобы найти виновника, сканируя журнал для перенаправленных записей:

Not rewriting GET /node_modules/systemjs/dist/system.js because the path includes a dot (.) character.
Not rewriting GET /node_modules/core-js/client/shim.min.js because the path includes a dot (.) character.
Rewriting GET /src/culprit to /src/index.html
0  
2016-09-08 09:43:08

для тех, кто прочитал все это и не нашел ничего интересного, у меня может быть другой вариант для вас.

Я столкнулся с той же проблемой, потому что веб-сайт был развернут на более чем 1 веб-сервере. Проблема была связана с различными сборками, развернутыми на некоторых серверах.

в принципе, у вас есть 1 сервер с одной версии и другой сервер с другой версией. Итак, конечно, когда вы балансируете нагрузку, вы, вероятно, получите 404 на некоторых ресурсах на некоторых серверах потому что версии разные (вспомним главное.xxxxx.js, где xxx отличается при каждой сборке). И если вы настроили свой веб-сервер для возврата веб-страницы 404 - что часто случается, я думаю-вы получаете некоторый HTML вместо файлов JS, а затем неожиданный токен.

Итак, Проверьте свои версии на каждом сервере !

0  
2017-06-02 13:09:15

для меня эта ошибка была вызвана тем, что я обслуживал свой угловой интерфейс с простым сервером Node express как таковым:

app.use('/*', (req, res) => {
    res.sendFile(path.join(__dirname,'index.html'));
});

но я забыл указать, что все статические файлы должны быть из текущего каталога в строке:

app.use(express.static(__dirname));

поэтому каждый вызов статического актива возвращает индекс.формат html. Ой. Как только я добавил эту строку, все было в порядке. Надеюсь, что это может помочь кому-то вниз по линии :)

-1  
2017-09-17 13:59:38

Comments

    Ничего не найдено.
Click here to cancel reply.