SystemJs, Angular2 importing files

Question

this is my systemJs config in index.html

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });

  System.import('./ts/app.js')
        .then(null, console.error.bind(console));
</script>

app.js

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

import {loginDirective} from './login-directive.js';

@Component({
selector: 'loginForm',
directives: [loginDirective],
templateUrl:'./view/login_view.html'
})

export class loginForm{

};

bootstrap(loginForm);

Why I have always define .js in import (login-directive.js) or in system js app.js, not just login-directive and app if defaultExtension is set to "js"?

tnx miha

Answer 1

In fact, with your SystemJS configuration, format = 'register' and defaultExtension = 'js' only apply to module that starts with app/.

System.import('app/boot')
    .then(null, console.error.bind(console));

or if the component.js is located is located under the app folder (I consider here that the import is done within a module under app , for example the app/boot module):

import { ... } from './component';

Here is the structure:

app/
  boot.js (compiled from boot.ts)
  component.js (compiled from component.ts)

Otherwise SystemJS will try to load module directly with their names

System.import('ts/app.js')
    .then(null, console.error.bind(console));