' mat-form-field' is not a known element

Question

Currently I have an angular component x.component.html which contains the following (using angular material):

<div class="example-container mat-elevation-z8">

  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="farbeKey">
      <mat-header-cell *matHeaderCellDef> farbeKey </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.farbeKey}} </mat-cell>
    </ng-container>
    ....

Furthermore I have the component x.component.ts which looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { User } from '../models/user.model';
import { OrgtService } from './orgt.service';

@Component({
  selector: 'x-component',
  styleUrls: ['x.component.css'],
  templateUrl: 'x.component.html',
})

export class XComponent implements OnInit {

  users: User[] = []

  constructor(private xService: XService) {
  }

  displayedColumns = ['c1', 'c2', 'c3', 'c4'];
  dataSource = new MatTableDataSource(this.users); 


  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  public ngOnInit() {
    this.xService.getUsers()
      .subscribe(
        (users) => {
          this.users = users;
        }
      );
  }
}

But the problem is that If try to access that in the browser I got the following error message (this is only an excerpt):

Uncaught Error: Bootstrap's JavaScript requires jQuery
    at scripts.bundle.js:8
(anonymous) @ scripts.bundle.js:8
compiler.js:485 Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

  <div class="example-header">
    [ERROR ->]<mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"): ng:///AppModule/OrgtComponent.html@3:4
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' 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. ("
  </div>

Here is my package.json file:

{
  "name": "portal-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.2.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.2.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

If I correctly understand I'm missing somehow / somewhere the definition of the mat-... tags but I don't know where I need to put what kind of definition? Can someone enlighten me a little bit?

Update (1): After installing jquery and changing the .angular-cli.json file the error message has change as expected to remove the JQuery issue like this:

ncaught Error: Template parse errors: 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

  <div class="example-header">
    [ERROR ->]<mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"): ng:///AppModule/OrgtComponent.html@3:4
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' 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. ("
  </div>

Also I have added the imports based on Juan's suggestions.

Update (2): After integrating each answer my app starts and compiles without any issue. Now I got the following:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'x'
Error: Cannot match any routes. URL Segment: 'x'

Update (3):

So after fixing the app.routing.module.ts like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { UserComponent } from './user/user.component';
import {AddUserComponent} from './user/add-user.component';
import { XComponent} from './x/x.component';

const routes: Routes = [
  { path: 'users', component: UserComponent },
  { path: 'add', component: AddUserComponent },
  { path: 'x', component: XComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

I got another step further and got this:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[XService]: 
  StaticInjectorError[XService]: 
    NullInjectorError: No provider for XService!
Error: StaticInjectorError[XService]: 
  StaticInjectorError[XService]: 
    NullInjectorError: No provider for XService

Answer 1

You need to import the following in your app.module.ts:

import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {FormsModule} from '@angular/forms';

And in your x.component.ts:

import {MatTableDataSource} from '@angular/material';

Answer 2

It's impossible to have jquery as a dependancie of angular material. The problem of jquery and angular mat-form-field are tow seperate problems.

It's seem that you install Bootstrap's theme, which require jquery. So install jquery npm install jquery --save

add the typings: npm install --save-dev @types/jquery

And add the script to angular-cli.json:

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

To fix mat-form-field issue you need to import this module in your app.module.ts:

import {MatInputModule} from '@angular/material/input';

...

@NgModule({
  ...,
  imports: [
    ...,
    MatInputModule,
    ...
  ],
  ...
})
export class AppModule { }

One convenient way to handle angular material import is to create a custom module for material component: https://medium.com/@armno/creating-a-custom-material-module-in-angular-ee6a5e925d30

Answer 3

install jquery

npm install jquery

    "../node_modules/jquery/dist/jquery.min.js",

add this line into "scripts": [] in angular-cli.json

now check you module.

MatTableModule and MatFormModule imported in you module

Update

replace in your xcomponent

  @Component({
      selector: 'x-component',
      styleUrls: ['x.component.css'],
      templateUrl: 'x.component.html',
       providers:[xService] // need to set provider
    })