Angularjs 2.0 doesn't load templateUrl

Question

I am new for Angularjs-2.0. I have created a sample application,and have an issue in loading templateUrl.

My app.ts file:

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    templateUrl: 'grid.html'
})
class AppComponent { }
bootstrap(AppComponent);

I change the path like ./grid.html but it doesn't work for me too.

Someone help me..!

Answer 1

If your directory structure is like this:

|- app
   |- grid.html
   |- component.ts
   myApp.ts

Then use templateUrl: 'app/grid.html'.

Update

The solution above makes us hardcode app/ in every place to include these files. So here is another one:

1. Define "module": "commonjs" in file tsconfig.json
2. Add a new line moduleId: module.id, to the @Component decorator.

So it becomes:

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl: 'grid.html'
})

Reference:

• Angular cannot find templateUrl
• Angular2 beta relative paths for templateUrl and styleUrls