title: Can't add a component with Angular 11: Uncaught Error: Type CustomComponentComponent does not have 'ɵmod' property
body: <p>(first question for me on stackoverflow)</p>
  <p>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.</p>
  <p>Step to reproduce, install Ionic 6.13.1:</p>
  <blockquote>
  <p>npm install -g @ionic/cli</p>
  </blockquote>
  <p>Start an Ionic/Angular project:</p>
  <blockquote>
  <p>ionic start myApp</p>
  </blockquote>
  <p>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.</p>
  <blockquote>
  <p>cd myApp</p>
  </blockquote>
  <blockquote>
  <p>ionic serve</p>
  </blockquote>
  <p>It works. I see the default app in my browser and here is the package.json file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "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"
  }</code></pre>
  </div>
  </div>
  </p>
  <p>My problem occurs when I then want to add a component:</p>
  <blockquote>
  <p>ionic generate</p>
  </blockquote>
  <p>In the list, I choose component and name it 'CustomComponent'. At the question to share anonymous data with the Angular team I answer yes.</p>
  <p>Here are the generated files:</p>
  <p><code>custom-component.component.ts</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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() {}
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p><code>custom-component.component.spec.ts</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
  import { IonicModule } from '@ionic/angular';
  
  import { CustomComponentComponent } from './custom-component.component';
  
  describe('CustomComponentComponent', () =&gt; {
    let component: CustomComponentComponent;
    let fixture: ComponentFixture&lt;CustomComponentComponent&gt;;
  
    beforeEach(waitForAsync(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ CustomComponentComponent ],
        imports: [IonicModule.forRoot()]
      }).compileComponents();
  
      fixture = TestBed.createComponent(CustomComponentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    }));
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p><code>custom-component.component.html</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    custom-component works!
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the <code>app.module.js</code> file I import the component and add it to the declarations list:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  <p>In the <code>home.page.html</code> I add the reference to my custom component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header [translucent]="true"&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
        Blank
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content [fullscreen]="true"&gt;
    &lt;ion-header collapse="condense"&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-title size="large"&gt;Blank&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
    &lt;div id="container"&gt;
      &lt;app-custom-component&gt;&lt;/app-custom-component&gt;
      &lt;strong&gt;Ready to create an app?&lt;/strong&gt;
      &lt;p&gt;Start with Ionic &lt;a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components"&gt;UI Components&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Finally I start again the app:</p>
  <blockquote>
  <p>ionic serve</p>
  </blockquote>
  <p>and I get the following error in the console of the browser:</p>
  <pre><code>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.
  </code></pre>
  <p>I have read that components have to be added to the <code>declarations</code> list only. But I did a second test by also adding my custom component to the <code>imports</code> list:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  <p>I then have another error in the console of the browser:</p>
  <pre><code>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)
  </code></pre>
  <p>After 2 days of research i'm desperate. Thanks for any suggestion.</p>