Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 : System import app not working without file extension

I'm pretty new with Angular and systemjs, but I'll try to be more specific as possible.

I'm working with angularjs2 and typescript. I compile my .ts files with a tsconfig.json. Here is my config:

enter image description here

Next, I want to bootstrap my application through my index.html with systemjs. But my import doesn't accept init without extension (below, my init, that actually work) :

    System.config({
        transpiler: 'typescript'
    });
    System.import('src/app.ts');

I'm forced to mention the .ts extension (same problem in ts files when I want to import handmade components).
Am I forgetting something? Documentation is a bit rough for beginners concerning first configurations.
Moreover, I've got all my scripts called in <head> (system.js, typescript.js, angular2.dev.js)

like image 343
KCarnaille Avatar asked Nov 24 '15 14:11

KCarnaille


3 Answers

I had a similar issue, only difference is that I'm not using angular

@Nicolas pointed into the right direction, you need to add "defaultExtension", for me the following configuration did the trick:

packages: {
    '.': {
        defaultJSExtensions: 'js'
    }
},

You can find out more about how to configure systemjs on github

UPDATE: comment from Dai:

Since systemjs 0.19 the property is defaultExtension and it defaults to *.js, so it isn't necessary to define packages members unless you're using non-default settings.

like image 53
chrisweb Avatar answered Oct 13 '22 23:10

chrisweb


I'm study the new version of AngularJS and everytime that I needed to set up t SystemJS I use this configuration in my index page.

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

You need say what is your extension file to SystemJS load your modules, I hold it helped you.

like image 4
Nicolas Takashi Avatar answered Oct 13 '22 23:10

Nicolas Takashi


On the angularjs Quickstart they do not mention that the packages names MUST match. I took me a while to figure it out.

System.config({
    packages: {        
      WHATEVER: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
System.import('WHATEVER/app');
like image 2
CESCO Avatar answered Oct 13 '22 21:10

CESCO