Why doesn't app.component.html render?

Question

I have the following Angular plnkr.co: https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview.

//app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent { name = 'Angular'; }

//app.component.html

testing...
<router-outlet></router-outlet>

The oputput in the browser is:

Loading AppComponent content here ...

Why doesn't it see the app.component.html file? Or is this some other issue?

Chandru · Accepted Answer · 2017-12-09 05:24:13Z

3

Try like this :

add below line your app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

plnkr demo

edited Dec 9, 2017 at 5:24

answered Dec 9, 2017 at 5:05

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

4 Comments

4thSpace Over a year ago

That works but why is it needed? None of my files have a hyphen in their name.

Chandru Over a year ago

schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

4thSpace Over a year ago

I see. When I use app-root, I can remove CUSTOM_ELEMENTS_SCHEMA.

AmirReza-Farahlagha Over a year ago

Does not work, In my app-root component html, I call 3 component by selector tag, but the app-root html does not render at all.

akashpandey · Accepted Answer · 2017-12-09 05:25:30Z

1

Your app.component.html contains <router-outlet></router-outlet> but there are no child routes defined. This is causing the issue.

In order to fix this, either you need to remove router-outlet from app.component.html or you should define child route config in app.router.ts.

Working Example: https://plnkr.co/edit/wbW1s8PqDtu35GR8HC8D?p=preview

Visit Angular Guide for routes to read more about routing config and child routes.

answered Dec 9, 2017 at 5:25

akashpandey

1771 silver badge11 bronze badges

1 Comment

4thSpace Over a year ago

I don't see app.router.ts. Also, you include route.html, which is not there either. Why not just use app.component.html?

ashiwn · Accepted Answer · 2017-12-09 06:57:02Z

Here you were missing correct routing implementation several errors are there in console please refer to them.

app.component.html:

testing...
<div routeLink="x" routerLinkActive="active">
  Click
</div>
<router-outlet></router-outlet>

app.route.ts:

    import {Component, NgModule} from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


@Component({
  selector: 'x',
  templateUrl: './route.html'
})

export class X{

}


const routes1: Routes = [
    {path : '', redirectTo: '/x', pathMatch: 'full'},
    {path : 'x', component: X}
  ]

@NgModule({
  imports:      [ RouterModule.forRoot(routes1) ],
  exports: [RouterModule]
})
export class AppRoutingModule{

}

Please find working example very close to your requirement below: https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview

I see this in the HTML output: "Loading AppComponent content here ..."

Narges · Accepted Answer · 2020-07-29 10:04:26Z

0

It did not work for me, try this one:

src/app/app.module.ts

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

from this helpful link: https://malcoded.com/posts/why-angular-not-works/

answered Jul 29, 2020 at 10:04

Narges

593 bronze badges

Comments

peinearydevelopment · Accepted Answer · 2020-11-30 15:47:00Z

app.component.ts

import { Component } from '@angular/core';
        
@Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
})
export class AppComponent {
        title = 'app';
}

app.component.html

<router-outlet></router-outlet>

Please write the below code in the index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Myapp</title>
    <base href="/">
        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>  
  </body>
</html>

How does changing the selector make any difference? Also, I'm working app.component.html. Not index.html.

Collectives™ on Stack Overflow

Why doesn't app.component.html render?

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

1 Comment

Linked

Related