Error: Can't bind to 'ngModel' since it isn't a known property of

Question

I have a qustion at the beginning if testing with Jasmine is supposed to be so difficult? The app works perfectly in compiling but when I test it a million errors appear like this one here. I have read any possible resource about importing FormsModule in angular.

I have this component:

import { Component, OnInit, OnDestroy, ViewChild, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager, JhiAlertService } from 'ng-jhipster';
import { Paciente } from './paciente.model';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
    selector: 'jhi-paciente-dialog',
     template: require('./paciente-dialog.component.html'),
    styleUrls: [
        'paciente.css'
    ],
})
export class PacienteDialogComponent implements OnInit {
 @ViewChild('hiddenLabel') hidden: ElementRef; //the element that I am gonna test

/* tslint:disable max-line-length */
import { ComponentFixture, TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { PacienteDialogComponent } from '../../../../../../main/webapp/app/entities/paciente/paciente-dialog.component';
import { HttpResponse } from '@angular/common/http';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs/Observable';
import { JhiEventManager } from 'ng-jhipster';
import { OncosupTestModule } from '../../../test.module';
import { Paciente } from '../../../../../../main/webapp/app/entities/paciente/paciente.model';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
describe('Component Tests', () => {

    describe('Paciente Management Dialog Component', () => {
        let comp: PacienteDialogComponent;
        let fixture: ComponentFixture<PacienteDialogComponent>;
        //const service: PacienteService; //let
        //const mockEventManager: any; //let
        //const mockActiveModal: any;  //let

        beforeEach(async(() => {
            TestBed.configureTestingModule({
                imports: [OncosupTestModule],
                declarations: [PacienteDialogComponent],
            schemas: [
                    CUSTOM_ELEMENTS_SCHEMA
                ]
            }).compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(PacienteDialogComponent);
            comp = fixture.componentInstance;
        });
            fit ('first test', async(() => {
                console.log('holaaa THIS IS SPARTA ');                   expect(comp.hidden.nativeElement.innerHTML).toContain('Visible!');
            }));
        });
    });

If I test another HTML template that has just a label on it Visible the tests works perfectly. When I try to test the html file that is below it gives me error of inputs. This is the html file:

<form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
    <div class="modal-header">
        <h4 class="modal-title" id="myPacienteLabel" jhiTranslate="oncosupApp.paciente.home.createOrEditLabel">Create or edit a Paciente</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                (click)="clear()">&times;</button>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="half-block">
         <div class="form-group half-item">
             <label #hiddenLabel class="form-control-label" jhiTranslate="oncosupApp.paciente.nombre" for="field_nombre">Nombre</label>
             <input type="text" class="form-control" name="nombre" id="field_nombre"
                 [(ngModel)]="paciente.nombre" required/>
             <div [hidden]="!(editForm.controls.nombre?.dirty && editForm.controls.nombre?.invalid)">
                 <small class="form-text text-danger"
                    [hidden]="!editForm.controls.nombre?.errors?.required" jhiTranslate="entity.validation.required">
                    This field is required.
                 </small>
             </div>
         </div>

And here is my submodule.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OncosupSharedModule } from '../../shared';
import { CommonModule } from '@angular/common';
import {
    PacienteService,
    PacientePopupService,
    PacienteComponent,
    PacienteDetailComponent,
    PacienteDialogComponent,
    PacientePopupComponent,
    PacienteDeletePopupComponent,
    PacienteDeleteDialogComponent,
    pacienteRoute,
    pacientePopupRoute,
    PacienteResolvePagingParams,
} from './';

const ENTITY_STATES = [
    ...pacienteRoute,
    ...pacientePopupRoute,
];

@NgModule({
    imports: [
        OncosupSharedModule,
        FormsModule,
        BrowserModule,
        ReactiveFormsModule,
        RouterModule.forChild(ENTITY_STATES)
    ],
    declarations: [
        PacienteComponent,
        PacienteDetailComponent,
        PacienteDialogComponent,
        PacienteDeleteDialogComponent,
        PacientePopupComponent,
        PacienteDeletePopupComponent,
    ],
    entryComponents: [
        PacienteComponent,
        PacienteDialogComponent,
        PacientePopupComponent,
        PacienteDeleteDialogComponent,
        PacienteDeletePopupComponent,
    ],
    providers: [
        PacienteService,
        PacientePopupService,
        PacienteResolvePagingParams,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupPacienteModule {}

And my app.module.ts

import './vendor.ts';

import { NgModule, Injector, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Ng2Webstorage } from 'ngx-webstorage';
import { JhiEventManager } from 'ng-jhipster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { OncosupSharedModule, UserRouteAccessService } from './shared';
import { OncosupAppRoutingModule} from './app-routing.module';
import { OncosupHomeModule } from './home/home.module';
import { OncosupAdminModule } from './admin/admin.module';
import { OncosupAccountModule } from './account/account.module';
import { OncosupEntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import { StateStorageService } from './shared/auth/state-storage.service';
// jhipster-needle-angular-add-module-import JHipster will add new module here
import {
    JhiMainComponent,
    NavbarComponent,
    FooterComponent,
    ProfileService,
    PageRibbonComponent,
    ActiveMenuDirective,
    ErrorComponent
} from './layouts';

@NgModule({
    imports: [
        BrowserModule,
        OncosupAppRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        OncosupSharedModule,
        OncosupHomeModule,
        OncosupAdminModule,
        OncosupAccountModule,
        OncosupEntityModule,
        FormsModule,
        ReactiveFormsModule,
        // jhipster-needle-angular-add-module JHipster will add new module here
    ],
    declarations: [
        JhiMainComponent,
        NavbarComponent,
        ErrorComponent,
        PageRibbonComponent,
        ActiveMenuDirective,
        FooterComponent
    ],
    providers: [
        ProfileService,
        PaginationConfig,
        UserRouteAccessService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthExpiredInterceptor,
            multi: true,
            deps: [
                StateStorageService,
                Injector
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorHandlerInterceptor,
            multi: true,
            deps: [
                JhiEventManager
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NotificationInterceptor,
            multi: true,
            deps: [
                Injector
            ]
        }
    ],
    bootstrap: [ JhiMainComponent ]
})
export class OncosupAppModule {}

And here is the output error:

webpack: Compiling...

[at-loader] Checking started in a separate process...

[at-loader] Ok, 1.7 sec.
Hash: d6582b121edcc8bb2f2a
Version: webpack 3.10.0
Time: 13069ms
        Asset     Size  Chunks         Chunk Names
spec/entry.ts  23.3 MB       0  [big]  spec/entry.ts
 [111] ./node_modules/@angular/core/esm5/testing.js 49.6 kB {0}
 [278] ./node_modules/rxjs/Rx.js 9.79 kB {0}
 [563] ./src/test/javascript/spec/entry.ts 853 bytes {0}
 [564] ./node_modules/core-js/index.js 639 bytes {0}
 [752] ./node_modules/zone.js/dist/zone.js 129 kB {0}
 [753] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.16 kB {0}
 [754] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0}
 [755] ./node_modules/zone.js/dist/fake-async-test.js 19.6 kB {0}
 [756] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0}
 [757] ./node_modules/zone.js/dist/proxy.js 5.6 kB {0}
 [758] ./node_modules/zone.js/dist/jasmine-patch.js 6.5 kB {0}
 [801] ./node_modules/rxjs/add/observable/onErrorResumeNext.js 263 bytes {0}
[1023] ./node_modules/intl/locale-data/jsonp/en-US.js 24 kB {0}
[1024] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17.9 kB {0}
[1028] ./src/test/javascript/spec \.spec 455 bytes {0} [built]
    + 1169 hidden modules

WARNING in ./node_modules/@angular/core/esm5/core.js
6541:15-36 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./node_modules/@angular/platform-browser/esm5/platform-browser.js
 @ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js
 @ ./src/test/javascript/spec/entry.ts

WARNING in ./node_modules/@angular/core/esm5/core.js
6561:15-102 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./node_modules/@angular/platform-browser/esm5/platform-browser.js
 @ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js
 @ ./src/test/javascript/spec/entry.ts
webpack: Compiled with warnings.

......


 There is no directive with "exportAs" set to "ngForm" ("<form  name="editForm" role="form" novalidate (ngSubmit)="save()" [ERROR ->]#editForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="myPacienteLa"): ng:///DynamicTestModule/PacienteDialogComponent.html@0:66
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("          <input type="text" class="form-control" name="nombre" id="field_nombre"
                                [ERROR ->][(ngModel)]="paciente.nombre" required/>
                            <div [hidden]="!(editForm.controls.nombre?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@12:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("    <input type="text" class="form-control" name="apellidos"
id="field_apellidos"
                                [ERROR ->][(ngModel)]="paciente.apellidos" required/>
                            <div [hidden]="!(editForm.controls.apellido"): ng:///DynamicTestModule/PacienteDialogComponent.html@24:17
        There is no directive with "exportAs" set to "ngbDatepicker" ("t id="field_fechaNacimiento" type="text" class="form-control" name="fechaNacimiento" ngbDatepicker  [ERROR ->]#fechaNacimientoDp="ngbDatepicker" [(ngModel)]="paciente.fechaNacimiento"
                                required/"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:122
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("text" class="form-control" name="fechaNacimiento" ngbDatepicker  #fechaNacimientoDp="ngbDatepicker" [ERROR ->][(ngModel)]="paciente.fechaNacimiento"
                                required/>
                                <span class="in"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:157
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("paciente.sexo" for="field_sexo">Sexo</label>
                            <select class="form-control" name="sexo" [ERROR ->][(ngModel)]="paciente.sexo" id="field_sexo"  required>
                                <option value="VARON">{{'onc"): ng:///DynamicTestModule/PacienteDialogComponent.html@53:54
        The pipe 'translate' could not be found ("o" [(ngModel)]="paciente.sexo" id="field_sexo"  required>
                                <option value="VARON">{{[ERROR ->]'oncosupApp.Sexo.VARON' | translate}}</option>
                                <option value="MUJER">{{'oncosupApp."): ng:///DynamicTestModule/PacienteDialogComponent.html@54:41
        The pipe 'translate' could not be found ("="VARON">{{'oncosupApp.Sexo.VARON' | translate}}</option>
                                <option value="MUJER">{{[ERROR ->]'oncosupApp.Sexo.MUJER' | translate}}</option>
                            </select>
                            <div [hidden]="!"): ng:///DynamicTestModule/PacienteDialogComponent.html@55:41
        Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
                            <input type="text" class="form-control" name="nhc" id="field_nhc"
                                [ERROR ->][(ngModel)]="paciente.nhc" maxlength="38" pattern="[0-9]+"/>
                            <div [hidden]="!(editForm."): ng:///DynamicTestModule/PacienteDialogComponent.html@70:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. (">
                            <input type="text" class="form-control" name="nss" id="field_nss"
                                [ERROR ->][(ngModel)]="paciente.nss" maxlength="20"/>
                            <div [hidden]="!(editForm.controls.nss?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@85:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e="text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria"
                                [ERROR ->][(ngModel)]="paciente.tarjetaSanitaria" maxlength="20"/>
                            <div [hidden]="!(editForm.cont"): ng:///DynamicTestModule/PacienteDialogComponent.html@99:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                            <input type="text" class="form-control" name="cipa" id="field_cipa"
                                [ERROR ->][(ngModel)]="paciente.cipa" maxlength="20"/>
                            <div [hidden]="!(editForm.controls.cipa?.d"): ng:///DynamicTestModule/PacienteDialogComponent.html@110:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("      <input type="text" class="form-control" name="telefono" id="field_telefono"
                                [ERROR ->][(ngModel)]="paciente.telefono" />
                        </div>
                        <div class="form-group half-item">
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@125:17
        Can't bind to 'ngModel' since it isn't a known property of 'input'. ("-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" class="form-control" name="email" id="field_email"
                                [ERROR ->][(ngModel)]="paciente.email" />
                        </div>
                </div>
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@130:17
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("d</label>
                        <select class="form-control" id="field_nacionalidad" name="nacionalidad" [ERROR ->][(ngModel)]="paciente.nacionalidadId" >
                            <option value="null"></option>
                "): ng:///DynamicTestModule/PacienteDialogComponent.html@137:89
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("field_etnia">Etnia</label>
                            <select class="form-control" id="field_etnia" name="etnia" [ERROR ->][(ngModel)]="paciente.etniaId" >
                                <option value="null"></option>
                                <"): ng:///DynamicTestModule/PacienteDialogComponent.html@144:72
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ld_comunidadActual" name="comunidadActual" (change)="onComunidadActual(paciente.comunidadActualId)" [ERROR ->][(ngModel)]="paciente.comunidadActualId" >
                                <option value="null"></option>
                       "): ng:///DynamicTestModule/PacienteDialogComponent.html@155:149
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("label>
                            <select class="form-control" id="field_provinciaActual" name="provinciaActual" [ERROR ->][(ngModel)]="paciente.provinciaActualId" >
                                <option value="null"></option>
                       "): ng:///DynamicTestModule/PacienteDialogComponent.html@162:92
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ico" name="comunidadDiagnostico" (change)="onComunidadDiagnostico(paciente.comunidadDiagnosticoId)" [ERROR ->][(ngModel)]="paciente.comunidadDiagnosticoId" >
                            <option value="null"></option>
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@171:172
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("           <select class="form-control" id="field_provinciaDiagnostico" name="provinciaDiagnostico" [ERROR ->][(ngModel)]="paciente.provinciaDiagnosticoId" >
                            <option value="null"></option>
        "): ng:///DynamicTestModule/PacienteDialogComponent.html@178:105
        Can't bind to 'ngModel' since it isn't a known property of 'select'. ("tal">Hospital</label>
                    <select class="form-control" id="field_hospital" name="hospital" [ERROR ->][(ngModel)]="paciente.hospitalId" >
                        <option value="null"></option>
                        "): ng:///DynamicTestModule/PacienteDialogComponent.html@186:77
        Error: Template parse errors:
            at syntaxError (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:485:21 <- spec/entry.ts:63150:34)
            at TemplateParser.parse (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:24661:0 <- spec/entry.ts:87326:19)
            at JitCompiler._parseTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34601:0 <- spec/entry.ts:97266:37)
            at JitCompiler._compileTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34576:0 <- spec/entry.ts:97241:23)
            at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:47 <- spec/entry.ts:97142:62
            at Set.forEach (<anonymous>)
            at JitCompiler._compileComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:0 <- spec/entry.ts:97142:19)
            at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34365:0 <- spec/entry.ts:97030:19
            at Object.then (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:474:32 <- spec/entry.ts:63139:77)
            at JitCompiler._compileModuleAndAllComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34363:0 <- spec/entry.ts:97028:26)
        Error: Template parse errors:

I know taht it is a big deal of reading this, but I have tried any other solution and I haven't been able to test nothing in one month for erors that gives angular. Thanks for reading this.

Possible duplicate of [Can't bind to 'ngModel' since it isn't a known property of 'input'](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) — the_mishra, May 15 '18 at 07:47

score 4 · Accepted Answer · answered May 15 '18 at 07:54

4

- There is no directive with "exportAs" set to "ngForm" ([ERROR ->]#editForm="ngForm">)
- Can't bind to 'ngModel' since it isn't a known property of XXX
- There is no directive with "exportAs" set to "ngbDatepicker" ([ERROR ->]#fechaNacimientoDp="ngbDatepicker")
- The pipe 'translate' could not be found ([ERROR ->]'oncosupApp.Sexo.VARON' | translate)

Those are all the same kind of error ; and seeing your tests, I know why you have those errors. You say

I have read any possible resource about importing FormsModule in angular

But it doesn't seem you acted on that ; here is your testbed configuration :

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [OncosupTestModule],
    declarations: [PacienteDialogComponent],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  }).compileComponents();
}));

Notice how you don't cope with your module at all :

@NgModule({
    imports: [
        OncosupSharedModule,
        FormsModule,
        BrowserModule,
        ReactiveFormsModule,
        RouterModule.forChild(ENTITY_STATES)
    ],
    declarations: [
        PacienteComponent,
        PacienteDetailComponent,
        PacienteDialogComponent,
        PacienteDeleteDialogComponent,
        PacientePopupComponent,
        PacienteDeletePopupComponent,
    ],
    entryComponents: [
        PacienteComponent,
        PacienteDialogComponent,
        PacientePopupComponent,
        PacienteDeleteDialogComponent,
        PacienteDeletePopupComponent,
    ],
    providers: [
        PacienteService,
        PacientePopupService,
        PacienteResolvePagingParams,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupPacienteModule {}

The testbed bed is supposed to mirror your module configuration : when you want to use a library, you first have to import the corresponding module, right ?

Well for testing, it's the same. The difference is, the tests are isolated, meaning that you have to import all of the dependencies of a component instead of the module.

If you want to configure the testbed correctly, you will need to cope with the requirements.

Your testbed should look like this to prevent those errors :

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [OncosupTestModule, FormsModule, DatePickerModule],
    declarations: [PacienteDialogComponent, TranslatePipe],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  }).compileComponents();
}));

(I don't know the names of DatePickerModule or TranslatePipe, so put your own names in place of it).

answered May 15 '18 at 07:54

You mean to be a mirror of my submodule.ts or app.module.ts?? – Tester May 15 '18 at 08:56
And a more specific question please. My testBed should import teh same things as the module all of them? Or just the imports that you have included?? Cause I have much more imports than you have included in testBed. It is a bit confusing. – Tester May 15 '18 at 08:58
1

Focus on the next sentence : since the tests are isolated, you need to mirror **only the requirements of your component**, and not of your module. As for your specific question : you need to import **everything that is used in your component**. I added the imports required to remove the errors you provided, but I don't know what else you're using in your component, so feel free to add a lot more ! For istance, if your component use the datepicker, import it. But if another component uses the router, and not this one, you don't have to import it. Do you understand ? – May 15 '18 at 09:08
I have imported everything that my component has like this: import {...} from...This is enough you mean?? And TranslatePipe and the dateMipckerModule do not exist in my component. – Tester May 15 '18 at 09:57
No, you need to import into the `imports` array of the testbed. And I imagine they are in `OncosupSharedModule` ? – May 15 '18 at 09:59
You are the best – Tester May 15 '18 at 11:12
Hello @triechetrieche a question for having it more clear, when I have submodules and a general module, and a lot of imports , what should I import in a spec file? The imports from teh general module too? And all teh declarations, exports, entryComonents that exist in a module, or is there any rule??? – Tester Jul 02 '18 at 11:32
Depends on you only. For instance, I use Material : in Material, you have to import every module you want to use (`ButtonModule`, `InputModule` ...). Their guide recommend to make a single module, that will import all of the modules and export them too. You can then import this one module into all your files. When it comes to testing, you have two choices : either 1) import the big module, or 2) import all the required Material modules. My rule of thumb is : if more than 7 modules are needed, I use the one module, and if less are required, then I import them manually. – Jul 02 '18 at 11:38
Again, it's a **rule of thumb**, not an absolute truth, this is just personal preference. Just be aware that importing all the modules (even the unneeded ones) will take more time (tree shaking has to be done) – Jul 02 '18 at 11:39
Dont get it, how can there be 7 modules, when I have only one module per this componenet I wanna test, and a general one,(but sure these modules have too many imports on them). Now the things inside both of them are to be imported? And there must be arule cause there are so many things I do not need and it gives errors. – Tester Jul 02 '18 at 11:44
Make a question and refer me to it, I can't just answer you without code or context. – Jul 02 '18 at 11:46

Error: Can't bind to 'ngModel' since it isn't a known property of

1 Answers1