.ts is not processed as a TypeScript module

Question

Here is a SystemJS + TypeScript plunk created from official Angular plunk .

He throws

(SystemJS) SyntaxError: Missing initializer in const declaration

in eval ()

...

and obviously evaluates the .ts file as normal JavaScript when the file does not contain import or export statements:

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> ... 

But the same plunk is excellent when the file has ES6 module signs:

main.ts

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

Obviously, if the file has the extension .ts, I would prefer to evaluate it as TypeScript, whether it imports something or not.

Why is this happening in this setting? How can this be fixed?

Answer 1

SystemJS will probably work as follows:

 > 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 definition

If the module format is not installed, automatic regular expression detection. The detection of this module is not always completely accurate, but is well suited for most use cases.

If automatic detection fails, you must specify it manually.

Method 1: Add Hints to the Source

ex1: add export (from question)

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

ex2: add export

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

Method 2. Add format configuration

ex1: packages / path / meta / template (./main.ts or. /*.ts)/ format

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

ex2: packages / path / format

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

ex3: meta / pattern (application / prefix required) / format (external packages)

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

Answer 2

Disclaimer: This comes from a bit of debugging, I don't really experience this subject, so any corrections in my understanding are welcome.

SystemJS will only compile if the format of the module is defined correctly. If the format of the module is not informed, it uses fast heuristics to try to determine it (mostly a regular expression over the source code). This heuristic works when you have an import statement and fail when you do not. The actual fix for your setup is to explicitly add the module format to the package as follows:

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