角度材料組件不顯示

Question

我是新角度2和角度材料我嘗試創建一個例子來檢查角度材料，但它不工作。我得到空的HTML頁面。我的代碼如下。

應用組件TS：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
} 

APP模塊的.ts

import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 
    import { AppComponent } from './app.component'; 
    import {MdSidenavModule,MdMenuModule} from '@angular/material'; 
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
    import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 
    import 'hammerjs'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    MdSidenavModule, 
    BrowserAnimationsModule, 
    NoopAnimationsModule, 
    MdMenuModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 


export class AppModule { } 

應用組件的Html;

<!--The whole content below can be removed with the new code.--> 


<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<div> 

<md-sidenav-container> 

    <md-sidenav opened="true"> 
    <button> 
    Add 
    </button> 
    </md-sidenav> 
</md-sidenav-container> 


<md-menu> 
    <button md-menu-item> Settings </button> 
    <button md-menu-item> Help </button> 
</md-menu> 
</div> 

styles.css的

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; 

我的package.json

{ 
    "name": "asyncpipe", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.2.6", 
    "@angular/cdk": "^2.0.0-beta.8", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/material": "^2.0.0-beta.8", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "core-js": "^2.4.1", 
    "hammerjs": "^2.0.8", 
    "rxjs": "^5.1.0", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.1.2", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "2.5.45", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.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-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

我的角cli.json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "asyncpipe" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [ 
     "../node_modules/hammerjs/hammer.min.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json" 
    }, 
    { 
     "project": "src/tsconfig.spec.json" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
} 

我已經在Web上提到了所有的依賴關係。請幫我解決這個問題。

Answer 1

取下imports: []import { MaterialModule } from '@angular/material';和MaterialModule了。它自beta.3[Changelog]以來已棄用。

此外，添加NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 

@NgModule({ 
    ... 
    imports: [NoopAnimationsModule], 
    ... 
}) 

我還發現，在Github上列出的錯誤issue。看起來像回退到animations版本4.1.3是現在的解決方案。

嘗試npm install '@angular/animations"@4.1.3' --save

讓我知道這是否有助於！

UPDATE：

md-menu沒有顯示出來，因爲它需要一個mdMenuTriggerFor可以打開菜單。在此之前，它保持隱藏狀態。此外，要使sidenav正常工作，所有內容都必須位於md-sidenav-container標記內。 Sidenav doc，Menu doc。

請以下更改您的html代碼：

<md-sidenav-container style="height: 500px"> 

    <button md-icon-button [mdMenuTriggerFor]="menu"> 
    <md-icon>more_vert</md-icon>Menu 
    </button> 


    <md-sidenav opened="true" #sidenav 
     style="background-color: skyblue"> 
    <button md-raised-button style="margin: 2px 0 0 6px"> 
    Add 
    </button> 
    <p>This is Sidenav</p> 
    </md-sidenav> 

    <md-menu #menu="mdMenu"> 
    <button md-menu-item (click)="sidenav.open()"> Sidenav </button> 
    <button md-menu-item> Settings </button> 
    <button md-menu-item> Help </button> 
    </md-menu> 

</md-sidenav-container> 

Demo

Answer 2

好的。

我認爲這個問題並不是你的代碼特別。從你的意見中我看到你遇到了你的一個項目依賴關係問題（@angular/platform-browser）。有一個在角度報道了一個錯誤： https://github.com/angular/angular/issues/17400

嘗試更新你的依賴於latests一個：4.2.6

要做到這一點，你需要下面的命令來運行：

npm update 

要使確保你是最新的，檢查已安裝軟件包的版本：

npm ls --depth 0 

你也不需要我如果您已經通過MaterialModule導入了所有組件，則單獨導入每個組件。

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    MaterialModule, 
    BrowserAnimationsModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }