Error occurs in the template of component angular

The issue is caused by package @angular/….

"@angular/animations": "~10.1.4",
"@angular/common": "~10.1.4",
"@angular/compiler": "~10.1.4",
"@angular/core": "~10.1.4",
"@angular/forms": "~10.1.4",
"@angular/platform-browser": "~10.1.4",
"@angular/platform-browser-dynamic": "~10.1.4",
"@angular/router": "~10.1.4",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"

Description

Dev server error is present when template error is fixed

🔬 Minimal Reproduction

install the latest version of @angular/cli

I am using

"@angular/cli": "~10.1.4",

create a brand new app like

In app.component.html, copy and paste the following line inside of the main content div:

<h1 [style.color]="'red'">Hello World!</h1>

Change the first double quote to single quote to cause the template error. Then change it back to double quote to fix it.

In the terminal, these errors are shown:

    ERROR in src/app/app.module.ts:9:5 - error NG6001: The class 'AppComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
    
    9     AppComponent
          ~~~~~~~~~~~~
    
      src/app/app.component.ts:8:14
        8 export class AppComponent {
                       ~~~~~~~~~~~~
        'AppComponent' is declared here.
    src/app/app.component.html:417:25 - error NG8002: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.
    
    417   <div class="terminal" [ngSwitch]="selection.value">
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:535:1 - error NG8001: 'router-outlet' is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
    2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    535 <router-outlet></router-outlet>
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.

You can read more about issue submission guidelines here:

🌍 Your Environment

It’s a brand new angular app as of 10/6/2020:

«dependencies»: {
«@angular/animations»: «~10.1.4»,
«@angular/common»: «~10.1.4»,
«@angular/compiler»: «~10.1.4»,
«@angular/core»: «~10.1.4»,
«@angular/forms»: «~10.1.4»,
«@angular/platform-browser»: «~10.1.4»,
«@angular/platform-browser-dynamic»: «~10.1.4»,
«@angular/router»: «~10.1.4»,
«rxjs»: «~6.6.0»,
«tslib»: «^2.0.0»,
«zone.js»: «~0.10.2»
},
«devDependencies»: {
«@angular-devkit/build-angular»: «~0.1001.4»,
«@angular/cli»: «~10.1.4»,
«@angular/compiler-cli»: «~10.1.4»,
«@types/node»: «^12.11.1»,
«@types/jasmine»: «~3.5.0»,
«@types/jasminewd2»: «~2.0.3»,
«codelyzer»: «^6.0.0»,
«jasmine-core»: «~3.6.0»,
«jasmine-spec-reporter»: «~5.0.0»,
«karma»: «~5.0.0»,
«karma-chrome-launcher»: «~3.1.0»,
«karma-coverage-istanbul-reporter»: «~3.0.2»,
«karma-jasmine»: «~4.0.0»,
«karma-jasmine-html-reporter»: «^1.5.0»,
«protractor»: «~7.0.0»,
«ts-node»: «~8.3.0»,
«tslint»: «~6.1.0»,
«typescript»: «~4.0.2»
}

I have a calendar component that uses Angular Full-Calendar, I’ve pretty much done all the steps in the docs: https://fullcalendar.io/docs/angular

npm install --save u/fullcalendar/angular u/fullcalendar/daygrid

calendar.component.ts:

<full-calendar [options]="calendar"></full-calendar>

calendar.module.ts:

import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import { CalendarComponent } from './calendar.component';
FullCalendarModule.registerPlugins([
// register FullCalendar plugins
dayGridPlugin
]);
@NgModule({
declarations: [CalendarComponent],
imports: [
FullCalendarModule
]
})
export class CalendarModule { }
calendar.compoent.ts:

import { Component, OnInit } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
calendar: CalendarOptions = {
initialView: 'dayGridMonth'
};
constructor() { }
ngOnInit(): void {
}
}
However I am greeted with this error:

'full-calendar' is not a known element:

1. If 'full-calendar' is an Angular component, then verify that it is part of this module.

2. If 'full-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

15 <full-calendar [options]="calendar"></full-calendar>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/shared/calendar/calendar.component.ts:6:16

6 templateUrl: './calendar.component.html',

~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component CalendarComponent.

src/app/shared/calendar/calendar.component.html:15:20 - error NG8002: Can't bind to 'options' since it isn't a known property of 'full-calendar'.

1. If 'full-calendar' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'full-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

15 <full-calendar [options]="calendar"></full-calendar>

~~~~~~~~~~~~~~~~~~~~

src/app/shared/calendar/calendar.component.ts:6:16

6 templateUrl: './calendar.component.html',

~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component CalendarComponent.

Thoughts? Any help would be awesome!

Issue

Following are the steps i have taken

1. I created a new project of ionic 5 using ionic start template blank
2. updated angular to angular 9
3. created a new page module using ng g page main
4. listed in AppRoutingModule using lazyloading.

I am getting following error

ERROR in src/app/pages/main/main.page.html:1:1 - error NG8001: 'ion-header' is not a known element:
1. If 'ion-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <ion-header>
  ~~~~~~~~~~~~

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

2   <ion-toolbar>
    ~~~~~~~~~~~~~

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

3     <ion-title>main</ion-title>
      ~~~~~~~~~~~

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

7 <ion-content>
  ~~~~~~~~~~~~~

I am missing something very obvious.

Following is the code

app.module.ts

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/main/main-routing.module').then(m => m.MainPageRoutingModule)
  },
];

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

main.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { MainPageRoutingModule } from './main-routing.module';

import { MainPage } from './main.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MainPageRoutingModule
  ],
  declarations: [MainPage]
})
export class MainPageModule {}

main.page.ts

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

@Component({
  selector: 'sxm-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss'],
})
export class MainPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

main.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>main</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

Solution

In my case I was getting weird html template errors including the one OP describes because I created new component and forgot to add it to the module declarations

app.module.ts

@NgModule({
...
declarations: [MyComponent]
}

Answered By — ihorbond

dtrunk90
free
asked 2 years ago

I am trying to use the select with searchbox example but getting the following error message:

src/app/app.component.html:11:15 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mdb-select-filter'.
1. If 'mdb-select-filter' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mdb-select-filter' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

11               [ngModel]="searchText | async"
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

My app.module.ts file:

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

import { MDBBootstrapModulesPro, MDBSpinningPreloader, MdbSelectModule } from 'ng-uikit-pro-standard';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModulesPro.forRoot(),
    MdbSelectModule
  ],
  providers: [
    MDBSpinningPreloader
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'web';
  searchText = new Subject();
  filteredOptions: Observable<any[]>;
  options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];

  ngOnInit() {
    this.filteredOptions = this.searchText.pipe(
      startWith(''),
      map((value: string) => this.filter(value))
    );
  }

  filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.options.filter((option: any) => option.label.toLowerCase().includes(filterValue));
  }
}

And finally the HTML:

<div class="md-form">
  <mdb-select-2 placeholder="Choose your option" label="Example label">
    <mdb-select-filter
      [ngModel]="searchText | async"
      (ngModelChange)="searchText.next($event)">
    </mdb-select-filter>
    <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.label }}</mdb-select-option>
  </mdb-select-2>
</div>