Angular2 Typescript app throws 404 on components when js extension not specified

Question

I just started to play around with Angular2, and ran into a weird component file extension problem:

Let\'s use the 5 minutes quickstart demo from angular.io (I\'ll repro

Answer 1

after trying many other solutions suggested by others, I found out it can case by dots in filenames and these two solutions worked for me. first:

defaultJSExtensions: true,

but defaultJSExtensions is a property that will be deprecated in future and second:

packages: {
            '.': {
                defaultExtension: 'js'
            }
        }

Answer 2

In my boot.ts file I changed this line:

import {AppComponent} from './app.components'

and it works. I reported to Google today as well.

Answer 3

In my case, it is resolved when added module.id

@Component({
    ***moduleId: module.id,***
    providers : [MyService],
    templateUrl: 'sandbox.component.html',
})

Answer 4

I had the same error with chrome, after pulling my hair out for a while I tried turning off adblock and it worked after that. If you have adblock, it's probably the culprit

Answer 5

You can configure the path to your app folder. In my case, I'm using angular 2 to produce a mobile version of our app and had to configure System like so:

System.config({
            paths: {
                'app/*': './js/mobile/dist/*'
            },
            packages: {        
              app: {
                format: 'register',
                defaultExtension: 'js'
              }
            }
          });
          System.import('app/main')
                .then(null, console.error.bind(console));

As you can see, I decided to map "app" to "dist" where I have my compiled js files to keep them separate from the ts files.

Answer 6

This problem may be caused by JetBrains WebStorm when refactoring files to new locations. It seems to append the .ts extension on imports.

So, keep your new files in their places but check every file's imports.

All of your imports should resemble this

import {MyComponent} from './Components/MyComponent';

And not this

import {MyComponent} from './Components/MyComponent.ts';