systemjs: problem with dots in filenames

The code below works fine for mapping all imported modules in y app folder to *.js. However, if the file name has a dot in it, it does not work. Appears to be a bug. Or is there a better way to solve it?

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

import {FooComponent} from './foo.component'; tries to load with no js extension, so it gets a 404. If I renamed to ./foo-component then it works

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 29 (12 by maintainers)

Links to this issue

javascript - Angular2 Typescript app throws 404 on components when js extension not specified - Stack Overflow

Commits related to this issue

defaultExtension to always apply, loader meta to skip package defaultExtension (#756) — committed to systemjs/systemjs by guybedford 9 years ago
defaultExtension to always apply, loader meta to skip package defaultExtension (#756) — committed to systemjs/systemjs by guybedford 9 years ago

Most upvoted comments

Sure, no problem at all!

Web workflows today always do require some boilerplate. Project scaffolding tools can be useful here. jspm is also a project for SystemJS that aims to give the full out-of-the-box experience.

That said, the newest feature in SystemJS is exactly about this configuration problem, and you’ve just inspired me to make a couple of changes here as well.

With this feature, instead of having to write:

System.config({
  map: {
    angular: 'node_modules/angular2'
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'angular': {
      defaultExtension: 'js',
      main: 'index.js'
      // ... etc package configuration ...
    }
  }
});

One can store the configuration in the package.json file within Angular itself, and only write:

System.config({
  map: {
    angular: 'node_modules/angular2'
  },
  packageConfigPaths: ['node_modules/*/package.json'],
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  }
});

That is, the loader would dynamically request the config by loading the package.json file for Angular. The wildcard could also be omitted for the full angular package config path here.

In this way, the SystemJS package configuration then becomes a package.json convention.

This is very new still, and not released yet, so would be interested to hear what you think.

guybedford on Sep 4, 2015