Allow using plain JavaScript with TypeScript ones. Closes vsternbach#28

- TS configuration changes for application and test
- main entry points renamed to plain JS files
- Karma plugin changes to support plain and TS files
- Webpack configuration updates

Thanks!

Author: peterblazejewicz

karma.conf.js

@@ -32,12 +32,12 @@ module.exports = function (config) {
     },
     files: [
       'node_modules/jquery/dist/jquery.js',
-      'src/test.ts'
+      'src/test.js'
       // 'src/**/*.spec.ts'
     ],
     preprocessors: {
       // 'web/**/*.ts': ['webpack'],
-      'src/test.ts': ['webpack'],
+      'src/test.js': ['webpack'],
       // 'test/test.js': ['webpack'],
       // 'web/ui-framework/**/*.js': ['webpack'],
       // 'test/testing-utils/*.ts': ['karma-typescript'],

src/app/hero.ts

@@ -1,4 +1,4 @@
-export class Hero {
+export interface Hero {
   id: number;
   name: string;
 }

src/main.ts src/main.js

@@ -2,11 +2,11 @@
 // Then we find all the tests.
 import { TestBed } from 'angularjs-testbed';
 
-const context = (require as any).context('./', true, /\.spec\.ts$/);
+const context = require.context('./', true, /\.spec\.ts$/);
 context.keys().map(context);
 
 // source files are needed only for coverage
-const source = (require as any).context('./app/', true, /\.ts$/);
+const source = require.context('./app/', true, /\.ts$/);
 source.keys().map(source);
 
 // set strictDi on angular.mock.inject to catch errors if /*@ngInject*/ is missing

src/test.ts src/test.js

@@ -1,7 +1,11 @@
 {
   "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
   "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+    "test.(js|ts)",
+    "**/*.spec.(js|ts)"
   ]
 }

src/tsconfig.app.json

@@ -1,6 +1,10 @@
 {
   "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+  },
   "files": [
-    "test.ts"
+    "test.js"
   ]
 }

src/tsconfig.spec.json

@@ -10,7 +10,7 @@
     "target": "es5",
     "module": "es2015",
     "lib": [
-      "es2017",
+      "es2018",
       "dom"
     ]
   },

tsconfig.json

@@ -39,7 +39,7 @@ module.exports = (env, argv) => {
 
   const config = {
     entry: {
-      app: sourcePath + '/main.ts',
+      app: sourcePath + '/main.js',
     },
     output: {
       path: distPath,
@@ -61,7 +61,7 @@ module.exports = (env, argv) => {
           use: [MiniCssExtractPlugin.loader, 'css-loader', 'resolve-url-loader', 'sass-loader']
         },
         {
-          test: /\.ts$/,
+          test: /\.(js|ts)$/,
           exclude: /node_modules/,
           use: [
             {

webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
         use: ['css-loader', 'resolve-url-loader', 'sass-loader']
       },
       {
-        test: /\.ts$/,
+        test: /\.(js|ts)$/,
         exclude: /node_modules/,
         use: [
           {