.tsファイルはTypeScriptモジュールとして扱われません

Question

Here is SystemJS + TypeScript plunk、official Angular plunk templateから作成しました。

それは

(SystemJS) SyntaxError: Missing initializer in const declaration

at eval()

...

エラーをスローし、明らかにファイルがimportかexport文が含まれていないとき.TSは、として、通常のJavaScriptファイル評価：

main.ts

const foo: boolean = 'foo'; 

console.log(foo); 

を

config.js

System.config({ 
    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
    emitDecoratorMetadata: true 
    }, 
    paths: { 
    'npm:': 'https://unpkg.com/' 
    }, 
    //map tells the System loader where to look for things 
    map: { 

    'app': './src', 
    ... 
    }, 
    //packages defines our app package 
    packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts' 
    }, 
    ... 
    } 
}); 

index.htmlを

... 
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> 
<script src="config.js"></script> 
<script> 
System.import('app') 
    .catch(console.error.bind(console)); 
</script> 
... 

しかし、ファイルがES6モジュールの兆候を持っていthe same plunk is fine：

main.ts明らか

const foo: boolean = 'foo'; 

console.log(foo); 

export default null; 

、もしファイルの拡張子は.tsです。それが何かをインポートするかどうかにかかわらず、それをTypeScriptとして評価することを好むでしょう。

なぜこの設定でこれが起こりますか？どのようにこれを修正することができますか？

Answer 1

SystemJSはおそらく動作します：

> System.import('app') 
    - where is 'app'? 
> map: { 'app': './src', ... 
    - Okay, 'app' is './src' 
    - './src' ?? 
> packages: { app: { main: './main.ts', 
    - Aha, './src/main.ts' 
> ./src/main.ts 
    - Which format?? 
    - 'system' ? -> No 
    - 'esm' ? -> No (if YES, use transpiler: 'typescript') 
    - 'amd' ? -> No 
    - 'cjs' ? -> No 
    - 'global' ? -> Yes -> No transpiler needed. 
> evaluate ./src/main.ts 
    - What is ':string' in JavaScript? 
    - Exception!!! 

Module format detection

When the module format is not set, automatic regular-expression-based detection is used. This module format detection is never completely accurate, but caters well for the majority use cases.

を あなたのセットアップのための実際の修正はそうのようなパッケージに明示的にモジュール形式を追加することです

自動検出に失敗した場合は、手動で指定する必要があります。

方法1：元に

EX1をヒントを追加します（質問から）exportを追加

const foo: boolean = 'foo'; 
console.log(foo); 
export default null; 

EX2：方法2 export

export const foo: boolean = 'foo'; 
console.log(foo); 

を追加：format設定を追加

EX1：パッケージ/パス/メタ/パターン（./ main.ts又は./*.ts）/ format

packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts', 
     meta: { 
     './main.ts': { 
      format: 'esm' 
     } 
     } 
    } 

EX2：パッケージ/パス/ format

packages: { 
    app: { 
     main: './main.ts', 
     defaultExtension: 'ts', 
     format: 'esm' 
    } 
} 

EX3。メタ/パターン（アプリケーション/プレフィックスが必要）/ format（パッケージ外）

meta: { 
    'app/main.ts': { 
     format: 'esm' 
    } 
} 

Answer 2

免責事項：これはちょっとしたデバッグに由来していますが、私は実際にこの分野で経験していないので、私の理解への訂正は歓迎します。

SystemJSは、モジュールフォーマットが適切に決定されている場合にのみ蒸散を行います。モジュールフォーマットが通知されない場合は、高速ヒューリスティックを使用して試して決定します（基本的に、ソース上の正規表現）。 このヒューリスティックは、インポートステートメントがあり、そうでないときに失敗したときに機能します。次のように

app: { 
    main: './main.ts', 
    defaultExtension: 'ts', 
    format:'esm' // << Module format. 
},