將材質模塊導入功能模塊

我正在嘗試在我的角應用中使用材質設計。我將BrowserAnimationsModule和MdSidenavModule導入到延遲加載功能模塊中。將材質模塊導入功能模塊

而且我在我的控制檯錯誤：

BrowserModule已經加載。如果您需要從惰性加載模塊訪問常見的指令（例如NgIf和NgFor），請改爲輸入 CommonModule。

這是我的功能模塊：

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

import { SharedModule } from '../shared/shared.module'; 
import { ProtectedRoutingModule } from './protected-routing.module'; 
import { ProtectedComponent } from './protected.component'; 
import { TinymceComponent } from '../features/tinymce/tinymce.component'; 

// animations 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
// material designs components 
import { MdSidenavModule } from '@angular/material'; 

@NgModule({ 
    imports: [ 
    SharedModule, 
    ProtectedRoutingModule, 
    BrowserAnimationsModule, 
    MdSidenavModule 
    ], 
    declarations: [ 
    ProtectedComponent, 
    TinymceComponent 
    ], 
    exports: [ 
    SharedModule 
    ], 
    providers: [] 
}) 
export class ProtectedModule { }

這有什麼錯我的代碼？任何人都可以向我解釋？

編輯

但是，當我輸入MdSidenavModule到AppModule和app.component.html添加以下代碼：

<md-sidenav-container class="container"> 
    <md-sidenav mode="side" opened="true" #sidenav class="sidenav"> 
    <nav> 
     <ul> 
     <li><a routerLink = "/" routerLinkActive = "active">Home</a></li> 
     <li><a routerLink = "/dashboard" routerLinkActive = "active">Dashboard</a></li> 
     </ul> 
    </nav> 
    </md-sidenav> 

    <router-outlet></router-outlet> 
</md-sidenav-container>

它工作正常！

編輯

我發現，在根模塊mdSideNav工作只是它不會在子模塊的工作。

MdSidenav已拆分爲MdSidenav和MdDrawer。 MdSidenav現在意味着用於頂層應用程序導航，而抽屜旨在用於更多本地分割視圖。雖然沒有在本次發佈兩個之間引入差異，未來的版本將看到添加到每個

https://changelogs.md/github/angular/material2/

來源

2017-09-27 Salim Ibrogimov

也許你已經在你的'app.module'什麼導入'BrowserAnimationsModule'嘗試把它拿出來，從'ProtectedModule ' – Kuncevic

@Kuncevic：你好，親愛的朋友，當我從'ProtectedModule'中移除'BrowserAnimationsModule'並將其導入'AppModule'時，我沒有任何東西，但是：在我的''標記中有''標記， '... –

@Kuncevic：並沒有錯誤 –

你需要做的是落實CustomMaterialModule第一不同的特點，這可能是看起來像：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { 
    MatSidenavModule, 
    MATERIAL_COMPATIBILITY_MODE, 
    MatIconRegistry 

} from '@angular/material'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    MatSidenavModule, 
    ], 
    exports: [ 
    CommonModule, 
    MatSidenavModule 
    ] 
}) 
export class CustomMaterialModule { 
    static forRoot() { 
    return { 
     ngModule: CustomMaterialModule, 
     providers: [ 
     MatIconRegistry, 
     { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }, 
     ] 
    }; 
    } 
}

然後導入到您的app.module像CustomMaterialModule.forRoot()並在功能模塊的進口，像CustomMaterialModule

在最新的material 2.0.0-beta.11md-前綴被棄用有利於mat-所以我建議遷移到那。

對於beta.11，我們決定完全棄用「md」前綴，並使用「mat」向前移動。這會影響所有類名稱，屬性，輸入，輸出和選擇器（CSS類在2月份更改爲）。「md」前綴將在下一個版本發行版中刪除。

談到BrowserAnimationsModule你最好創建一個core.module，堅持在它https://angular.io/guide/styleguide#style-04-11

來源

2017-09-27 05:14:22 Kuncevic

這沒有幫助，它只在'AppModule'中工作，但是在'ProtectedModule'不... –

你能在線重現或在github上推送你的代碼嗎？ – Kuncevic

將材質模塊導入功能模塊

回答

相關問題