Error in angular2 component

Basavakumar Mudur

9y1.1kAngular

I am using TemplateUrl in component but its not working its showing below error

Error: Uncaught (in promise): Failed to load http://localhost:3000/dist/app.component.html

my code like that in component

import { Component } from '@angular/core';

import { myService } from './myService';

@Component({

moduleId: module.id,

selector: 'app',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [myService]

})

export class AppComponent {

title:string = "God's of God - Mahadeva!";

myDetails = [];

constructor(myService: myService) {

this.myDetails= myService.getDetails();

}

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Basavakumar Mudur9y ago
Hi Sravan,

Thanks for replied. yes i made mistake was i created html files in under ts that why its getting error. now i added html files in under js. now its working.

i really thankful to you. for your all replied information.

Thanks
Basava.
Sravan Kumar Reddy Dudyalu9y ago
I have edited the answer, if you are not able to resolve the issue
Download the solution from following GitHub link which has similar project structure which you have provided

https://github.com/sravankumard/Angular_2_Separate_TS_JS_Files
Basavakumar Mudur9y ago
Hi Sravan,

i could'nt get you what you told about base url below is my main indx.html file

Angular2 App

Loading...

please check need to add anything else.

Regards,
Basava
Sravan Kumar Reddy Dudyalu9y ago
1. First try providing complete path in templateURL in app.component.ts file like

instead of ./app.component.html give 'app/app.component.html'

if it doesn't work try adding following below approach

2. Adding in your index.html page(Main HTML Page) ?
Add under tag like below
Basavakumar Mudur9y ago
Hi Sravan,

What you mentioned i already followed in my file structure. i added app in dist whatever you told . but still i getting error in when i used templateUrl . i guess something need to add other dependencies.

Thanks
Basava.
Sravan Kumar Reddy Dudyalu9y ago
Hi Basavakumar,

Sorry for late reply,

First you need to add following code in "tsconfig.json "

"outDir": "dist" // which i am assuming you have already done that

As per the project structure which you have provided, Can you change the code in systemjs.config.js file from

map: {
// our app is within the app folder
app: 'app',

to

map: {
// our app is within the app folder
app: 'dist', // it refers your js files which are present under dist folder

If your JS files are created under dist/app , please refer that path else just provide "dist"

I guess the above approach will work.
Basavakumar Mudur9y ago
Hi Sravan,

Thanks for replied. yes i made separate folder for dist. that why its showing error. without dist folder in templateUrl working.

MyFolder Strcture like this.

myApp
app
app.component.ts
app.component.html
app.component.css
main.ts

dist
app.component.js
app.component.map

node_modules
typeings
index.html
style.css
Sravan Kumar Reddy Dudyalu9y ago
Hi Basavakumar,
Is your HTML file created under js folder or ts folder?
Basavakumar Mudur9y ago
Hi Sravan,

Its coming when i made separate folder for ts and js files. then its showing error. when its in ts and js are in same folder no issue. but i want to make ts and js files separate. may be any dependencies need to add?
Sravan Kumar Reddy Dudyalu9y ago
The error which you are getting shows different path http://localhost:3000/dist/app.component.html . Can you check the application folder structure of your project and call the html file accordingly?