' mat-form-field'不是已知元素

目前我有angular component x.component.html ，其中包含以下内容（使用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>
    ....

此外，我有组件 x.component.ts ，如下所示：

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;
        }
      );
  }
}

但问题是，如果尝试在浏览器中访问它，我收到以下错误消息（这只是一个摘录）：

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>

这是我的 package.json 文件：

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

如果我正确理解我错过某种方式/某处 mat-... 标签的定义，但我不知道我需要在哪里放什么样的定义？有人可以开导我一点吗？

Update (1): 安装jquery并更改 .angular-cli.json 文件后，错误消息已按预期更改，以删除JQuery问题，如下所示：

ncaught错误：模板解析错误：'mat-form-field'不是已知元素：1 . 如果'mat-form-field'是Angular组件，则验证它是否是此模块的一部分 . 2.如果'mat-form-field'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息 . （”

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

我也根据Juan的建议添加了进口 .

Update (2): 集成每个答案后，我的应用程序启动并编译没有任何问题 . 现在我得到以下内容：

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

Update (3):

所以在修好了 app.routing.module.ts 之后：

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

我又向前迈了一步，得到了这个：

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