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.

I made a test with your folder structure and it works on my side. Could you give us your SystemJS configuration? Thanks! — Thierry Templier
– Thierry Templier, Commented Feb 10, 2016 at 17:59
Where do I find the SystemJS configuration? I have the snippet in index.html. I added that to the original post. — Don Chambers
– Don Chambers, Commented Feb 10, 2016 at 20:29
I have tried ../../../services/angular2-jwt. It does not work. Runtime error, and Intellisense will not wokr with that path. — Don Chambers
– Don Chambers, Commented Feb 10, 2016 at 20:30
Do you have stackoverflow.com/questions/34535163/… set? Someone mentioned that the bootstrap(... , [APP_BASE_HREF]) approach doesn't work when the <head> tag contains <meta> tags — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 17, 2016 at 14:47
I tried it and it didn't help. I don't think this is related to the routing. It happens on the initial page load. — Don Chambers
– Don Chambers, Commented Feb 17, 2016 at 15:29

JollyJollyBean · Accepted Answer · 2016-02-22 22:02:15Z

1

+50

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

answered Feb 22, 2016 at 22:02

JollyJollyBean

1763 bronze badges

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

1 Comment

Don Chambers Over a year ago

The file that uses country.service.ts is called country.picker.component. It was referenced from another component like this: import {CountryPickerComponent} from '..//country/country.picker.component'; It had two slashes. I changed this and it work. It's weird that these components worked together but caused the problem in a import down the chain. Notice the two double slashes. Once I changed this to on slash it worked.

Collectives™ on Stack Overflow

Angular2 import path wrong at runtime

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related