首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用ng生成材料组件时,am获取找不到NgModule错误

是由于缺少NgModule的引入导致的。NgModule是Angular中的一个装饰器函数,用于定义一个模块。它包含了该模块所需的组件、指令、服务等,并且可以导入其他模块。

要解决这个错误,可以按照以下步骤进行操作:

  1. 确保已经正确安装了Angular Material库。可以通过在终端中运行以下命令来安装:
  2. 确保已经正确安装了Angular Material库。可以通过在终端中运行以下命令来安装:
  3. 在需要使用材料组件的模块中,导入MatButtonModule(或其他需要使用的材料组件模块)。例如,在app.module.ts中添加以下代码:
  4. 在需要使用材料组件的模块中,导入MatButtonModule(或其他需要使用的材料组件模块)。例如,在app.module.ts中添加以下代码:
  5. 如果你是在其他模块中使用材料组件,也需要在该模块中导入相应的材料组件模块。
  6. 确保在需要使用材料组件的组件中,已经正确导入了MatButtonModule(或其他需要使用的材料组件)。例如,在app.component.ts中添加以下代码:
  7. 确保在需要使用材料组件的组件中,已经正确导入了MatButtonModule(或其他需要使用的材料组件)。例如,在app.component.ts中添加以下代码:
  8. 这样就可以在模板中使用mat-button指令来使用材料按钮组件。
  9. 如果以上步骤都正确无误,但仍然出现找不到NgModule错误,可以尝试重新编译项目。在终端中运行以下命令:
  10. 如果以上步骤都正确无误,但仍然出现找不到NgModule错误,可以尝试重新编译项目。在终端中运行以下命令:
  11. 这将重新编译并启动开发服务器,如果有任何错误,将会在终端中显示。

总结:使用ng生成材料组件时,am获取找不到NgModule错误通常是由于缺少NgModule的引入导致的。通过正确导入材料组件模块,并在需要使用材料组件的组件中导入相应的材料组件,可以解决这个错误。如果问题仍然存在,可以尝试重新编译项目来查找其他可能的错误。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 6正式版发布,都有哪些新功能

官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本的依赖包,让你的依赖包与你的应用程序同步,使用 schematics ,第三方还能提供脚本更新...ng update不会取代你的软件包管理器,而是在后台使用 npm 或 yarn 来管理依赖包,除了更新和监视依赖包外,ng update还会在必要的时候对你的项目进行改造。...Angular Material 初始组件 一旦运行ng add @angular/material并添加材料到现有的应用程序中,就能够生成 3 个新的初始组件。...例如,之前的写法是这样的: @NgModule({ ......每个主版本的支持时间是18个月,其中,前6个月是积极开发阶段,接下的 12 个月是错误修正和安全补丁阶段。

4.2K20
  • Angular Library 快速入门

    build --prod sf-lib 小伙伴们,在构建 Library ,记得始终添加 —prod 标志。...创建 sf-lib 组件 相信 ng generate 命令对于使用过 Angular CLI 的同学来说,都不会陌生。...要为 sf-lib 库创建自定义组件,我们也可以使用该命令,唯一需要注意的是就是需要设置 --project 参数: $ ng generate component button --project=sf-lib...在完成新建 ButtonComponent 组件的导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以在模板中使用刚创建的...: $ ng g service data --project=sf-lib 以上命令成功执行后,将在 sf-lib/lib/src 目录下生成一个 data.service.ts 文件: import

    2.4K10

    Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 {{ hero.name | uppercase...@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务,Angular...ii. component:当导航到此路由,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 {{ hero.name | uppercase...@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务,Angular...ii. component:当导航到此路由,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

    3.7K50

    Angular 从入坑到挖坑 - 路由守卫连连看

    在跳转到组件获取某些必须的数据 离开页面,提示用户是否保存未提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...,通过命令行,在 app/auth 路径下生成一个授权守卫类,CLI 会提示我们选择继承的路由守卫接口,这里选择 CanActivate 即可 ng g guard auth/auth ?...4.3、异步路由 4.3.1、惰性加载 当应用逐渐扩大,使用现有的加载方式会造成应用在第一次访问就加载了全部的组件,从而导致系统首次渲染过慢。...因此这里可以使用惰性加载的方式在请求具体的模块才加载对应的组件 惰性加载只针对于特性模块(NgModule),因此为了使用惰性加载这个功能点,我们需要将系统按照功能划分,拆分出一个个独立的模块 首先通过...,在后续请求,该模块和路由都是立即可用的 4.3.2、CanLoad:杜绝未通过认证授权的组件加载 在上面的代码中,对于 CrisisModule 模块我们已经使用 CanActivate、CanActivateChild

    3.8K30

    Angular 5 快速入门与提高

    Angular框架对应用进行编译引导,将使用这些元数据构造视图。...因此,在 应用开发中引入了模块(NgModule)的概念来组织不同的组件(及服务),一个 Angular应用至少需要创建一个模块。...为了区别于JavaScript语言本身的模块概念,在本课程中将使用__NG模块__来 表示一个Angular模块。 类似于组件NG模块就是一个应用了NgModule装饰器的类。...NgModule装饰器声明了一些关键的元数据,来通知框架需要载入哪些NG模块、 编译哪些组件以及启动引导哪些组件: imports: 需要引入的外部NG模块 declarations:本模块创建的组件,...而对于AOT而言,生成模块 工厂就结束了,应用启动使用bootstrapModuleFactory()调用生成的模块工厂即可。

    1.8K20

    Angular 从入坑到挖坑 - 表单控件概览

    在进行用户输入数据有效性验证,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div class="form-group...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过在<em>组件</em>中构造 FormGroup 实例来完成对于多个表单控件的统一管理 在<em>使用</em> FormGroup <em>时</em>,同样在<em>组件</em>中定义一个属性用来承载控件组实例...返回 null,当数据无效<em>时</em>,则会返回一个对象信息,这里的 nameinvalid 就是我们在模板中<em>获取</em>到的<em>错误</em>信息的 key 值 <label...在模板页面中,则需要通过<em>获取</em>整个表单的<em>错误</em>对象信息来<em>获取</em>到交叉验证的<em>错误</em>信息 姓名:...对于模板驱动表单,同样是采用自定义指令的方式进行跨字段的交叉验证,与单个控件的验证不同,此时需要将指令添加到 form 标签上,然后<em>使用</em>模板引用变量来<em>获取</em><em>错误</em>信息 import { Directive

    18.9K20

    Angular 2 + 折腾记 :(6) 动手实现只有年月的小组件

    前言 这个组件实现并不是很复杂,我会尽量注释; 这货诞生的理由就是项目刚好有一个地方必须只能选择年月,而github上ng2+日期组件都涉及到年月日或时分秒; 效果用gifcam录制的,色彩有些失真,将就吧...---- 实现思路 月份只有十二个,只要把个位数做好补位就好 年份的生成是可控的(传参),当前年份往前推几年和往后推几年构成; 数据遍历结构很简单 { date:2017, // 月份是字符串,...年份是数字 active:false, type:'year' // 月份是'month' }复制代码 页面样式就自行折腾啦,我这里只是用了最直白粗暴的下拉滑动 在ng4写的。...0 -> 1 就相当于 0% -> 100%复制代码 封装成一个模块给其他使用 import { NgModule } from '@angular/core'; import { CommonModule...---- 组件使用 温馨提示: 若不是以模块的方式到处,只要在使用的模块引入组件声明下就能使用 反之则需要引入这个模块,方可使用 局部代码 module // 在要使用的模块中引入 // 公用组件 import

    74310

    Angular 从入坑到挖坑 - 模块简介

    使用 @NgModule 装饰器,通常会使用到下面的属性来定义一个模块 declarations:当前模块中的组件、指令、管道 imports:当前模块所需的其它 NgModule 模块...当创建新的组件,需要将它们添加到 declarations 数组中。...每个组件都只能声明在一个 NgModule 类中,同时,如果你使用了未声明过的组件,Angular 将会报错 同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明...imports imports 数组表明当前模块正常工作需要引入哪些的模块,例如这里使用到的 BrowserModule、AppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule...CLI 命令行进行创建 -- 创建名为 xxx 的特性模块 ng new component xxx import { NgModule } from '@angular/core'; import {

    1.8K20

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    在我们开始生成任何代码之前,AppComponent就在这里,所以我们的新组件实际上将模块填充到两个地方:首先,它们从定义文件中导入,然后它们被包含在我们的NgModule装饰器的声明数组中。...如果您是从头开始创建一个新组件,并忘记向NgModule添加一个新模块,但尝试将其添加到您的标记中,那么您的应用程序将无法使用JS控制台中的下一个错误: Uncaught Error: Template...它们被用在我们应用程序的不同部分,所以它们可能会一路销毁 - 例如,当我们在路由中使用组件作为页面(我们将在本指南后面讨论路由)。...其实,我们可以欺骗并使用takeWhile运算符。通过使用它,我们确保我们的数据流一旦发生this.alive错误就会停止发布新值,并且我们只需在该onDestroy组件的函数中设置该值。...当我们从订阅中获取数据,您只需要实现该Remove效果。但我会把它留给你。 路由和模块 我们来谈谈我们的应用程序组合。

    42.6K10

    使用Angular8和百度地图api开发《旅游清单》

    我们将收获: Angular8基本用法,架构 使用百度地图API实现自己的地图应用 解决调用百度地图API的跨域问题 对localStorage进行基础封装,进行数据持久化 material...,NgModule 为一个组件集声明了编译的上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关的能力,每个 Angular 应用都有一个根模块,通常命名为 AppModule。...root' }) export class Storage {} ``` 复制代码 路由 Angular 的 Router 模块提供了一个服务,它可以让你定义在应用的各个不同状态和视图层次结构之间导航使用的路径...百度地图api及跨域问题解决 我们进入百度地图官网后,去控制台创建一个应用,此时会生成对应的应用ak,如下: 本地调试将referer写成*即可,但是我们用ng的http或者fetch去请求api接口仍会出现跨域...未完善的部分:添加清单,如果添了不符合规范的地址或者百度地图查不到的地址,因该出现错误提示,这块会在后期优化。

    6K30

    使用 Angular Transfer State 的一个具体例子

    当您单击城市名称,该应用程序会显示该城市的当前天气。 因为我们希望我们的应用程序是可抓取和可索引的,所以我们使它通用:城市页面在服务器上呈现,存储为 HTML 文件并由 HTTP 服务器提供服务。...使用下列命令将这个例子 clone 到本地: $ git clone https://github.com/feloy/ng-demo-transfer-state $ cd ng-demo-transfer-state...为此,服务器应用程序将在它生成的 HTML 页面中添加我们要传输的数据。 包含在此生成的 HTML 页面中的浏览器应用程序将能够读取此数据。 在这个分支查看解决方案。...复制代码 现在,在为组件提供数据的解析器中,我们可以使用 TransferState API: 在服务器上,我们首先注册 onSerialize 以提供我们将下载的数据,然后我们从我们的数据提供者那里获取数据...在浏览器上,我们使用get方法来获取server提供的数据,我们直接提供这些数据。 我们还从传输状态中删除了提供的数据,因此页面的重新加载将不再使用提供的数据。

    68000
    领券