Angular2 import path wrong at runtime

Question

I have an angular2 app and at runtime it tries to load a resource from the wrong URL.

It should look for it at: http://localhost:54675/app/services/angular2-jwt.js , but it looks for it at: http://localhost:54675/app/ shared /services/angular2-jwt.js. The word shared should not be in the path.

I have this structure in angular2:

app
---services
------angular2-jwt.ts
---shared
------country
---------country.service.ts

In country.service.ts I reference angular2-jwt.ts like this:

import {AuthHttp} from '../../services/angular2-jwt';

As you can see, that's up two (into app) and down into services. It should give this path: app/services/angular2-jwt. I look in the compiled js at looks correct:

System.register(['angular2/core', '../../services/angular2-jwt']

I am using Visual Studio and the intelliSense works. I see AuthHttp in a popup as an option from that library. I don't get an error when I save or build. I think this is correct.

At runtime I get this error in the broswer console:

Error: Unable to load script: http://localhost:54675/app/shared/services/angular2-jwt.js

Notice the script URL path is wrong. It has 'shared' as part of the path but should not.

I have caching disabled in my browser. I look at the js source in the browser and I see that same source mentioned above. It happens in chrome (my default) and Firefox (which I rarely use) so I don't think it's a caching issue. How is it getting this path?

Here is my SystemJS configuraiton from index.html:

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

I have now duplicated this on another machine. However, I am importing this same module ('../../services/angular2-jwt') from a different file at a similar locaiton is the directory tree and it works.

Answer 1

Check the import path to all components, not just this one. I had bad syntax in a parent component and it caused this issue.