web-dev-qa-db-ja.com

システムjs構文エラー、IE11

angular 2つのアプリがFirefoxとChromeの内部で動作していますが、(ため息)IEの内部ではそれほど動作していません。スタックトレースに基づくと、Systemjsのセットアップに問題があるようです。 。

これが私のWebコンソール内に表示されるエラーの説明です。

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>

私はこれが迅速な修正を可能にすることを望んでいましたが、そうではないようです。この時点からどのように進めるかについて、誰かが何かアドバイスはありますか?

編集:

IE 11Webコンソール内に入っている404を発見しました。

リクエストがヒットしようとしているようです

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

またはsystemjsフォルダー内のPromise.js.mapですが、そこにはありません。

だから、いくつかの新しい質問

1)私が試した他のブラウザでこのリクエストが行われない/必要とされないのはなぜですか?

2)このファイルは何をしますか、どこで入手できますか?これを取得した後、構文エラーがクリアされるかどうかはまだわかりませんが、開始するのに妥当な場所のようです。

削除/コメントアウトした後も気づきました

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

Promise.js.mapへのリクエストはもう行われません。したがって、ポリフィルが正確に何をするのかはわかりませんが、404をもたらすこのリクエストを導入しているようです。

編集2:

詳細に説明されているように、tsconfig.jsonにあるES6ターゲットをES5ターゲットに切り替えてみました ここ 。さて、ビルドしようとすると、他にもたくさんの問題が発生します。スタックトレースは この投稿 でうまく説明できます。

ES5ターゲットに切り替えると、Map、Promiseなどにアクセスできなくなります...

これを追加するなど、その質問の修正のいくつかを見てみました

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

main.tsファイルの先頭にありますが、angular2フォルダーがなく、代わりに@angularフォルダーがあります。そして、typingsディレクトリはどこにも見つかりません。私はこれをgradleでビルド/デプロイしているので、ローカルマシンにnpmインストールタイピングを実行して1日呼び出すことはできません...

編集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行目をコメントアウトすると、Webコンソールのエラーは消えますが、もちろんアプリはブートストラップされません。

キックのためだけに、これが私のtsconfig.jsonです

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

私はついにこれを手に入れました、それは簡単ではありませんでした。私はいくつかの異なることを修正する必要がありました。

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>

これらの2つのことを行った後でも、ビルドプロセスの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ファイルの上部にあります。

これらの3つのステップを実行してプロジェクトを再構築した後、ようやくIEでの作業が開始されました。

この投稿この投稿 に感謝します。

8
Zack