Angular 2 - Karma cannot find the external template or style file

Question

File structure (it is the quickstarter project from Angular 2 official site ):

In the very beginning, when starting Karma, I got errors saying cannot find two files under /@angular/...

I found I had to change the path in systemjs.config.js, to make it work:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/base/node_modules/'  <<<<<<<------ Vincent: to be able to run the test, 
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

So, at least Karma works now, I can run other tests. However, the component tests fail, because it cannot find the external template and style files of the component.

I once was able to open the html by opening up: http://localhost:9876/base/src/app/app.component.html in my Chrome, and cannot find it anymore.

Tried this answer: https://stackoverflow.com/a/39909929/3634727 , and all the solutions in here: Error: Uncaught (in promise): Failed to load login.component.html , no luck.

My number 1 question is, let's put the settings aside, what is the correct URL to open the app.component.html in my browser? http://localhost:9876/src/app/app.component.html does not work.

Answer 1

I solved it and would like to share what I found.

First thing first, to answer my own No.1 question, the URI ( http://localhost:9876/base/src/app/app.component.html ) is correct, Karma solves the file through this URI. After re-booting my PC, I can access it by opening it directly in my Chrome.

The root path which Karma serves is different from that root path for running the app, so, a good practice is to use relative path for external template & style files in the component's annotation, like:

// imports...

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [RuntimeSettingsService]
})
export class AppComponent implements OnInit {
    //...
}

It works with the settings of root path in both cases. For more details, please refer to this blog: Run Unit Tests On Angular 2 Quick-Start Example With Jasmine & Karma .