Related
I'm pretty new to Angular, doing my first app. I wanted to use Angular Material library icons and encountered an error saying that 'mat-icon' is not a known element:.
Full error here
error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
11 <mat-icon>favorite</mat-icon>
From what I understood, the problem comes when you don't import MatIconModule in App module.
However, I still get the same error even after importing it.
Here is what I have tried so far.
html file, obviously error refers to this component, where I use the icon
<div>
<div>
<button mat-fab disabled aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
</div>
app.modules.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { HttpClientModule } from "#angular/common/http";
import { MatIconModule } from "#angular/material/icon";
import { MatButtonModule } from "#angular/material/button";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { MatToolbarModule } from "#angular/material/toolbar";
import { MatCardModule } from "#angular/material/card";
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatCardModule,
MatToolbarModule,
HttpClientModule,
MatIconModule,
MatButtonModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And Package.json
{
"name": "angular-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~10.2.5",
"#angular/cdk": "~10.2.7",
"#angular/common": "~10.2.5",
"#angular/compiler": "~10.2.5",
"#angular/core": "~10.2.5",
"#angular/forms": "~10.2.5",
"#angular/material": "^10.0.0",
"#angular/material-moment-adapter": "^10.0.0",
"#angular/platform-browser": "~10.2.5",
"#angular/platform-browser-dynamic": "~10.2.5",
"#angular/router": "~10.2.5",
"hammerjs": "^2.0.8",
"rxjs": "~6.6.7",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.4",
"#angular/cli": "~10.2.4",
"#angular/compiler-cli": "~10.2.5",
"#angular/language-service": "~10.2.5",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"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": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.0.8"
}
}
I also tried npm i, but didn't help either.
Let me know please, if I should include more files so that you can understand the problem better.
Any help will be appreciated.
Update
Now instead of importing Material components in app.module.ts I've created `material.module.ts
and now import looks like so.
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { HttpClientModule } from "#angular/common/http";
import { MaterialModule } from "./material/material.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
material.module.ts
import { NgModule } from "#angular/core";
import { MatButtonModule } from "#angular/material/button";
import { MatIconModule } from "#angular/material/icon";
const MaterialComponents = [
MatButtonModule,
MatIconModule,
];
#NgModule({
imports: [MaterialComponents],
exports: [MaterialComponents],
providers: [
{
provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
useValue: {
strict: true,
useUtc: true,
},
},
],
declarations: [],
})
export class MaterialModule {}
Unfortunately, even though it looks better but doesn't work either.
I feel like there is version mismatch.
Have you already add the font in the index.html
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Here is an example
Simply import MatIconModule and add MatIconModule in your imports array in app.module.ts
I have migrated and old AngularJS application to run, with Angular 5, in upgrade mode using the UpgradeModule. Everything is working I have some services migrated to Angular and utilise some more modern libs, like ngx-translate. It was all working fine. Then I updated to Angular 6 following the update guide. I fixed the rxjs issues and all imports are pointing correctly but when I stat the app I just get:
Error: Can't resolve all parameters for ApplicationModule: (?).
In the console.
This is the module part of my main.ts file:
import {NgModule} from '#angular/core';
import {HTTP_INTERCEPTORS} from '#angular/common/http';
import {HttpClientModule, HttpClient} from '#angular/common/http';
import {BrowserModule} from '#angular/platform-browser';
import {UpgradeModule} from '#angular/upgrade/static';
import { FormsModule } from '#angular/forms';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {ErrorHandler} from './components/error-interceptor/error.handler';
import {RequestInterceptor} from './components/error-interceptor/http-error-interceptor.service';
import {TranslateLoader, TranslateModule} from '#ngx-translate/core';
import {httpLoaderFactory} from './http.loader.factory';
import {uiRouterStateProvider, uiRouterStateParamsProvider} from "./ajs-upgraded-providers";
import {RestService} from './components/rest/rest.service';
import {TemplateService} from './configuration/templates/template.service';
import {ValidationService} from './components/form-validation/form-validation.service';
import {AlertService} from './components/alert/alert.service';
import {UtilService} from './app.util.service';
import {AlertComponent} from './components/alert/alert.directive';
import {TemplateCreateComponent} from './configuration/templates/modify/template-create.controller';
#NgModule({
imports: [
BrowserModule,
UpgradeModule,
HttpClientModule,
FormsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
RestService,
ValidationService,
AlertService,
TemplateService,
UtilService,
uiRouterStateProvider,
uiRouterStateParamsProvider,
ErrorHandler,
{
provide: HTTP_INTERCEPTORS,
useClass: RequestInterceptor,
multi: true,
}
],
declarations: [
//solid angular components need only be entered here
AlertComponent,
TemplateCreateComponent
],
entryComponents: [
//add downgraded components here and in declarations
AlertComponent,
TemplateCreateComponent
]
})
export class AppModule {
// Override Angular bootstrap so it doesn't do anything
ngDoBootstrap() {
}
}
// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['PortalApp']);
});
This is the package.json file:
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/cli": "^6.2.9",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/platform-server": "^6.1.10",
"#angular/router": "^6.1.10",
"#angular/upgrade": "^6.1.10",
"#ctrl/ngx-codemirror": "^1.3.10",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"angular": "~1.6.10",
"angular-animate": "~1.6.10",
"angular-breadcrumb": "~0.5.0",
"angular-chosen-localytics": "~1.8.0",
"angular-clipboard": "^1.5.0",
"angular-cookies": "~1.6.10",
"angular-in-memory-web-api": "~0.5.0",
"angular-loading-bar": "~0.9.0",
"angular-messages": "~1.6.10",
"angular-moment-picker": "^0.10.2",
"angular-sanitize": "~1.6.10",
"angular-touch": "~1.6.10",
"angular-translate": "~2.18.1",
"angular-translate-loader-url": "~2.18.1",
"angular-translate-storage-cookie": "~2.18.1",
"angular-translate-storage-local": "~2.18.1",
"angular-ui-grid": "~4.8.1",
"angular-ui-router": "~1.0.22",
"angular-ui-sortable": "0.14",
"bootstrap": "^4.3.1",
"chosen-js": "~1.8.7",
"codemirror": "^5.49.2",
"core-js": "^2.6.11",
"jquery": "~2.2.4",
"jquery-ui": "~1.12.1",
"moment": "~2.24.0",
"ng-csv": "~0.3.6",
"ng-file-upload": "~12.2.13",
"ng-ui-router-state-events": "^1.0.1",
"popper.js": "^1.15.0",
"rxjs": "6.0.0",
"rxjs-compat": "6.2.2",
"selectize": "~0.12.6",
"tslint": "~5.0.0",
"typescript": "~2.7.2",
"typings": "^2.1.1",
"ui-bootstrap4": "~3.0.6",
"web-animations-js": "^2.3.1",
"webpack-cli": "^3.3.9",
"zone.js": "^0.8.4"
}
The last thing I fixed was the ngx-translate that has a different version for Angular 5 and 6 but this has been updated and still the issue.
Any idea what might be causing the issue?
OK after a lot of searching I came across a post in the git hub issues of Angular.
I will link it because it is perfect reading as this error can be caused by a number of different issues.
For me it was the order of the imports and providers specified in the main.ts so here:
providers: [
uiRouterStateProvider,
uiRouterStateParamsProvider,
UtilService,
RestService,
ValidationService,
AlertService,
TemplateService
],
declarations: [
//solid angular components need only be entered here
AlertComponent,
TemplateCreateComponent
],
entryComponents: [
//add downgraded components here and in declarations
AlertComponent,
TemplateCreateComponent
]
for instance teh ValidationService and the AlertService both referenced the UtilService but it was below them in the imports. After changing this my issue was fixed.
This is the link to the issue, I think it is useful as this can be a good reference for future people saving them a day of searching.
angular git hub issue
I looked through the forums, but couldn't find anything relevant.
I just started the tutorial 3 days ago, got to Step 7, and when I add the InMemoryWebApiModule to the mix (as detailed in the steps), I get this error:
All of my config files are directly from what was provided in the tutorial, but I'll provide them here anyway.
Any ideas as to what's going on?
Here is my package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
Here is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
#NgModule({
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService)
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent
],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Here is systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Take a look at the CHANGELOG. You need to use the umd bundle, and remove it from the packages
In systemjs.config.js you should change the mapping to:
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
then delete from packages:
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
I am going through the NG2 tutorial on here, but I've hit a stumbling block.
When I try and import my AppRoutingModule in my app.module.ts file I get a 'Cannot find module './app-routing.module' error. I have seen this post on here, amongst other solutions, but they all seem to relate to systemjs and not webpack.
Here is my package.json:
{
"name": "heroes",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"angular2-in-memory-web-api": "0.0.21",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.15",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.5",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}
}
Here is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { AppRoutingModule } from './app-routing.module'; //ERROR
...
#NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService), //ERROR: Cannot find name 'InMemoryDataServiceInMemoryDataService
RouterModule.forRoot([
{
path: '', redirectTo: '/dashboard', pathMatch: 'full'
},
{
path: 'dashboard', component: DashboardComponent
},
{
path: 'detail/:id', component: HeroDetailComponent
},
{
path: 'heroes', component: HeroesComponent
}
])
],
providers: [HeroService],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my specs (I am using angular CLI):
angular-cli: 1.0.0-beta.15
node: 4.2.6
os: linux x64 (ubuntu)
Not sure what else I can try? I guess I need to import the module somehow?
I did try and run:
npm install angular-route
But this led to:
├──UNMET PEER DEPENDENCY
#angular/common#2.0.0
├──UNMET PEER DEPENDENCY
#angular/core#2.0.0
├──UNMET PEER DEPENDENCY
#angular/platform-browser#2.0.0
└── angular-route#1.5.8
Anyone have any suggestions?
Checkout the live example with all the files
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
According to comments, it seems that you might be missing the app-routing file altogether. Perhaps you missed the piece describing that, or sometimes the documentation might be outdated. Please check the plunker showing a working, live example with the needed files.
Right before making a new angular project, the CLI prompts you to either include routing or not, like this:
Would you like to add Angular routing? Yes
Make sure you type in Y when it does so, or else your project won't be made with routing files.
Following the Angular 2 "Hero tour" tutorial, I encounter the following error:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
<div>
<label>name: </label>
<input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
</div>
"): AppComponent#6:13 ; Zone: <root> ; Task: Promise.then ; Value:
My package.json content is:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2": "^2.0.0-beta.17",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
app.module.ts content:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And app.component content :
import { Component } from '#angular/core';
export class Hero {
id: number;
name: string;
}
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
I spent time to read and apply solutions proposed in similar question on stackoverflow with no success.
What could be wrong?
Solution :
use
//main entry point
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
instead of :
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Your app.module.ts should look like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, provideForms, disableDeprecatedForms } from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [
disableDeprecatedForms(),
provideForms()],
})
export class AppModule { }
UPDATE: this is now obsolete with RC6 and beyond
In RC6 it looks like this:
...
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [ ..., FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I.e. provideForms, disableDeprecatedForms are removed as deprecated. Check https://github.com/angular/angular/blob/master/CHANGELOG.md for details.
Thanks for it, unless that part...nothing going on!
import { FormsModule, provideForms, disableDeprecatedForms } from '#angular/forms';
A similar error occurs if you don't update the app.modules.ts file as required.
That is adding the following import
import { FormsModule } from '#angular/forms'; and the FormsModule as follows:
imports: [ BrowserModule, FormsModule ],
The app works fine. But I had this error in tests. You should import FormsModule in app.component.spec.ts like in app.module.ts to fix this.