Angular 2 not rendering dependancy links with file extensions

Question

I am getting the following errors while running my app:

It seems to be looking for ./app.component, rather than ./app.component.js

Here is my main.ts file:

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

What have I done wrong to configure the dependencies here? NB: If I change the references to import { AppComponent } from './app.component.js';, then the error goes away and I am faced with more of the same errors for other references.

EDIT:

One of the comments has suggested that there might be an issue with my system.config(), which I think sounds very plausible, however, this is and excerpt from my index.html file, which I can't see any issues with?

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

The problem is in your System.config(), probably missing a `defaultExtension` or similar. Post your config and see the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html) (look for *SystemJS configuration*) — Eric Martinez, Mar 24 '16 at 01:30
@EricMartinez, I have set up my System.Config, but I still get these issues. Please see my index.html file I have added to the question, is that ok? — George Edwards, Mar 24 '16 at 09:18

OschtärEi · Accepted Answer · 2016-03-24T13:08:31.550

Your mistake is probably that you have :

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

instead of

<script>
  System.config({
    packages: {       
      "client/dev": { // this line changed, here the directory where your generated `js` files are, has to be specified 
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('client/dev/main')
        .then(null, console.error.bind(console));
</script>

I had exactly the same problem as you when I started ;)

Also the zone error should disappear if you use the newest angular beta build (12).

This has thrown up a new issue [here](http://stackoverflow.com/questions/36186425/routing-not-working-in-angular2), if you get a chance, I would be really grateful for your input. — George Edwards, Mar 24 '16 at 21:18

Angular 2 not rendering dependancy links with file extensions

EDIT:

1 Answers1