Question

我正在尝试使用Angular Material库，但是我的应用程序无法识别组件。

我的app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    NgbModule,
    RouterModule,
    AppRoutingModule,
    MaterialModule,
    ToastrModule.forRoot()
  ],
  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

material.module.ts：

import { NgModule } from '@angular/core';
import {
  MatButtonModule,
  MatFormFieldModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatInputModule,
  MatCheckboxModule,
  MatRippleModule,
  MatSelectModule,
  MatTooltipModule,
  MatProgressBarModule
} from '@angular/material';
import { MatMenuModule } from '@angular/material/menu'

@NgModule({
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatCheckboxModule,
    MatRippleModule,
    MatSelectModule,
    MatTooltipModule,
    MatProgressBarModule,
    MatMenuModule
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatCheckboxModule,
    MatRippleModule,
    MatSelectModule,
    MatTooltipModule,
    MatProgressBarModule,
    MatMenuModule
  ]
})

export class MaterialModule { }

和package.json：

{
  "name": "black-dashboard-angular",
  "version": "1.0.0",
  "description": "Black Dasboard Angular, a Creative Tim Desgin. Coded by Creative Tim",
  "scripts": {
    "start": "node server\\index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/black-dashboard-angular.git"
  },
  "author": "Creative Tim <hello@creative-tim.com> (https://www.creative-tim.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/black-dashboard-angular/issues"
  },
  "homepage": "https://demos.creative-tim.com/black-dashboard-angular/#/dashboard",
  "private": false,
  "dependencies": {
    "@angular/animations": "8.0.2",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "8.0.2",
    "@angular/compiler": "8.0.2",
    "@angular/core": "8.0.2",
    "@angular/forms": "8.0.2",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "8.0.2",
    "@angular/platform-browser-dynamic": "8.0.2",
    "@angular/router": "8.0.2",
    "@ng-bootstrap/ng-bootstrap": "4.2.1",
    "chart.js": "2.8.0",
    "core-js": "3.1.4",
    "express": "^4.17.1",
    "hammerjs": "^2.0.8",
    "ngx-toastr": "10.0.4",
    "rxjs": "6.5.2",
    "tslib": "1.10.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.800.3",
    "@angular/cli": "8.0.3",
    "@angular/compiler-cli": "8.0.2",
    "@angular/language-service": "8.0.2",
    "@types/jasmine": "3.3.13",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.0.8",
    "codelyzer": "5.1.0",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.5",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "protractor": "5.4.2",
    "ts-node": "8.3.0",
    "tslint": "5.17.0",
    "typescript": "3.4.5"
  }
}

我已经尝试过Angular Material Modules are not recognized的解决方案，但对我而言不起作用。有人可以帮忙吗？

Answer 1

您是否要在子模块（ComponentsModule）中导入MaterialModule？

此外，我建议您像这样对AppModule中的导入重新排序：

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    MaterialModule,
    NgbModule,
    ToastrModule.forRoot(),
    ComponentsModule,
    AppRoutingModule
  ],
  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，如果要在RouterModule中导入AppRoutingModule，则不应将其导入AppModule，因为已经在AppRoutingModule中导入

材料模块组件无法识别

1 个答案: