fail to locate template html of imported commponent in Angular2

Question

I was working on an Angular2 demo with multiple components. The demo bootstraps with an AppComponent, where I imported other components in the template html of AppComponent. I was successful to setup the demo and see the content of AppComponent, but failed to load other components.

Here is the code example of my angular2 components

app.component.html

<div id="map">
    <navigator></navigator>
</div>

app.component.ts

import {Component, View} from 'angular2/core';
import {NavigatorComponent} from '../components/navigator/navigator.component'

@Component({
    selector: 'app'
})
@View({
    templateUrl: './app/app.component.html', 
    directives: [NavigatorComponent]
})
export class AppComponent { }

navigator.component.html

<input type="text">

navigator.component.ts

import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    templateUrl: './components/navigator/navigator.component.html'
})
export class NavigatorComponent { }

When I set up the server and tried to see the app, I had the following error

"NetworkError: 404 Not Found - http://localhost:3000/components/navigator/navigator.component"

and

Error: XHR error (404 Not Found) loading http://localhost:3000/components/navigator/navigator.component
Error loading http://localhost:3000/components/navigator/navigator.component as "../components/navigator/navigator.component" from http://localhost:3000/app/app.component.js

Obviously, the server tried find a navigator.component, but it didn't exist. However, when I tried http://localhost:3000/components/navigator/navigator.component.html, I succeed to see the page with a textbox.

So the problem seemed to be the missing html extension, but I had no idea how it happened.

I will appreciate any suggestion and answer to solve the problem. Thanks in advance.

---

If you want to fully experience the bug, please go to the project's repo (https://github.com/haoliangyu/angular2-leaflet-starter) and do the following steps:

1. uncomment line 12 at public_src/app/app.component.ts

2. set up the app

3. go to localhost:3000 and check the error

---

Update:

This problem was solved by resisting the other component in the SystemJS config, like

System.config({
    defaultJSExtension: true,
    packages: {
        'app': {
            format: 'register'
        },
        'components/navigator': {
            format: 'register'
        }
    }
});

This helped the app to locate other components :)

Answer 1

The problem is not that it can't find the template file. But it is unable to load the navigator.component.js.

It is trying to load it from http://localhost:3000/components/navigator/navigator.component, but it should be loading from the map 'app', ergo: http://localhost:3000/app/components/navigator/navigator.component.js. The js extension will get added by the default extension set in the SystemJS configuration.

The reason the error goes away after you comment the line 12 in app.component.ts is that even though the import statement of the navigator.component.ts still remains in the code, the typescript compiler won't add it to the actual output, because the class is not used in the current file.

I could not install your project, because it seems like you've already done some changes on it. But i believe the fix for this is to change the import location of the navigator.component inside the app.component.ts:

import {NavigatorComponent} from './../components/navigator/navigator.component'

Notice how I've prepended the current folder ./

---

Better should be to either add a base href tag in your index.html:

<base href="http://localhost/app/">

Or to serve your website from the app folder in such a way that http://localhost actually refers to the app folder, and not its parent