CODEWITHSUNDEEP
angularcomponents
José Carlos
José Carlos

Reputation: 2922

Angular component doesn't render html, shows html route

I have created a new component for Angular but I can't see the html rendered. Instead of the html rendered I've got the route to the html.

These are my folder structure:

enter image description here

This is the component created by me called server.component.ts:

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

@Component({
    selector: 'app-server',
    template: './server.component.html'
})
export class ServerComponent {

}

This is the html of the component, server.component.html:

<p>Este es mi nuevo componente!!!</p>

In app.component.html is where I include the tag of my component :

<div>
    <input type = "text" [(ngModel)] = "message" />
    <p>{{message}}</p>
    <hr>
    *<app-server></app-server>*
</div>

And this is my app.module.ts code where I import ServerComponent to use it later:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is the result that I get in my browser:

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 4181

Answers (2)

Samy
Samy

Reputation: 116

In the server.component.ts you have used template attribute which requires you to pass a template between the . You need to use templateUrl attribute if you want to pass the link to a template.

Upvotes: 1

Safiyya
Safiyya

Reputation: 1393

replace template by templateUrl in your component definition, it should be 

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})

Upvotes: 5

Related Questions