CODEWITHSUNDEEP
angular
Sime
Sime

Reputation: 163

Error when I add a new component with Angular

I begin with Angular, but I have a problem to add a new component:

I have started a new project in Angular with ng new toto no error, then I add a new component with ng generate component menu with no error and I remove all in my app.component.html and I add MenuComponent with <MenuComponent></MenuComponent>

app.module.ts

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

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';

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

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() {
  }

}

app.component.html

<MenuComponent></MenuComponent>

My version of Angular CLI:

Angular CLI: 6.0.0
Node: 10.0.0
OS: linux x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

My question is why this simple thing don't work ?

My Error

 Error: Template parse errors:
'MenuComponent' is not a known element:
1. If 'MenuComponent' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<MenuComponent></MenuComponent>
"): ng:///AppModule/AppComponent.html@0:0

Thanks in advance for your help

Upvotes: 0

Views: 564

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

I am sure your selector for MenuComponent should be different.

Use the selector you have in menu.component.ts rather than using the component name itself. Something like,

<app-menu> </app-menu>

Upvotes: 2

Related Questions