Why does Angular 4 say it doesn't know the component attribute even though it's specified?

Question

Angular

persons.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { IPerson } from "../../share/iperson";

@Component({
    selector: 'app-persons',
    templateUrl: './persons.component.html',
    styleUrls: ['./persons.component.css']
})
export class PersonsComponent implements OnInit {
    @Input() public persons: Observable<IPerson[]>;
    constructor() { }
    ngOnInit() {
    }
}

persons.component.html

<ul>
  <li *ngFor="let person of persons | async">
    <p><strong>{{person.GetShortName()}}</strong></p>
    <p><em>{{person.GetAdditionalInfo()}}</em></p>
  </li>
</ul>

This component is used in two modules: employees.module.ts and students.module.ts
students.component.html

<app-persons [persons]="students">
  <p *ngIf="(students | async)?.length === 0">Список студентов пуст</p>
</app-persons>

students.component.ts

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { StudentsService } from "./students.service";
import { ActivatedRoute, Router, ParamMap } from "@angular/router";
import { Observable } from "rxjs/Observable";

import { Student } from "../share/student";

@Component({
    selector: 'app-students',
    templateUrl: './students.component.html',
    styleUrls: ['./students.component.css']
})
export class StudentsComponent implements OnInit {
    students: Observable<Student[]>;
    selectedStudentUid: string;
    constructor(
        private _service: StudentsService,
        private _route: ActivatedRoute,
        private _router: Router
    ) { }

    ngOnInit() {
        this.students = this._route.paramMap
            .switchMap((params: ParamMap) => {
                this.selectedStudentUid = params.get('id');
                return this._service.GetAll();
            });
    }
}

The site starts up, but when you try to open any of the pages listed above, an error occurs:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'persons' since it isn't a known property of 'app-persons'.
1. If 'app-persons' is an Angular component and it has 'persons' input, then verify that it is part of this module.
2. If 'app-persons' 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. ("<app-persons [ERROR ->][persons]="students">
  <p *ngIf="(students | async)?.length === 0">Список студентов пуст</p>
</app"): ng:///StudentsModule/[email protected]:13
'app-persons' is not a known element:
1. If 'app-persons' is an Angular component, then verify that it is part of this module.
2. If 'app-persons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-persons [persons]="students">
  <p *ngIf="(students | async)?.length === 0">Список студентов пу"): ng:///StudentsModule/[email protected]:0
Error: Template parse errors:
Can't bind to 'persons' since it isn't a known property of 'app-persons'.
1. If 'app-persons' is an Angular component and it has 'persons' input, then verify that it is part of this module.
2. If 'app-persons' 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. ("<app-persons [ERROR ->][persons]="students">
  <p *ngIf="(students | async)?.length === 0">Список студентов пуст</p>
</app"): ng:///StudentsModule/[email protected]:13
'app-persons' is not a known element:
1. If 'app-persons' is an Angular component, then verify that it is part of this module.
2. If 'app-persons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-persons [persons]="students">
  <p *ngIf="(students | async)?.length === 0">Список студентов пу"): ng:///StudentsModule/[email protected]:0...

If the persons component is specified in the module: employees.module or students.module, then everything works, but I cannot specify one component in two parallel modules, only in the parent one, and there is such parsley! What have I done wrong?

Answer 1

I found the answer, the problem is not in the attribute, but in the fact that Angular was not compiled with this component at all, it turns out that the component can only be placed in one module, in principle, and if you need to use one component in different ones, then you need to move it to your own module, and then connect in those where it will be used.

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

import { PersonsComponent } from "./persons.component";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        PersonsComponent
    ],
    exports: [
        CommonModule, PersonsComponent
    ]
})
export class PersonsModule { }

Somehow I didn't read the documentation carefully.