angular - 在上部模块中导入 Angular Material 不起作用

Question

我在 Angular 4 中导入模块时遇到问题。我有以下结构:

我的 app.module.ts

....
import { NavbarComponent } from './a2-components/navbar/navbar.component';
import { SidebarComponent } from './a2-components/sidebar/sidebar.component';
import {AdminModule} from './admin/admin.module';

@NgModule({
  imports: [
     ...
     AdminModule,
     MaterialModule.forRoot(),
     ...
  ],
  providers: [ ],
  declarations : [
    ...
    NavbarComponent,
    SidebarComponent,
    ...
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {

}

我的管理模块

...
import { AdminComponent }     from './admin.component';
import { HomeComponent }      from './home/home.component';
import { AdminService }       from './admin.service';

@NgModule({
  imports: [ ... ],
  declarations: [ AdminComponent, HomeComponent ],
  providers:[ AdminComponent, AdminService ]
})
export class AdminModule {}

app.module 是一个比 admin.module 层次更大的模块。我正在导入 @angular/material、NavbarComponent 和 SidebarComponent，但出现错误，指出在模块 admin.module 中找不到 Material 、NavbarComponent 和 SidebarComponent。

错误图片:

有人可以给我提示吗？

Answer 1

我们可以看看你的 angular-cli.json、index.html 或 Style.css 吗？

当你添加一个样式框架时，比如 bootstrap，有必要将 CSS 链接到你的新框架。

在您的 style.css 中添加以下行:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

其他人认为，当我在模块中添加 Material 时，只需输入以下代码:

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

@NgModule({
imports: [
  MaterialModule,
]})

这对我有用。