Unable to serve static html and json assets required by my application

[parky128]

I have just started using the karma-typescript plugin and am having trouble with my asset and html template files being served.

I am seeing 404 errors when such files are being attempted to serve during test runs, here is my karma config:

module.exports = function (config) {
      config.set({
        basePath: '../',
        frameworks: ['jasmine',  'karma-typescript'],
        files: [
          'node_modules/jquery/dist/jquery.min.js',
          'node_modules/angular/angular.js',
          'node_modules/angular-animate/angular-animate.min.js',
          'node_modules/angular-aria/angular-aria.min.js',
          'node_modules/angular-cookies/angular-cookies.min.js',
          'node_modules/angular-material/angular-material.min.js',
          'node_modules/angular-messages/angular-messages.min.js',
          'node_modules/angular-resource/angular-resource.min.js',
          'node_modules/angular-sanitize/angular-sanitize.min.js',
          'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
          'node_modules/angular-ui-router/release/angular-ui-router.min.js',
          'node_modules/angular-local-storage/dist/angular-local-storage.min.js',
          'node_modules/angular-mocks/angular-mocks.js',
          'node_modules/ui-select/dist/select.min.js',
          'node_modules/leaflet/dist/leaflet.js',
          'node_modules/angular-leaflet-directive/dist/angular-leaflet-directive.min.js',
          'node_modules/iso-currency/dist/isoCurrency.min.js',
          'app/**/*.ts',
          {pattern: 'app/**/*.html'},
          {pattern: 'app/**/*.json'}
        ],
        exclude: [
        ],
        preprocessors: {
          "app/**/*.ts": ["karma-typescript"]
        },
        reporters: ["progress", "karma-typescript"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: false,
        concurrency: Infinity
      })
    }

In my console output I am seeing:

09 01 2018 10:49:55.809:WARN [web-server]: 404: /assets/iln18Support/iln18_en.json
    09 01 2018 10:49:55.846:WARN [web-server]: 404: /core/login/login.html
    09 01 2018 10:49:55.847:WARN [web-server]: 404: /partials/common.html
    PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
      SyntaxError: Unexpected token ':'
        at app/assets/iln18Support/iln18_en.json:2

The unexpected token error for my json is confusing, the opening lines for this file are:

    {
      "title_login": "Login",
      "language": "Language",
      "username": "Username",
      "password": "Password",
      "login": "Login"

which is valid json and loads up fine when the app is running normally.

My project directory structure is as follows:

    /app
      /assets
          /iln18Support
            - iln18_en.json
      /components
      /core
      /login
        - login.html
    /partials
      - common.html
    /test
      - karma.conf.js

As you can see in my karma config, I have attempted to include any html and json files living under my app directory.

I must have missed something fundamental here in my setup.

Can someone point out what I am doing wrong please?

[dvdpzzt-webmapp]

I have the same problem. Have you found any solution?

[nipec]

I ran into the same problem and solved it by adding a proxy. I don't know why, but the word "base" seems magical and is making it work for me. Add this to your config:

proxies: {
  "/assets/": "/base/assets/"
}

With this I do not get any HTTP status 404 for images and JSONfiles. Take care, that your translations may run async and even the JSONfile is loaded with HTTP status 200, translations may not work.