title: How to Resolve Typescript Error Unexpected Token Import?
body: <p>I'm writing an Angular 4 theme for Wordpress 4.8 to be used on mainly Edge and Chrome browsers.  My test script fails on test.ts with the error:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token import at src/test.js:1
  </code></pre>
  
  <p>My tsconfig.json in the \src folder is as follows:</p>
  
  <pre><code>{
    "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2016", "es5", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
  }
  </code></pre>
  
  <p>tsconfig.json at the root level is:</p>
  
  <pre><code>{
    "compileOnSave": false,
    "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
       "node_modules/@types"
       ],
    "lib": [
       "es2016",
       "dom",
       "es5"
       ]
    }
   }
  </code></pre>
  
  <p>My test.ts consists of:</p>
  
  <pre><code>import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from 
  "@angular/platform-browser-dynamic/testing";
  import {getTestBed} from "@angular/core/testing";
  
  declare var _karma_: any;
  declare var require: any;
  
  _karma_.loaded = function () {};
  
  getTestBed().initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting()
  );
  
  const context = require.context('./', true, /\.spec\.ts$/);
  
  context.keys().map(context);
  
  _karma_.start();
  </code></pre>
  
  <p>What would be the best approach to resolve this error?  </p>