Search code examples
typescriptasync-awaitsystemjstranspiler

Systemjs transpile async function with typescript


I'm able to build .ts files manually with tsc tool. And i see wrappers generated for async/await keywords.

But I have problem to setup transpile on the fly using systemjs.

index.htm:

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/1.7.5/typescript.min.js"></script>

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: {
      target: 'es6'
      },
    packages: {
      '': {
        defaultJSExtensions: 'ts'
      }
    }
  });

  System.import('app').catch(console.error.bind(console));
</script>

app.ts:

console.log('hello');

async function run() {
  console.log('world');
}

run();

Error in Developer Console:

SyntaxError: missing ; before statement

See plnkr


Solution

  • The problem was in specifying format 'esm'. Or add some keywords like import to .ts file so systemjs could pick correct loader.

    System.config({
      transpiler: 'typescript',
      meta: {
        'app.ts': {
          format: 'esm'
        }
      }
    });
    
    System.import('app.ts').catch(console.error.bind(console));
    

    Updated plnkr

    Now it works like a charm!