ACD*_*Dev 2 angular-material angular
我在多个项目中使用了 Angular Material 图标，它们工作得很好。由于某种原因，他们目前不参与我的新项目。
\n这是我的 package.json 文件在 node_modules/@angular/material/icons 中...
\n{\n "name": "@angular/material/icon",\n "fesm2020": "../fesm2020/icon.mjs",\n "fesm2015": "../fesm2015/icon.mjs",\n "esm2020": "../esm2020/icon/icon_public_index.mjs",\n "typings": "./icon_public_index.d.ts",\n "module": "../fesm2015/icon.mjs",\n "es2020": "../fesm2020/icon.mjs"\n}\n这是我的应用程序模块...
\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { MaterialModule } from './material.module';\n\nimport { AppRoutingModule } from './app-routing.module';\n\nimport { SharedModule } from './shared/shared.module';\n\nimport { AppComponent } from './app.component';\nimport { NavComponent } from './nav/nav.component';\n\n@NgModule({\n declarations: [\n AppComponent,\n NavComponent\n ],\n imports: [\n BrowserModule, \n BrowserAnimationsModule, \n MaterialModule, \n AppRoutingModule, \n SharedModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n这是我的模块，我在其中存放我的材料导入......
\nimport { NgModule } from "@angular/core";\n\nimport { MatCardModule } from '@angular/material/card';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\n\n\n@NgModule({\n imports: [\n MatCardModule, \n MatButtonModule, \n MatToolbarModule, \n MatIconModule\n ], \n exports: [\n MatCardModule, \n MatButtonModule, \n MatToolbarModule, \n MatIconModule\n ]\n})\nexport class MaterialModule {}\n我尝试使用图标的组件...
\n// The below code simply results in the word "menu" rather than the icon\n\n<mat-toolbar>\n <a routerLink="/home">\n <mat-icon>menu</mat-icon>\n </a>\n</mat-toolbar>\n这是我的index.html...
\n<!doctype html>\n<html lang="en">\n<head>\n <meta charset="utf-8">\n <title>Eventer</title>\n <base href="/">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" type="image/x-icon" href="favicon.ico">\n <link rel="preconnect" href="https://fonts.gstatic.com">\n <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">\n <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n</head>\n<body>\n <app-root></app-root>\n</body>\n</html>\n\n更新
\n这可能与这种奇怪的、不完整的安装有关（因为某些材质项目可以工作，但图标不能）。当我创建一个新项目时，我将尝试浏览入门指南并使用 ng add @angular/material，但我得到以下反冲...
\n$ ng add @angular/material\n- Determining package manager...\ni Using package manager: npm\n- Searching for compatible package version...\n\xce\x93\xc3\xaa\xc3\x9c Found compatible package version: @angular/material@13.2.1.\n- Loading package information from registry...\n\xce\x93\xc3\xaa\xc3\x9c Package information loaded.\nNo terminal detected. '--skip-confirmation' can be used to bypass installation confirmation. Ensure package name is correct prior to '--skip-confirmation' option usage.\nCommand aborted.\n在这些情况下，我必须仔细检查并使用 npm 命令来手动安装项目，这可能就是我的材质图标无法工作的原因。有人知道为什么我在尝试使用 ng add 时收到上述消息吗？
\n谢谢。
\n最有可能发生的事情是您使用npm install而不是ng add安装有角材料。ng add为角度项目执行一些额外的步骤。
您最好的选择是运行ng add @angular/material重新安装。
具体执行哪些额外步骤位于此处：https://material.angular.io/guide/getting-started
就像另一个答案中提到的那样，缺少此样式表index.html将会中断mat-icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
只是更新：ng add由于涉及 git bash https://github.com/angular/angular-cli/issues/21512的错误，作者的命令失败。切换到不同的 shell 解决了这个问题。
| 归档时间： |
|
| 查看次数： |
7850 次 |
| 最近记录： |