Angular 2 import custom component NOT FOUND

Question

I'm attempting to import a newly created component which is in the same root directory as the app.ts.

/
-app.js
-mock_feed_service.js

In app.ts:

import { mock_item_feed } from 'mock_feed_service';

Error message:

angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:63342/mock_feed_service(…)

The issue seems to be that the mock_feed_service call is missing the .js extension so the browser can't find it.

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js',
            },
        },
    });
    System.import('app.js')
            .then(null, console.error.bind(console));
</script>

I have attempted to add: "defaultJSExtensions": true,

Which appears to fix the NOT FOUND issue for this module, but then breaks all my other imports (rxjs/angular2 etc).

e.g.

system.src.js:1085 GET http://rxjs/Rx.js 404 (Not Found)

Answer 1

According to your SystemJS configuration, you need to put your TypeScript files under an app folder. Otherwise the configuration specified in the packages block (app entry) won't apply and the js extension won't be appended to module names to find out corresponding JS files.

And import your component this way:

import { mock_item_feed } from './mock_feed_service';

Also update the way you import the app module:

<script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
    }
  });
  System.import('app/app') // <-----------
        .then(null, console.error.bind(console));
</script>