开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular CLI创建组件抛出错误；找不到NgModule

Angular CLI是一个用于快速开发Angular应用程序的命令行界面工具。它提供了一系列的命令，可以帮助开发者快速创建组件、服务、模块等，并且自动处理了许多繁琐的配置工作。

当使用Angular CLI创建组件时，如果抛出了"找不到NgModule"的错误，通常是由于以下几个原因导致的：

组件所在的模块没有正确导入：在Angular中，每个组件都必须属于一个模块。当创建一个新的组件时，需要确保将其所属的模块正确导入到组件文件中。可以通过在组件文件的顶部使用import语句导入模块，例如：import { NgModule } from '@angular/core';。
组件所在的模块没有将组件添加到declarations数组中：在Angular模块中，需要将组件添加到declarations数组中，以便Angular能够正确识别和使用该组件。在模块文件中，找到@NgModule装饰器，并确保在declarations数组中包含了组件的类名，例如：declarations: [AppComponent, MyComponent]。
组件类名或文件名拼写错误：请确保组件类名和文件名的拼写是正确的，并且大小写匹配。在Angular中，组件类名通常采用驼峰命名法，并以大写字母开头，例如：export class MyComponent { ... }，对应的文件名应该是my.component.ts。
组件文件路径错误：如果组件文件的路径不正确，Angular CLI可能无法正确找到组件所在的文件。请确保组件文件的路径与模块文件中的导入路径一致，并且文件存在于正确的位置。

如果以上步骤都正确无误，但仍然出现"找不到NgModule"的错误，可能是由于其他配置问题或依赖关系引起的。可以尝试重新构建项目，更新依赖项，并确保项目的配置文件正确设置。

对于Angular CLI创建组件抛出错误的问题，腾讯云提供了一系列的云原生产品和服务，可以帮助开发者构建和部署Angular应用程序。其中，腾讯云的云服务器CVM、云数据库MySQL、云存储COS等产品都可以与Angular应用程序进行集成和使用。具体的产品介绍和文档可以在腾讯云官网上找到。

腾讯云相关产品和产品介绍链接地址：

云服务器CVM：https://cloud.tencent.com/product/cvm
云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
云存储COS：https://cloud.tencent.com/product/cos

相关搜索:Angular -如何使用Angular CLI创建子组件 Angular 1 cli在创建新应用时出现多个错误 Angular 4找不到在模块内创建的组件 angular cli在库中生成组件不创建scss文件 Angular CLI枚举创建错误 angular-cli(webpack)：未捕获错误:找不到模块“。Angular-CLI不创建所有默认组件 angular-cli不断抛出错误:找不到模块'source-map‘Angular生成组件抛出错误‘找不到模块'chownr'’Docker with Angular给出错误“找不到‘NgModule’的应用程序元数据时出错。”

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular2 ：从 beta 到 release4.0 版本升级总结

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。...管理公用组件创建SharedModule管理所有公用组件 import {NgModule} from '@angular/core'; import {CommonModule} from '@angular...创建，示例如下： import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'...组件迁移后，无法正确订阅事件原因：angular(v4.0.0)中依赖注入，若在不同地方声明provider，则会创建不同的实例。...升级angular-cli版本失败原因：angular-cli版本升级后，对应webpack版本修改了默认的disableHostCheck属性，导致ng serve --port会出现Invalid

8.1K0 0

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

是一个带有 @NgModule 装饰器的类，通过函数的参数来描述这个模块，例如在上节笔记中创建的 CrisisModule，定义了我们在该特性模块中创建的组件，以及需要使用到的其它模块 ?...，只有根模块中才会存在 3.2、应用的根模块根模块是用来启动此 Angular 应用的模块，按照惯例，它通常命名为 AppModule 通过 Angular CLI 新建一个应用后，默认的根模块代码如下...当创建新的组件时，需要将它们添加到 declarations 数组中。...特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作在上一章中，定义了一个 CrisisModule 用来包括包含与危机有关的功能模块，创建特性模块时可以通过 Angular...CLI 命令行进行创建 -- 创建名为 xxx 的特性模块 ng new component xxx import { NgModule } from '@angular/core'; import {

1.8K2 0

Angular Library 快速入门

早期版本的 angular-cli.json 文件已经被替换为 angular.json 文件，文件的内容也发生了改变。...sf-lib 默认创建的组件：通常情况下，我们会删除默认创建的组件，然后创建自定义组件，下面我们就来介绍如何为 sf-lib 创建自定义组件。...创建 sf-lib 组件相信 ng generate 命令对于使用过 Angular CLI 的同学来说，都不会陌生。...接着从 sf-lib 模块中导出组件： import { NgModule } from "@angular/core"; import { SfLibComponent } from "....ButtonComponent 组件：创建 sf-lib 服务除了创建自定义组件之外，我们也可以创建自定义服务

2.3K1 0

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。...@NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象，它会告诉 Angular 如何编译和启动本应用。...bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面。该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。...当你创建更多组件时，也要把它们添加到 declarations 中。每个组件都应该（且只能）声明（declare）在一个 NgModule 类中。...angular.json 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项。

2.9K2 0

Angular 6的新特性介绍

通过ng add可以更加容易向项目中添加新功能（类似npm install ） Angular Material+CDK组件 angular6最大的补充是用于显示分层数据的新树组件。...CLI项目现在将使用angular.json而不是 .angular-cli.json用于构建和项目配置。 ?...点击查看更多配置说明库的支持 CLI最需要的功能之一是支持创建和构建库 ng generate library 该命令将在CLI工作区内创建一个库项目，并对其进行配置以进行测试和构建。...ng generate library 这个命令将在你的CKI工作空间创建一个库项目，并且自动添加配置信息到angular.json文件和tsconfig.json中。...每个主要版本将支持18个月，大约6个月的积极开发，接下来是12个月的关键错误修正和安全补丁。如何升级到6.0.0 按照引导对应用进行升级 ?

2.3K2 1

Angular 英雄编辑器

接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。创建英雄组件使用 Angular CLI 创建一个名为 heroes 的新组件。...@Component 是一个修饰器函数，这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性： selector — 组件的 CSS 元素选择器。...Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。...这是因为 Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。.../blob/master/src/app/hero.ts 小结你使用 CLI 创建了第二个组件 HeroesComponent。

2.5K5 0

Angular 英雄编辑器

接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。创建英雄组件使用 Angular CLI 创建一个名为 heroes 的新组件。...@Component 是一个修饰器函数，这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性： selector — 组件的 CSS 元素选择器。...Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。...这是因为 Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。.../blob/master/src/app/hero.ts 小结你使用 CLI 创建了第二个组件 HeroesComponent。

2.6K7 0

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

：支持创建和构建库。...例如，执行下面的代码： ng generate library 该命令将在 CLI 工作区内创建一个库，并对其进行配置以进行测试和构建。...使用Angular CLI 创建库可以查看下面的链接： https://github.com/angular/angular-cli/wiki/stories-create-library Tree...例如，之前的写法是这样的： @NgModule({ ......每个主版本的支持时间是18个月，其中，前6个月是积极开发阶段，接下的 12 个月是错误修正和安全补丁阶段。

4.2K2 0

angular 入门1

配置环境 1.1 安装命令行 cnpm install -g @angular/cli 2. 创建项目 2.1....项目结构 e2e: end-to-end测试 src: 项目源码 .angular-cli.json: angular cli配置文件 tsconfig.json tsconfig.app.json tsconfig.spec.json.../platform-browser'; // 模块装饰器 import { NgModule } from '@angular/core'; // app组件 import { AppComponent.../app.component'; // 告诉angular如何编译启动模块 @NgModule({ // 当前项目运行的组件 declarations: [ AppComponent...自定义组件 5.1 创建组件 ng g component components/header 5.2 使用组件修改app.component.html </app-header

8371 0

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

从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 Angular 从入坑到挖坑 - Router 路由使用入门指北...CLI 来生成路由守卫的接口实现类，通过命令行，在 app/auth 路径下生成一个授权守卫类，CLI 会提示我们选择继承的路由守卫接口，这里选择 CanActivate 即可 ng g guard...CLI 新增一个 crisis-detail 组件，作为 crisis-list 的子组件 ng g component crisis-detail 接下来在 crisis-list 中添加 router-outlet...Angular CLI 创建一个危机中心模块（crisis 模块） -- 查看创建模块的相关参数 ng g module --help -- 创建危机中心模块（自动在 app.moudule.ts...import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {

3.7K3 0

Angular 6.x 快速入门

第一节 - Angular 环境搭建基础要求 Node.js Git Angular 开发环境安装 Angular CLI (可选) $ npm install -g @angular/cli 检测...Angular CLI 是否安装成功 $ ng --version 创建新的项目 $ ng new project-name 启动本地服务器 $ cd project-name $ ng serve...在 Angular 中，我们可以通过 Component 装饰器和组件类来创建自定义组件。...创建 UserComponent 组件 import { Component } from '@angular/core'; @Component({ selector: 'sl-user'...router-outlet 指令该指令用于告诉 Angular 在哪里加载组件，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到

14.1K2 0

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

创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据管道pipe 格式化数据 {{ hero.name | uppercase...@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串 ii. component：当导航到此路由时，路由器应该创建哪个组件...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记（3） -- 组件与模板 Angular快速学习笔记（2） -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K0 0

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

创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据管道pipe 格式化数据 {{ hero.name | uppercase...@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串 ii. component：当导航到此路由时，路由器应该创建哪个组件...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记（3） -- 组件与模板 Angular快速学习笔记（2） -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K5 0

ionic3使用带图标带事件的toast

ionic3自带的ToastController创建的toast比较简单，不支持图标，且点击toast时是没有事件回调的…… 这个时候，如果想扩展这些功能，一是修改源码，二是自己实现，然而这两种方法都比较麻烦...，比较好的解决方案是利用现有的开源代码，搜索ionic的相关组件寥寥无几，这个时候转换下思路，搜索angular的相关组件会发现有几个，经过比较后觉得ngx-toastr较为适合。...@angular/animations --save 添加样式 Github文档是通过修改angular-cli.json文件来导入样式的，而对于ionic来说，该类似文件封装在源码里面，不应该修改，...配置： import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core...toastr-bs4-alert.scss里面的样式，爆出： @include border-radius($alert-border-radius);中$alert-border-radius未定义的错误

2.9K2 0

Angular性能优化实践——巧用第三方组件和懒加载技术

应该有很多人都抱怨过 Angular 应用的性能问题。其实，在搭建Angular项目时，通过使用打包、懒加载、变化检测策略和缓存技术，再辅助第三方组件，便可有效提升项目性能。...环境准备全局安装Angular CLI：npm install -g @angular/cli 使用Angular CLI创建一个新项目：ng new spread-sheets-angular-cli...中配置SpreadJS CS 在Angular应用程序中使用 SpreadJS 使用Angular CLI构建和运行项目完成上述环境搭建，便可将表格编辑器组件集成到 Angular 项目中，实现在线导入导出...经过调研，发现在Angular的默认中，NgModule都是急性加载的，也就是会在应用加载时尽快加载。无论是否要立即使用，所有模块都会一并加载。...@NgModule的imports数组列出了LazyWebExcelRoutingModule，让LazyWebExcelModule可以访问他自己的路由模块。

4K2 0

Angular-Cli脚手架介绍、安装并搭建项目

我们强烈建议使用官方的 @angular/cli 工具链辅助进行开发，下面我们用一个简单的实例来说明。...$ npm install -g @angular/cli 创建一个项目# 在创建项目之前，请确保 @angular/cli 已被成功安装。...执行以下命令，@angular/cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。...$ ng new PROJECT-NAME 注意: 有可能会报错类似下面这种 The Angular CLI requires a minimum Node.js version of either v12.14...以下面的 NzButtonModule 模块为例，先引入组件模块： import { NgModule } from '@angular/core'; import { NzButtonModule }

1.9K3 0

大漠穷秋：全面解读Angular 4.0核心特性

摘要基于最新的Angular4.0版本，超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli，以及Angular最核心的3大概念：组件、模块、路由。...@Angular/cli 我们需要有一个统一的node.js模块把所有node工具集成在一起，Angular/cli就是这样一个平台。...命令行工具可以创建出里面所有的组件或概念，在生成目录结构的过程中，还会生成代码的模版。但是Angular/cli也有一些“坑”。...NgModule 在真正开发业务系统的时候，光有UI组件是不够的，还有服务、路由以及各种各样的directive。模块是用来组织业务代码的利器。...由此可见，NgModule是用来配合Angular/cli做模块的打包和加载。在Angular新版本里，module是最小的打包和加载单位。路由守卫用来防止未授权的访问。

2.1K5 0

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（新手入门篇）

前言：　　在之前的一篇文章已经介绍过了，公司正在使用NG-ZORRO组件库开发后台应用，并且详细的介绍了Angular开发环境的搭建和项目的创建。...创建一个Angular项目： angular环境配置参考：https://www.cnblogs.com/Can-daydayup/p/14166192.html 在创建项目之前，请确保 @angular.../cli 已被成功安装。...执行以下命令，@angular/cli 会在当前目录下新建一个名称为 YyFlight-NG-ZORRO的文件夹，并自动安装好相应依赖。 ng new YyFlight-NG-ZORRO ?...：以下面的 NzButtonModule 模块为例，先引入组件模块： import { NgModule } from '@angular/core'; import { NzButtonModule

3.3K1 1

Cant bind to formGroup since it isnt a known property of form错误解决方案

最近学习了下angular，利用Angular CLI 在本地搭建了个环境，然后装了个ant.design的NG-ZORRO库，试了下用ui的脚手架来创建组件 ng g ng-zorro-antd:form-normal-login...login 创建完成发现访问项目的时候，在使用nz-form时报错Can't bind to 'formGroup' since it isn't a known property of 'form'...导入后的app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from...from '@angular/platform-browser/animations'; import { registerLocaleData } from '@angular/common'; import.../login/login.component'; registerLocaleData(zh); @NgModule({ declarations: [ AppComponent,

9151 0

模块化开发 Angular 应用

在这个教程中，我们将创建自定义的模块，并发掘它的组件。然后，我们将学习怎么使用我们的模块来启用延迟加载，从而使应用更小，使用户体验更好。我们开始吧！...在这里，我们可以定义应用程序使用哪些组件或者哪些模块。那么它长什么样呢？我们通过 angular-cli 来生成一个基本的 AppModule。...就像组件一样，生成的结构是一个模块树。 @NgModule 在 @NgModule 操作符里面，我们定义模块的所有属性。我们提供了一个简单的 JavaScript 对象作为参数。...如果一个组件（或者指令或者管道）你并没有添加到 declarations 中，但是你又在模块或者应用中使用了，angular 应用在运行时报错。此外，一个组件只能在一个模块中声明。...所以，我们创建一个名为 app.routing.ts 的文件，它跟 app.module 同级。

3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭