Not working with typescript

kosz commented 9 years ago

Does not seem to work with typescript files. *.ts files get .js added to their path :

23 07 2015 23:55:18.363:WARN [karma]: No captured browser, open http://localhost:9876/
23 07 2015 23:55:18.370:INFO [karma]: Karma v0.13.3 server started at http://localhost:9876/
23 07 2015 23:55:18.373:INFO [launcher]: Starting browser PhantomJS
23 07 2015 23:55:19.279:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket yEG1qBR1xcB6RFh4AAAA with id 544981
23 07 2015 23:55:19.335:WARN [web-server]: 404: /src/app.ts.js
23 07 2015 23:55:19.336:WARN [web-server]: 404: /src/app.test.ts.js
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  Error loading "src/app.ts" at http://localhost:9876/src/app.ts.js
  Not Found: http://localhost:9876/src/app.ts.js
  at undefined

https://github.com/kosz/karma-jspm-playground here is my setup

npm install && jspm install

npm start shows a server in which jspm loads ts files properly

also tried appending !

 jspm: {
  loadFiles: [
    'src/app.ts!',
    'src/app.test.ts!'
  ]
 },

24 07 2015 00:00:45.508:WARN [watcher]: Pattern "/src/jspmtest/src/app.ts!" does not match any file.
24 07 2015 00:00:45.510:WARN [watcher]: Pattern "src/jspmtest/src/app.test.ts!" does not match any file.
24 07 2015 00:00:45.625:WARN [karma]: No captured browser, open http://localhost:9876/
24 07 2015 00:00:45.632:INFO [karma]: Karma v0.13.3 server started at http://localhost:9876/
24 07 2015 00:00:45.635:INFO [launcher]: Starting browser PhantomJS
24 07 2015 00:00:46.536:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket pZ7HpzvF-szLqflyAAAA with id 41421504
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.001 secs / 0 secs)

kosz commented 9 years ago

It looks like I can get this to work by hacking the adapter.js file in this plugin.

42     function extractModuleName(fileName){
43         return fileName + '!';
44         //return fileName.replace(/\.js$/, "");
45     }

I'm looking for an elegant way to add this functionality and may open a PR.

kosz commented 9 years ago

https://github.com/Workiva/karma-jspm/pull/79

ghost commented 9 years ago

@kosz

in your config.js

"packages": {
        "app": {
            "main": "main", "defaultExtension": "ts", "meta": {
                "*.ts": {
                    "loader": "ts"
                }, "*.css": {
                    "loader": "css"
                }, "*.json": {
                    "loader": "json"
                }, "*.html": {
                    "loader": "text"
                }
            }
        }

kosz commented 9 years ago

@robertbaker I have the following configuration :

System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  "paths": {
    "*": "*.js",
    "github:*": "../jspm_packages/github/*.js",
    "npm:*": "../jspm_packages/npm/*.js"
  },
  "packages": {
    "app": {
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }, "main": "main"
    }
  }
});

error I get :

31 07 2015 20:01:31.320:WARN [web-server]: 404: /base/app/app.ts.js
31 07 2015 20:01:31.324:WARN [web-server]: 404: /base/app/app.test.ts.js
Chrome 44.0.2403 (Mac OS X 10.10.2) ERROR
  Uncaught Error loading "app/app.ts" at http://localhost:9876/app/app.ts.js

I can fix this by handcoding the changes from this pr inside the karma-jspm code in my node_modules.

ghost commented 9 years ago

@kosz me and you should work together on this. I have a TS project with JSPM too.

I have my config at my root and letting jspm transpile (using plugin-typescript), but I also can compile my ts to .build (where I have a dupe of config and jspm_packages).

Trying to get my unit tests to run which are written in ES6, not having any luck with this or karma-systemjs

kosz commented 9 years ago

@robertbaker we could work together. Sadly the most mature configuration I pulled off so far, is within a private code base which I cannot reference.

However the public sources I've used to pull this off are :

my https://github.com/kosz/karma-jspm-playground
Rangle's course on writing Angular 2 like code with Angular 1 https://github.com/rangle/ngcourse-next
the PR I've opened up on this repo : https://github.com/Workiva/karma-jspm/pull/79

My current status is :

working : typescript transpiling in the browser with systemjs
working : typescript/es6 style imports with systemjs in the browser
working : typescript tests with karma-jspm and Chrome ( as long as my PR fix is hardcoded in node_modules :( )
not working : typescript/es6 style imports into spec files with karma-jspm

I'll be available throughout the weekend ( + monday, long weekend here ), and probably will get back at fighting with this issue tonight and tomorrow morning. I'll check back here from time to time. I could also do a Hangout if you'd like and if we sync up online.

ghost commented 9 years ago

Sounds good. I'm busy today, but I plan on tonight and tomorrow trying to get tests running.

Same applies to me but I'm going to strip my project down to a setup I can open source and use for test cases and demos. I'm on hangouts

On Sat, Aug 1, 2015, 7:15 AM Cosmin Ronnin notifications@github.com wrote:

@robertbaker https://github.com/robertbaker we could work together. Sadly the most mature configuration I pulled off so far, is within a private code base which I cannot reference.

However the public sources I've used to pull this off are :

my https://github.com/kosz/karma-jspm-playground

Rangle's course on writing Angular 2 like code with Angular 1 https://github.com/rangle/ngcourse-next

the PR I've opened up on this repo : #79 https://github.com/Workiva/karma-jspm/pull/79

My current status is :

working : typescript transpiling in the browser with systemjs

working : typescript/es6 style imports with systemjs in the browser

working : typescript tests with karma-jspm and Chrome ( as long as my PR fix is hardcoded in node_modules :( )

not working : typescript/es6 style imports into spec files with karma-jspm

I'll be available throughout the weekend, and probably will get back at fighting with this issue tonight and tomorrow morning. I'll check back here from time to time. I could also do a Hangout if you'd like and if we sync up online.

— Reply to this email directly or view it on GitHub https://github.com/Workiva/karma-jspm/issues/78#issuecomment-126918011.

kosz commented 9 years ago

http://blog.rangle.io/unittests/ interesting info here. I think this is related to the issues I was getting a few days ago with karma-systemjs.

Also I'm going to close my PR. A bit sad it was ignored for more than a week. But also I think it's not the required solution. There are plenty of issues with karma,typescript,systemjs combination, I wish the people who have reserved the npm name 'karma-jspm' could give this issue some love.

ghost commented 9 years ago

Agreed.

ryanwischkaemper commented 9 years ago

@kosz @robertbaker Have either of you made any progress on this?

unional commented 8 years ago

@kosz , probably your paths: { '*': '*.js'} cause the issue? The .js is a known issue in systemjs/jspm. A workaround is to do a package to remove it:

packages: {
  'src': { defaultExtension: false },
  'test': { defaultExtension: false }
}

until jspm 0.17.

btw, why you transpile with babel for js and typescript with ts? It seems redundant.

emigre commented 8 years ago

Check this issue in the SystemJS repo. It seems that if defaultJSExtensions is true in the configuration file, typescript files get a .js extension appended; this is for backward compatibility. false is the mode in which things are going to be working from now on, apparently, but jspm won't be adapted to work like that until version 0.17.

dougludlow commented 8 years ago

@Emigre awesome! Thanks for your comment. I was able to get karma-jspm with typescript working.

emigre commented 8 years ago

: ) great!

dougludlow commented 8 years ago

Alas, defaultJSExtensions: false breaks the site though...

unional commented 8 years ago

You can't do defaultJSExtensions: false by itself, not until 0.17. When that is set, then all files are requested as-is, without .js appended to it. Most npm packages reference code in that way, thus breaking the system.

You could (I haven't try myself) add a package config for jspm_packages to set defaultExtension: 'js' to get around it for the time being.

But I would just keep defaultJSExtensions: true for the time being instead.

emigre commented 8 years ago

What I meant is that the default value of defaultJSExtensions is going to change in 0.17. Or something like that - to be honest I've read it somewhere, at some point, and right now I can't remember the details, sorry.

@dougludlow if it helps, I have an example repo with TypeScript, jspm and karma-jspm, maybe it's interesting for you?... Emigre/angular-example

Also I did this yeoman generator that generates a Typescript + jspm + systemjs project: sword-and-sorcery/generator-magic Hope it helps. Cheers

dougludlow commented 8 years ago

@Emigre the issue is that the .js extension is being added to files and so they can't be found. [web-server]: 404: /wwwroot/app/services/drive.service.spec.ts.js

emigre commented 8 years ago

What I did was set defaultJSExtensions: true and then...

  packages: {
    ".tmp": {
      "defaultExtension": "ts"
    },
    "src": {
      "main": "main",
      "defaultExtension": "ts"
    }
  },

...and require typescript files with import Whatever from './myFolder/Whatever';

dougludlow commented 8 years ago

Thanks @Emigre, I've got it working now. My file structure is roughly as follows:

.
├── karma.conf.js
├── package.json
└── wwwroot
    ├── app
    │   ├── app.component.ts
    │   ├── app.component.spec.ts
    │   └── boot.ts
    ├── index.html
    └── config.js

config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "target": "es5",
    "module": "system",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "boot",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        },
        "*.css": {
          "loader": "css"
        },
        "*.scss": {
          "loader": "scss"
        }
      }
    }
  },
  ...
});

karma.conf.js

/* global module */
module.exports = function (config) {
    'use strict';
    config.set({

        basePath: './wwwroot',

        singleRun: true,

        frameworks: ['jspm', 'jasmine'],

        jspm: {
            loadFiles: [
                'app/**/*.spec.ts'
            ],
            serveFiles: [
                'app/**/*!(*.spec).ts'
            ]
        },

        proxies: {
            '/app/': '/base/app/',
            '/jspm_packages/': '/base/jspm_packages/'
        },

        browsers: ['PhantomJS'],
    });
};

For angular2 I had to use PhantomJS2 and include es6-shims in the files collection:

        ...

        files: [
            '../node_modules/es6-shim/es6-shim.js',
        ],

        ...

        browsers: ['PhantomJS2'],

        ..

emigre commented 8 years ago

:smiley: :+1:

computmaxer / karma-jspm

Not working with typescript #78