Angular 2 System Config Paths Importing Custom Javascript Modules

Question

How do I import javascript files as modules in Angular 2?

Right now in my system config I have:

System.config({
  paths: {
    lodash: '../../node_modules/lodash/index.js',
    constants: 'app/constants.js'
},

I have a file constants.js which is:

import {Injectable} from 'angular2/core';

@Injectable()
export class Constants{
  api_dir: string;

  constructor(){
      var prod = false;

      if (prod){
          this.root_dir = 'http://google.com/'
      } else{
          this.root_dir = 'http://localhost/'
      }
      this.api_dir = this.root_dir + 'api/'
    }
  }

In one of my components I have:

import {Constants} from 'constants';

Which gives me the error:

Cannot find module 'constants'

How do I turn a javascript file into a module so I can always import it without giving the relative path to it?

Ludohen · Accepted Answer · 2016-03-10 08:39:05Z

1

If you're using typescript you would have to declare your module in a .d.ts file first. I supposed the error you're getting is a compiler one, not a runtime one.

// ./constants.d.ts
declare module "constants" {
  // ... export whatever
  export interface IConstant {
    root_dir: string;
    api_dir: string;
  }
}

Otherwise your System config looks OK. If you want to avoid writing file extension everywhere, you can use defaultJSExtensions = true config option.

answered Mar 10, 2016 at 8:39

Ludohen

8,5751 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-03-10 07:06:17Z

0

I think that you should use explictly SystemJS API to register your module. Something like that, in your app/constants.js file:

System.register([], true, function(require, exports, module) {
  exports.Constants = {};
});

answered Mar 10, 2016 at 7:06

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

1 Comment

Ludohen Over a year ago

This would suppose a register output format which isn't the right way to write a module as it should be loader/bundler agnostic.

Collectives™ on Stack Overflow

Angular 2 System Config Paths Importing Custom Javascript Modules

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related