Can't add a component with Angular 11: Uncaught Error: Type CustomComponentComponent does not have 'ɵmod' property

Question

(first question for me on stackoverflow)

I worked on an app based on Ionic 4 / Angular 7. To migrate this app to Ionic 5 / Angular 11, I start a new app from scratch and then will migrate pages and components one by one. Unfortunately I encounter an error from the first steps.

Step to reproduce, install Ionic 6.13.1:

npm install -g @ionic/cli

Start an Ionic/Angular project:

ionic start myApp

In the Framework menu (Angular/React/Vue), I choose Angular. At the question to integrate Capacitor I answser no (it's just a webapp). At the question on Starter template, I choose blank.

cd myApp

ionic serve

It works. I see the default app in my browser and here is the package.json file:

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@ionic/angular": "^5.5.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular/cli": "~11.2.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "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"
  },
  "description": "An Ionic project"
}

My problem occurs when I then want to add a component:

ionic generate

In the list, I choose component and name it 'CustomComponent'. At the question to share anonymous data with the Angular team I answer yes.

Here are the generated files:

custom-component.component.ts

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

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

  constructor() { }

  ngOnInit() {}

}

custom-component.component.spec.ts

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { CustomComponentComponent } from './custom-component.component';

describe('CustomComponentComponent', () => {
  let component: CustomComponentComponent;
  let fixture: ComponentFixture<CustomComponentComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomComponentComponent ],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(CustomComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

custom-component.component.html

<p>
  custom-component works!
</p>

In the app.module.js file I import the component and add it to the declarations list:

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

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CustomComponentComponent } from './custom-component/custom-component.component';

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

In the home.page.html I add the reference to my custom component:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <app-custom-component></app-custom-component>
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

Finally I start again the app:

ionic serve

and I get the following error in the console of the browser:

core.js:14863 NG0304: 'app-custom-component' is not a known element:
1. If 'app-custom-component' is an Angular component, then verify that it is part of this module.
2. If 'app-custom-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have read that components have to be added to the declarations list only. But I did a second test by also adding my custom component to the imports list:

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

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CustomComponentComponent } from './custom-component/custom-component.component';

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

I then have another error in the console of the browser:

Uncaught Error: Type CustomComponentComponent does not have 'ɵmod' property.
    at getNgModuleDef (core.js:1141)
    at recurse (core.js:25168)
    at recurse (core.js:25179)
    at registerNgModuleType (core.js:25164)
    at new NgModuleFactory$1 (core.js:25278)
    at compileNgModuleFactory__POST_R3__ (core.js:28912)
    at PlatformRef.bootstrapModule (core.js:29158)
    at Module.zUnb (main.ts:11)
    at __webpack_require__ (bootstrap:84)
    at Object.0 (main.js:11)

After 2 days of research i'm desperate. Thanks for any suggestion.

Answer 1

Create components.module.ts file

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';


@NgModule({
    declarations: [], // Import all component here
    imports: [CommonModule, FormsModule, IonicModule, PipesModule],
    exports: [], // Import all component here
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComponentsModule { }

import this ComponentsModule in module.ts file

@NgModule({
  imports: [
    ComponentsModule]
})