CODEWITHSUNDEEP
angulartypescript
Revolucion for Monica
Revolucion for Monica

Reputation: 3296

Lose the rendering when adding components on same page

I want to add multiple components on same page. But when I added the component header. I had no more rendering on the localhost. But if I delete the header, I have the rendering again. However, for the first case as for the other I have no error on the terminal. I already checked this answer by Adrien Brunelat but it seems everything was okay on my side.

Main component

app.component.html:

<app-header></app-header>
<app-menu></app-menu>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'conFusion';
}

Header component

header.component.html

<mat-toolbar color="primary">
  <span><img src="/assets/images/logo.png" height=30 width=41></span>
  <a mat-button><span class="fa fa-home fa-lg"></span> Home</a>
  <a mat-button><span class="fa fa-info fa-lg"></span> About</a>
  <a mat-button><span class="fa fa-list fa-lg"></span> Menu</a>
  <a mat-button><span class="fa fa-address-card fa-lg"></span> Contact</a>
</mat-toolbar>

<div class="container jumbotron"
    fxLayout="row"
    fxLayout.sm="column" 
    fxLayout.xs="column" 
    fxLayoutAlign.xs="start center"
    fxLayoutAlign.sm="start center" 
    fxLayoutAlign.gt-sm="center center" 
    fxLayoutGap="10px">

  <div fxFlex fxFlex.gt-sm="50%">
    <h1>Ristorante Con Fusion</h1>
    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations
      will tickle your culinary senses!</p>
  </div>
  <div fxFlex fxFlex.gt-sm="20%">
    <img src="/assets/images/logo.png" alt="Logo">
  </div>
  <div fxFlex></div>
</div>

header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

    title = 'Header works!';

  constructor() { }

  ngOnInit() {
  }

}

Menu works perfectly I can share it with you as well if you needtit. My repository is private as well but I can share it with you.

Here is the Stackblitz (I did it !!). It returns this error I didn't had in my terminal :

Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (2603:21)
Can't resolve all parameters for MenuComponent: (?).

Versions

I have angular8.2.2

Upvotes: 0

Views: 88

Answers (1)

Revolucion for Monica
Revolucion for Monica

Reputation: 3296

The solution was to declare the module I was using in app.module.ts :

...
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    DishdetailComponent,
    HeaderComponent,
    FooterComponent
...

I don't know the reason why it wasn't showing any error.

Upvotes: 1

Related Questions