Hola , tengo el siguiente problema y estoy atascado: al hacer los cambios indicados para anidar el menu obtengo el siguiente error en con...

Cristóbal De la Piedra

Pregunta

student•hace 5 años

Hola , tengo el siguiente problema y estoy atascado:

al hacer los cambios indicados para anidar el menu obtengo el siguiente error en consola:

error :

<  
      src/app/app.component.ts:5:16 5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    
    
    ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-menu' is not a known element:
    1. If 'app-menu' is an Angular component, then verify that it is part of this module.
    2. If 'app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    1 <app-menu></app-menu>
      ~~~~~~~~~~~~~~~~~~~~~
    
      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.>

Adjunto mis archivos principales (Estoy en angular 10), se agradece cualquier orientación.

index.html

<<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Platzinger</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>
>

app.modules.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { ConversationComponent } from './conversation/conversation.component';
import { ProfileComponent } from './profile/profile.component';
import {RouterModule, Routes} from  '@angular/router'; // cristobal 

const appRoutes: Routes =  [
  {path:'',component: HomeComponent},
  {path:'home',component: HomeComponent},
  {path:'login',component: LoginComponent},
  {path:'conversation',component: ConversationComponent},
  {path:'profile',component: ProfileComponent },
  
];


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    ConversationComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
>

app.components.ts

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

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

menu.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}
>

Cristóbal De la Piedra

student•hace 5 años

al incluir el componente menu en el app.modultes.ts aparece lo siguiente:

app.modules.ts-->

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { ConversationComponent } from './conversation/conversation.component';
import { ProfileComponent } from './profile/profile.component';

import {RouterModule, Routes} from  '@angular/router'; // cristobal 
import { MenuComponent } from './menu/menu.component';

const appRoutes: Routes =  [
  {path:'',component: HomeComponent},
  {path:'home',component: HomeComponent},
  {path:'login',component: LoginComponent},
  {path:'conversation',component: ConversationComponent},
  {path:'profile',component: ProfileComponent },
  {path:'menu',component: MenuComponent },
];


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    ConversationComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
>

<   ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-menu' is not a known element:
    1. If 'app-menu' is an Angular component, then verify that it is part of this module.
    2. If 'app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    1 <app-menu></app-menu>
      ~~~~~~~~~~~~~~~~~~~~~
    
      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    >

Luis Lira

student•hace 5 años

Hola, no sé mucho de Angular, pero ¿el componente de Menú no debería ir declarado también en el archivo de app.modules.ts? 🤔

Hola , tengo el siguiente problema y estoy atascado: al hacer los cambios indicados para anidar el menu obtengo el siguiente error en con...

Curso de Angular Avanzado 2018 con Eduardo Ibarra

Curso de Angular Avanzado 2018 con Eduardo Ibarra