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

Question

（我在 Whosebug 上的第一个问题）

我开发了一个基于 Ionic 4 / Angular 7 的应用程序。为了将此应用程序迁移到 Ionic 5 / Angular 11，我从头开始一个新应用程序，然后将迁移页面和一个一个地组成。不幸的是，我在第一步中遇到了错误。

重现步骤，安装Ionic 6.13.1：

npm install -g @ionic/cli

启动一个 Ionic/Angular 项目：

ionic start myApp

在框架菜单 (Angular/React/Vue) 中，我选择 Angular。在集成电容器的问题上，我回答不（它只是一个网络应用程序）。关于Starter template的问题，我选择空白。

cd myApp

ionic serve

有效。我在浏览器中看到了默认应用，这里是 package.json 文件：

{
  "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"
}

当我想添加组件时出现问题：

ionic generate

在列表中，我选择组件并将其命名为'CustomComponent'。对于与 Angular 团队共享匿名数据的问题，我回答是。

生成的文件如下：

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>

在 app.module.js 文件中，我导入组件并将其添加到声明列表中：

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

在 home.page.html 中，我添加了对自定义组件的引用：

<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>

最后我再次启动应用程序：

ionic serve

我在浏览器的控制台中收到以下错误：

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.

我读到必须将组件添加到 declarations 列表中。但是我通过将我的自定义组件添加到 imports 列表中进行了第二次测试：

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

然后我在浏览器的控制台中出现另一个错误：

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

经过 2 天的研究，我很绝望。感谢您的任何建议。

Answer 1

创建components.module.ts文件

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

将此 ComponentsModule 导入 module.ts 文件

@NgModule({
  imports: [
    ComponentsModule]
})

Answer 2

将其包含在 app.module.ts 文件中的 Provider 中。

为您的 Customcomponent 创建一个 Provider 对象，并将您的 CustomComponent 作为 Provider 引用。我遇到了同样的问题（不过我的是一项服务），这对我有用。

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

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

components

ionic-framework

angular

ionic5

angular11