typescript 角度材料组件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49552161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material Components not working
提问by harsh
If someone wants to down vote then also add the reason
Am i missing something in the configuration? Please suggest Thanks in advance
我在配置中遗漏了什么吗？请建议提前谢谢
ng Version command
ng 版本命令
Versions
Angular CLI: 1.7.0
Node: 8.1.1
OS: win32 x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router
@angular/animations: 5.2.9
@angular/cdk: 5.2.4
@angular/cli: 1.7.0
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack-bundle-analyzer: 2.11.1
webpack: 3.11.0
Repro steps
重现步骤
Step 1 Create new project ng new any-name Step 2 By following steps on https://material.angular.io/guide/getting-startedi.e
步骤 1 创建新项目 ng new any-name 步骤 2 按照https://material.angular.io/guide/getting-started 上的步骤 即
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
Step 3
第 3 步
Material.module.ts
Material.module.ts
import {MatButtonModule,
MatCheckboxModule} from '@angular/material';
@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
})
export class MaterialModule { }
app.component.html
应用程序组件.html
<div>
<input type="button" mat-button placeholder="Holla!">
<button mat-raised-button >Click me!</button>
<mat-checkbox>Check me!</mat-checkbox>
</div>
App.module.ts
应用模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {MaterialModule} from '../shared/material.module'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
styles.css
样式.css
/* You can add global styles to this file, and also import other style files */
/* 你可以给这个文件添加全局样式，也可以导入其他样式文件 */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Observed behavior
观察到的行为
compiler.js:485 Uncaught Error: Template parse errors: 'mat-checkbox' is not a known element: 1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module. 2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
compiler.js:485 Uncaught Error: Template parse errors: 'mat-checkbox' is not a known element: 1. 如果 'mat-checkbox' 是一个 Angular 组件，那么验证它是否是这个模块的一部分。2. 如果'mat-checkbox' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息。("
<button mat-raised-button >Click me!</button>
[ERROR ->]<mat-checkbox>Check me!</mat-checkbox>
</div>"): ng:///AppModule/AppComponent.html@4:2
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
syntaxError @ compiler.js:485
TemplateParser.parse @ compiler.js:24668
JitCompiler._parseTemplate @ compiler.js:34621
JitCompiler._compileTemplate @ compiler.js:34596
(anonymous) @ compiler.js:34497
JitCompiler._compileComponents @ compiler.js:34497
(anonymous) @ compiler.js:34367
then @ compiler.js:474
JitCompiler._compileModuleAndComponents @ compiler.js:34366
JitCompiler.compileModuleAsync @ compiler.js:34260
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5567
(anonymous) @ main.ts:11
./src/main.ts @ main.bundle.js:59
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:75
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
```
``
Desired behavior
期望的行为
What would like to see implemented? It should load the angular material componets
希望看到什么实现？它应该加载角材料组件
Mention any other details that might be useful (optional)
提及可能有用的任何其他详细信息（可选）
Package.json
包.json
{
"name": "mat-learn",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.9",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Main.ts
主文件
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
采纳答案by David
As per the example given here, you also need to export the material modules from your shared materialmodule
根据此处给出的示例，您还需要从共享material模块中导出材料模块
https://material.angular.io/guide/getting-started#step-3-import-the-component-modules
https://material.angular.io/guide/getting-started#step-3-import-the-component-modules
import {MatButtonModule,
MatCheckboxModule} from '@angular/material';
@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule]
})
export class MaterialModule { }
回答by chirag sorathiya
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
add this in style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
在 style.css 中添加这个
