Setting up Karma for an angular library

I am currently building an Angular library, and I wanted to be able to run some tests. After following these instructions I managed to set up everything properly and actually be able to run my tests.

Main question

Although everything runs properly something awkward happens. When I run npm test next to every .ts file a .js file is generated. Normally all the d.ts and the one big .js files go inside a dist folder that projects using the library use. So does anyone know from where could these javascript files are generated, and if they are indeed needed, since all this code already exists so to speak in the dist folder.

Bonus question

Not as important as the above, all the test results are displayed in the terminal, whereas the browser displays only:

Karma v1.4.1 - connected Chrome 61.0.3163 (Mac OS X 10.12.6) is idle

So is there a nice fix to display my test as nicely as the angular-cli does out of the box?

Note that after doing my homework I did not find something relative online, and I don't want to upload a bunch of unpleasant jsons. If anyone has an idea on the direction of the problem I will be happy to include code.

The basic structure of my library was generated by this

Edit: karma.config.js

module.exports = function(config) {
  config.set({
     basePath: '',
    frameworks: ['jasmine', 'karma-typescript'],
    files: [
    'init-test-bed.spec.ts',
    'src/**/*.ts'
    ],
    exclude: [
    ],
    preprocessors: {
         '**/*.ts': ['karma-typescript']
    },

    karmaTypescriptConfig: {
      bundlerOptions: {
        entrypoints: /\.spec\.ts$/,
        transforms: [
        require('karma-typescript-angular2-transform')
        ]
    },

    compilerOptions: {
        lib: ['ES2015', 'DOM']
    }
},
    reporters: ['progress',  'karma-typescript'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
})
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "rootDir": "./src",
     "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015",
      "dom"
    ],
    "skipLibCheck": true,
    "types": [
      "jasmine",
      "node"
    ]
  }
}

Finally the test runs this script

"test": "tsc && karma start"

You are getting .js file for every .ts file because of your typescript configuration. You can change your configuration in tsconfig.json to tell compiler that write a single file or in a folder and add all script there.

"outDir": "../out-tsc/spec" --> will add all output javascript files in a single folder.

For your second question, When karma runs internally it runs webdriver and connect to the browser. That is the reason you see localhost:9876 or similar url open with a debug button at the right.

While the webdriver is running you can also debug any bug situation in the browser and lot more.