Системная ошибка синтаксиса js, IE11

У меня есть приложение angular 2, работающее внутри firefox и chrome, не так много внутри (вздох) IE. Основываясь на моей трассировке стека, похоже, что возникла проблема с настройкой System js.

Вот описание ошибки, которое я вижу в своей веб-консоли.

Error: (SystemJS) Syntax error
SyntaxError: Syntax error
   at ZoneDelegate.prototype.invoke (http://localhost:8050/node_modules/zone.js/dist/zone.js:230:13)
   at Zone.prototype.run (http://localhost:8050/node_modules/zone.js/dist/zone.js:114:17)
   at Anonymous function (http://localhost:8050/node_modules/zone.js/dist/zone.js:502:17)
Evaluating http://localhost:8050/app/app.module.js
Error loading http://localhost:8050/app/app.module.js as "./app.module" from http://localhost:8050/app/main.js

Похоже, он не может найти мой

app/app.module.js

Но, как я уже сказал, у меня не было этой проблемы с Firefox и Chrome.

Я немного поискал в Интернете и нашел кое-что о прокладках полифилла... поэтому я попытался включить следующее в свой index.html.

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>

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

Редактировать :

Я обнаружил ошибку 404, которую получаю в веб-консоли IE 11.

Похоже, запрос пытается попасть

URL Protocol    Method  Result  Type    Received    Taken   Initiator   Wait‎‎  Start‎‎ Request‎‎   Response‎‎  Cache read‎‎    Gap‎‎
/node_modules/systemjs/dist/Promise.js.map  HTTP    GET 404 text/html   210 B   16 ms   XMLHttpRequest  140 0   16  0   0   5266

или Promise.js.map в папке systemjs, и у меня его там нет.

Итак, несколько новых вопросов

1) Почему этот запрос не выполняется/не требуется в других браузерах, которые я пробовал?

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

Я также заметил, что после удаления/комментирования

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

Запрос к Promise.js.map больше не выполняется. Поэтому я не уверен, что именно делает полифил, но, похоже, он вводит этот запрос, который приводит к ошибке 404.

Редактировать 2:

Я попытался переключить свою цель ES6, найденную в моем tsconfig.json, на цель ES5, как подробно описано здесь. Теперь, когда я пытаюсь выполнить сборку, я получаю множество других проблем, трассировку стека можно хорошо описать с помощью этот пост.

При переключении на цель ES5 у меня нет доступа к Map, Promise и т. д.

Я попытался посмотреть на некоторые исправления для этого вопроса, например, добавив это

///<reference path="node_modules/angular2/typings/browser.d.ts"/>

в начало моего файла main.ts, но у меня нет папки angular2, вместо этого у меня есть папка @angular. А директорию типизации нигде не найти. Я создаю/разворачиваю эту штуку с помощью gradle, поэтому я не смогу установить npm на свой локальный компьютер и положить этому конец...

edit 3: я предложил награду за это. Недавно я попробовал другую шайбу.

<script src="/node_modules/core-js/client/shim.min.js"></script>

Это все еще не работает для меня. Я получаю ту же исходную синтаксическую ошибку.

Глядя на мой файл main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Если я закомментирую 3-ю строку, ошибки в веб-консоли исчезнут, но теперь, конечно, мое приложение не загружается.

Просто для удовольствия, вот мой tsconfig.json

{                                                                                                                                                                                                                  
  "compilerOptions": {                                                                                                                                                                                             
  "target": "es6",                                                                                                                                                                                               
  "module": "system",                                                                                                                                                                                            
  "moduleResolution": "node",                                                                                                                                                                                    
  "experimentalDecorators": true                                                                                                                                                                                 
},                                                                                                                                                                                                               
  "exclude": [                                                                                                                                                                                                       
    "node_modules",                                                                                                                                                                                                
    "jspm_packages"                                                                                                                                                                                                
  ]                                                                                                                                                                                                                
}  

person Zack    schedule 08.02.2017    source источник
comment
вы получаете SyntaxError, поэтому никакой полифилл не поможет. Полифиллы могут добавлять отсутствующие функции/объекты в старые браузеры, например: Map, Set, Array.prototype.forEach. Чтобы справиться с синтаксической ошибкой, ваш код должен быть транспилирован - обычно это делается с помощью Babel или Google Closure. Для отладки лучше всего проверить, что именно вызвало проблему, в вашей трассировке стека это выглядит как localhost:8050/node_modules/zone.js/dist/zone.js - строка: 230   -  person chrmod    schedule 09.02.2017
comment
Я обновил свой вопрос некоторыми новыми идеями.   -  person Zack    schedule 09.02.2017


Ответы (1)


Наконец-то я это понял, это было непросто. Мне нужно было исправить несколько разных вещей.

1) Мне нужно было установить «цель» в tsconfig.json на «es5»

{                                                                                                                                                                                                                  
  "compilerOptions": {                                                                                                                                                                                             
      "target": "es6",       ==>    "target" : "es5",                                                                                                                                                                                           
      "module": "system",                                                                                                                                                                                            
      "moduleResolution": "node",                                                                                                                                                                                    
      "experimentalDecorators": true                                                                                                                                                                                 
  },                                                                                                                                                                                                               
  "exclude": [                                                                                                                                                                                                       
      "node_modules",                                                                                                                                                                                                
      "jspm_packages"                                                                                                                                                                                                
  ]                                                                                                                                                                                                                
}

2) Мне нужно было включить правильную прокладку в файл index.html

<script src="/node_modules/core-js/client/shim.min.js"></script>

После выполнения этих двух вещей у меня все еще была огромная трассировка стека на этапе переноса TS -> JS в моем процессе сборки с такими вещами, как это

node_modules/rxjs/operator/toPromise.d.ts(7,59): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,69): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(9,9): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'.

3) Последний шаг, мне нужно было явно включить эту ссылку

/// <reference path= "../node_modules/typescript/lib/lib.es6.d.ts" />

В верхней части моего файла app/main.ts.

После выполнения этих трех шагов и пересборки проекта все наконец заработало в IE.

Благодаря этому сообщению и этот пост за то, что помогли мне.

person Zack    schedule 13.02.2017
comment
Без проблем. Вот почему я всегда отвечаю на свои вопросы, если могу :) - person Zack; 29.03.2017
comment
Что вы сделали, чтобы исправить шаг 2? Я имею в виду трассировку стека - person Von_Kavalier; 20.04.2017