Angular 2 - Node - gulp | can not find module .component

Question

I'm trying to build a full typescript app with nodejs in typescript to Angular 2 with a gulp build tool.

The gulp compiles everything from /src to /dist, from .ts to .js with (almost) no problems.

When I start the app everything works fine except:

zone.js:101 GET http://localhost:3000/app/boot.component 404 (Not Found).

But when I change

import { BootComponent } from './app/boot.component';

to

import { BootComponent } from './app/boot.component.js';

I only get a ts error (of course, because he will look for a .ts file), but it works.

How do I get this to work without adding the .js?

this is my sysmtemjs.config.js :

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    '@angular':                   'lib/@angular',
    'rxjs':                       'lib/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'main':                       { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  for (var x in ngPackageNames) {
    packIndex(ngPackageNames[x]);
  }

  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

in my index.html i also have to import main as main.js:

System.import('main.js').catch(function(err){ console.error(err); });

Using SystemJS? If yes, then post your systemjs.config.js file. — Mihai Răducanu
– Mihai Răducanu, Commented Jun 24, 2016 at 21:12

Ian · Accepted Answer · 2016-06-24 21:54:53Z

1

You need to tell SystemJS about your app directory and how to load components from it. Do this by adding the app package in your systemjs.config.js file.

var packages = {
  'main':                       { main: 'main.js',  defaultExtension: 'js' },
  'app':                        { defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
};

answered Jun 24, 2016 at 21:54

Ian

5,9433 gold badges38 silver badges45 bronze badges

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

Comments

Mihai Răducanu · Accepted Answer · 2016-06-25 07:32:31Z

0

var map = {
    'main':                       'my_app_folder',
    '@angular':                   'lib/@angular',
    'rxjs':                       'lib/rxjs'
};

Where my_app_folder is the folder where main.js is found.

answered Jun 25, 2016 at 7:32

Mihai Răducanu

12.6k4 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Node - gulp | can not find module .component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related