Karma template import not working with ES6 (SystemJS)

[linnett]

I posted an issue on the SystemJS text plugin with regards to the plugin not working correctly in ES6.

This is the ticket:

"I've managed to get this plugin to work really well with directives but when I try and use it in a karma test, it doesn't seem to work (I am using JSPM).

import t from './template.html!text';

This doesn't work, so I tried importing the plugin at the top too:

import 'systemjs/plugin-text'; import t from './template.html!text';

This too doesn't work. Is there something else I need to do to enable this to work? There is no error unfortunately - the tests just do not ever run. Thanks"

Original here: The original can be seen here: https://github.com/systemjs/plugin-text/issues/15.

Just wondering if this is something anyone can help with?

[linnett]

Can anyone help with this please?

[Quirksmode]

I am also having this exact same problem, any help really appreciated

[maxwellpeterson-wf]

There's no 404 error or anything? If you run in debug mode can you see any kind of request for that file being made?

[Pencroff]

Try use karma-ng-html2js-preprocessor for templates main changes it's declaration something like:

files: [
            'jspm_packages/github/angular/[email protected]/angular.js',
            'jspm_packages/github/angular/[email protected]/angular-mocks.js',

            'app/**/**/*.html'
        ],

in karma config. All other settings from documentation

[mhipszki]

@linnett I had the same problem and it turned out that whilst running the tests, JSPM / SystemJS was not able to find the text plugin (hence I've got a 404)

I was missing the correct paths from karma.conf.js pointing to the github* packages, here's the error:

08 11 2015 09:38:59.021:INFO [karma]: Karma v0.13.15 server started at http://localhost:9876/
08 11 2015 09:38:59.044:INFO [launcher]: Starting browser PhantomJS
08 11 2015 09:39:00.459:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket Z53Uu3uR072ghBgIAAAA with id 81750016
08 11 2015 09:39:00.553:WARN [web-server]: 404: /base/jspm_packages/github/systemjs/[email protected]
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR: 'Potentially unhandled rejection [6] Error: XHR error (404 Not Found) loading http://localhost:9876/base/jspm_packages/github/systemjs/[email protected]
    Error loading http://localhost:9876/base/jspm_packages/github/systemjs/[email protected]
    Error loading http://localhost:9876/src/scripts/example.txt!http://localhost:9876/base/jspm_packages/github/systemjs/[email protected] as "src/scripts/example.txt!text" from http://localhost:9876/test/example.spec.js
    at http://localhost:9876/base/dist/jspm_packages/system.src.js?8a7dc2b121cf30cbcb09362dbeab69432cb0db29:740
    at tryCatchReject (http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1257)
    at runContinuation1 (http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1216)
    at http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1037
    at http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:895
    at http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:171
    at http://localhost:9876/base/dist/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:136'

I have a defined baseUrl in my package.json

// package.json

  "jspm": {
    "directories": {
      "baseURL": "dist"
    },
    "configFile": "config/jspm.conf.js",
    "dependencies": {
      "text": "github:systemjs/plugin-text@^0.0.3"
    },
    "devDependencies": {}
  }

and you have to let Karma know that you have your packages under that baseUrl

// karma.conf.js

        jspm: {
            config: 'config/jspm.conf.js',
            loadFiles: [
                'node_modules/phantomjs-polyfill/bind-polyfill.js', //necessary for PhantomJS (doesn't have Function.bind)
                'test/**/*.js'
            ],
            serveFiles: [
                'src/scripts/**/*.js',
                'src/scripts/**/*.txt'
            ],
            paths: {
                'github:*': 'base/dist/jspm_packages/github/*'
            }
        },

        proxies: {
            '/src/': '/base/src/',
            '/test/': '/base/test/',
            '/jspm_packages/': '/base/jspm_packages/',
            '/node_modules/phantomjs-polyfill/': '/base/node_modules/phantomjs-polyfill/'
        },

notice the /dist/ in 'github:*': 'base/dist/jspm_packages/github/*', for npm packages you should have a similar path set, so that Karma will understand from where to load the dependencies / installed plugins, in my case the systemjs text plugin

also notice the 'src/scripts/**/*.txt' must be served as well

hope this helps! :)

[linnett]

@mhipszki that's great help! Thank you for sharing your solution. I will give it a go