Angular 4找不到在模块内创建的组件
Angular 4是一种流行的前端开发框架，用于构建单页应用程序。当在模块内创建组件时，如果Angular 4找不到该组件，可能是由于以下几个原因：
- 组件未正确导入：在使用组件之前，需要在模块文件中将其导入。确保在模块文件的顶部使用import语句导入组件，并在@NgModule装饰器的declarations数组中声明该组件。
- 组件未正确声明：在模块文件的@NgModule装饰器中的declarations数组中声明组件。这样Angular才能识别和使用该组件。
- 组件未正确命名或路径错误：确保组件的文件名和类名正确，并且路径与导入语句中的路径一致。如果组件位于不同的文件夹中，需要正确指定路径。
- 组件未正确导出：如果组件位于一个独立的模块中，确保在该模块文件中将组件导出。使用export关键字将组件导出，以便其他模块可以使用它。
- 组件所在的模块未正确导入：如果组件位于另一个模块中，确保在当前模块中将该模块导入。使用import语句将模块导入到当前模块中。
如果以上步骤都正确执行，但仍然找不到在模块内创建的组件，可能是由于其他问题导致。可以尝试重新编译应用程序，检查控制台是否有任何错误消息。此外，可以查看Angular官方文档或社区论坛，寻求更多帮助和解决方案。
对于Angular 4的更多信息和学习资源，可以参考腾讯云的Angular产品介绍页面：Angular产品介绍。
相关·内容
2回答
我刚刚“写了”(复制的结构不是内容)这个小角度4模块：
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { FooterComponent } from "./footer.co
浏览 2提问于2017-07-09得票数 2
回答已采纳
2回答
我想在不同的模块中使用一些组件。目前，我的模块化系统的结构如下
app.modules.shared
footerModules
AdministrationModule
profileModule
现在有人想要创建一个组件，例如InputControlComponent，我可以在AdministrationModule的组件以及ProfileModule中使用它。
我的第一个想法是
app.modules.shared
footerModules
AdministrationModule
profileModule
SharedModu
浏览 0提问于2018-06-29得票数 1
回答已采纳
我很难让模块在Angular 2中工作，我已经创建了来演示这个问题。最重要的是，你会看到我有app.module。此模块导入app-common.module，其中包含一个显示页面标题的组件。顶级组件的模板app.component包含此组件的选择器。下面是app.common.module：
@NgModule({
imports:[CommonModule, FormsModule],
declarations: [PageHeaderComponent]
})
export class AppCommonModule { }
下面是app.module：
@NgModule({
impo
浏览 3提问于2016-09-14得票数 10
回答已采纳
我最近开始了一个在Angular 2.0.0-rc.4上的项目，由于某些原因，它没有及时升级。我在网上找不到足够的帮助。
升级这类项目的最佳方法是什么？我想以从RC4到RC5的增量方式(因为在这方面有一些帮助)，然后是2最终，然后是4。
最终目标是升级到最新的Angular版本。任何链接或文档将受到高度赞赏。
浏览 0提问于2017-12-07得票数 1
我是Angular Nx的新手。我必须创建可重用的Angular元件，并根据Nx工作空间结构将其存储为库。我找不到合适的命令。我尝试使用以下命令创建库： ng generate lib mylib 它像预期的那样创建了库，但我想存储这些组件，以便稍后在我的应用程序中使用。
浏览 9提问于2018-12-21得票数 5
1回答
我有一个组件库，大约有20个模块。我想把它们包装成一个单一的服务并导出，这样就可以在全球范围内注入。当我这样做并将其注入到app.module.ts中时，这些特性无法找到组件。
我的CoreComponentModule和所有其他模块看起来都是这样的。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreadcrumbModule } from './core/breadcrumb';
impo
浏览 0提问于2017-02-06得票数 1
回答已采纳
我目前正在创建一个角2项目，但是我无法通过在我的控制台中获得的这两个错误。
默认值/Users/~/src/app/app.module.ts:35:4无法找到名称“SelectItem”中的错误。
默认/Users/~/src/app/app.module.ts:36:4无法找到名称'Message‘时出错。
我已经在我的应用程序中添加了这两个导入。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
i
浏览 1提问于2016-10-12得票数 1
回答已采纳
因为我可以从angular中的服务创建一个组件，所以我想把它作为一个警告服务来做，并且这个服务有几个方法，比如error ()，这个方法必须向dom添加一个组件来显示警告，但是我不知道如何向dom“注入”或“添加”一个服务的组件，有什么建议吗？
浏览 23提问于2021-01-13得票数 0
我得到了这个错误：
在使用angular2-rc6时，没有找到用于TermsConditions的组件工厂。
我的路线图是这样的：
{
path: '',
component: TermsConditions
}
浏览 5提问于2016-09-09得票数 2
回答已采纳
我有一个列表，在选择列表项时，我调用onSelect()。
在onSelect()中，我将选定的值放置在变量selectedHero中。如何在其他组件中的selectedHero变量中使用此值。我的代码如下所述。
import { Component } from '@angular/core';
export class Hero {
name: string;
}
const HEROES: Hero[] = [
{ name: 'STWX1' },
{ name: 'STWX2' },
{ name: &
浏览 0提问于2017-02-20得票数 0
回答已采纳
我想使用一个HTML页面(组件)到另一个组件。但我找不到点击事件。
Dashboard.component :-
import { Component, OnInit, AfterViewInit} from '@angular/core';
import { Router } from '@angular/router';
import { ViewChild } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
浏览 0提问于2018-03-31得票数 6
回答已采纳
组件装饰器的提供程序数组
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
提供者数组的NgModule装饰器
@NgModule({
imports: [ B
浏览 3提问于2017-02-17得票数 2
回答已采纳
ParentComponent.html
<div ["child-component"]> </div>
ChildComponent.html
<div> This is a Child Component </div>
ChildComponent.ts
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: &#
浏览 4提问于2019-08-12得票数 0
1回答
我是角2\4中的新手(我来自Java)，对于使用PrimeNG“组件”的角项目，我有以下疑问。
我遵循了这个快速的"Hello“视频教程(在我看来是一个官方教程)来创建我的第一个示例，其中包括PrimeNG到我的角4 webapp应用程序：
我对这个例子的逻辑以及最终如何重构这个例子有一些疑问。
好的，正如你所看到的，它是这样写的：
<p-calendar [(ngModel)]="value"></p-calendar>
{{value | date:'dd.mm.yyyy'}}
与PrimeNG日历组件相关(我认为它是一个组件
浏览 3提问于2017-08-11得票数 0
回答已采纳
1回答
我正在使用管道来清理ionic 4应用程序中的受信任资源app safe.pipe.ts import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSaniti
浏览 20提问于2020-08-15得票数 1
回答已采纳
我正在用角4创建一些测试，我有一个组件，它使用PrettyJsonCompont来向用户显示格式良好的json。
当我运行ng测试时，我的几个组件测试都会以相同的消息失败。
失败: PrettyJsonComponent类型是两个模块声明的一部分: PrettyJsonModule和DynamicTestModule！请考虑将PrettyJsonComponent移动到导入PrettyJsonModule和DynamicTestModule的更高模块。您还可以创建一个新的NgModule，它导出并包含PrettyJsonComponent，然后在PrettyJsonModule和Dynami
浏览 1提问于2017-08-18得票数 26
回答已采纳
当使用angular2的路由器"3.0“的子路由时，不需要在父路由器配置中声明它们(以前，您必须在父组件中执行类似/child...的操作)。
我想要配置一个全局的“页面找不到”处理程序，我可以这样做：
{ path: '**', component: PageNotFoundComponent }
在我的应用路由模块中。
注意:如果我这样做，路由器将导航到在PageNotFoundComponent之前在应用程序路由模块中声明的路由。但当我尝试访问子路由(在某些子路由模块中使用RouterModule.forChild声明)时，它总是导航到通配符路由。
直观地说，通配
浏览 0提问于2016-10-13得票数 37
回答已采纳
1回答
我必须向我的应用程序添加一些组件(例如评论)：我正在尝试：
在comment.component.ts中：
import { Component } from '@angular/core';
@Component({
selector: 'am-comments',
template: `<h4>{{title}}</h4>`
})
export class CommentComponent {
title = 'Comments title';
}
我的app.module.ts：
impo
浏览 7提问于2016-08-28得票数 2
回答已采纳
我正在创建一个Ionic / Angular的Ionic应用程序。我创建了一些页面，它运行得很好。但是现在我正在尝试创建一个组件，但是我不能使用*ngFor命令。
我用Ionic cli创建了组件。这是我的HTML：
<ion-item button *ngFor="let myItem of myCollection">
(...)
</ion-item>
我已经在一个页面中使用了ngFor，它可以工作，但是在组件中我得到了以下错误：
core.js:10140 NG0303: Can't bind to 'ngForOf&#
浏览 3提问于2021-09-21得票数 0
回答已采纳
2回答
角四材料计划没有编译
、、、
我对这个角度不熟悉。当我发射ng serve open命令时，我已经设置了角project.First时间，它打开url并正常工作。在此之后，我已经安装了棱角材质.Now，如果我运行应用程序，它将为我提供新的浏览器选项卡。但显示编译错误。有人能帮我解决这个问题吗。过去的三个小时我一直在尝试。请帮帮忙。
npm安装-保存“角/料”角/cdk
npm安装-保存@转角/动画
npm安装-保存锤子npm npm安装-保存@角/挠度-布局@最新
my app.module.ts
import { BrowserModule } from '@angular/platform-b
浏览 5提问于2017-09-26得票数 0
以前有人问过这个问题，但它没有回答我的问题。我对角度很陌生，现在我只是把事情整合在一起。我正在设法让我的工厂在我的控制器内工作。但是，我的控制台中一直有以下错误：
Argument 'indexController' is not a function, got undefined
我打破了不同目录中的服务和控制器，并将服务和控制器<script>添加到index.html文件中。
我使用IntelliJ并使用它的插件来创建样板。
<body >
<ul class="menu">
<li><a
浏览 1提问于2016-02-11得票数 1
回答已采纳
1回答
我无法使用JS在角度2中的两个组件之间进行通信。是教程的链接。我想我漏掉了一些指令。我也试图用声明来改变它。
我是app.main.js
(function () {
var Component = ng.core.Component
var bootstrap = ng.platformBrowserDynamic.bootstrap
var RandomComponent = Component({
selector: 'random-component',
template: `
<h2> Hsdsdffdsdfi <
浏览 2提问于2016-08-18得票数 0
回答已采纳
我已经在我的应用程序根目录中创建了一个小组件(LoadingComponent)，并(显然)在我的AppModule中声明了它。这个组件是在我的应用程序加载时使用的，应该会显示一些奇特的加载动画。
现在，当我保存一些东西时，我想在子模块中使用它。但是，当我想在另一个模块中使用这个组件时，我总是会遇到错误。
我在我的LoadingComponent中导出了AppModule：
import { ButtonsModule } from './buttons/buttons.module';
import { FormsModule } from '@angular/f
浏览 3提问于2017-09-01得票数 14
回答已采纳
我是Angular2的新手。我试图创建一个组件，但是显示了一个错误。
这是app.component.ts文件。
import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';
@Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<h4>Somethi
浏览 28提问于2017-05-12得票数 221
回答已采纳
1回答
我创建了一个角13组件库。我有一个名为<wg-h2>的组件，它将创建一个h2。创建组件<wg-h2>的方式如下：
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'wg-h2',
template: `
<h2 [ngStyle]="{ 'color': color }">
{{text}}
</h2>`,
styleUrls:
浏览 1提问于2022-05-08得票数 0
1回答
进入角度，看一个过时的教程，这实际上是对Angular2 (y，我知道)。
Angular4:
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent , MyChildComponent ],
bootstrap: [ AppComponent ]
})
现在看来，这就是您如何嵌套组件的方式，但难道没有办法在角2中这样做(或类似地)吗？与前面一样，您可以直接在根组件中导入现在不推荐的“指令”属性(发现这对于快速开发非常方便)。
Angular2:
@Component({
selector:
浏览 0提问于2017-08-27得票数 1
回答已采纳
我正在创建一个离子/角度应用程序，我想使用*ngFor在语句中显示列表中的值。但是由于某些原因，*ngFor什么也不做。
*ngFor不会在我说*ngFor="let i of eventList"时运行，但会在我将变量的值放入其中时运行
*ngFor="let i of {'id': 1, 'name':'Superman'},{'id' :2,'name':'Batman'},
{'id' : 5, 'name':'BatGir
浏览 26提问于2019-08-14得票数 0
回答已采纳
1回答
我有两个基于angular 5的Angular应用程序(看看dep。下面的模块)
(...)
"@angular/animations": "^5.2.11",
"@angular/cdk": "^5.2.5",
"@angular/common": "^5.2.11",
"@angular/compiler": "^5.2.11",
"@angular/core": "^5.2.11",
浏览 1提问于2020-02-07得票数 1
我被创建了一个共享模块，如下所示。我在某处读到过导入顺序很重要，但我现在找不到那个链接。在某些地方，它工作得很好，但在另一些地方，我得到了错误。我想知道这些模块的顺序，以避免任何错误。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import 'hammerjs';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
浏览 5提问于2017-11-04得票数 5
7回答
我有角2.0.0应用程序生成角-cli。
当我创建一个组件并将它添加到AppModule的声明数组时--这一切都很好--它可以工作。
我决定分离这些组件，所以我创建了一个TaskModule和一个组件TaskCard。现在，我想在TaskCard的一个组件中使用AppModule ( Board组件)。
AppModule：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModul
浏览 4提问于2016-09-20得票数 292
回答已采纳
1回答
我目前正在使用Angular (v4)来构建一个web应用程序，它本质上是一个工作组合。项目组合中的每个条目很可能都需要它自己的组件。这就是问题所在，项目组合中的条目数量可能会达到数百个，我不想在每次创建新组件时都向模块中添加组件。搜索显示了以下解决我的问题的可能性：
我已经看过的延迟加载
的均匀动态加载
甚至这个堆栈也溢出了
所有这些解决方案都要求组件出现在模块中。
不过，我还是设法找到了这个，它根据组件名称和组件的路径作为字符串加载组件。不幸的是，这是基于非常年轻的angular 2版本。
理想情况下，最好从URL中提取参数，然后使用这些参数加载所需的组件及其关联的类。这是最好的选择吗？类
浏览 1提问于2017-04-25得票数 2
我正在尝试这个关于Highcharts的演示应用程序。我从两个网站上找到了相同的代码，并尝试了一下，但在这两个网站上，我都捕捉到了相同的错误。
ERROR in src/app/app.module.ts:11:5 - error NG6001: Cannot declare 'Highchar
tsChartComponent' in an NgModule as it's not a part of the current compilation.
11 HighchartsChartComponent
~~~~~~~
浏览 0提问于2020-03-09得票数 8
在angular2中，我有一个在两个组件中使用的管道，并且想知道如何在全局上共享它
我用的是angular2和打字本。
我的过滤器叫filterJobs管。
在哪里最好注入filterJobs管道，以便从全局位置对两个组件都可用？
--这是我目前为过滤器创建一个ngModule以共享它的尝试：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JobsFilter } from './jobsFilter&
浏览 4提问于2016-11-01得票数 3
回答已采纳
2回答
我试着把一个5角的应用程序分成模块。工作守则如下(有关守则)：
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FooterComponent } from './path/to/component';
@NgModule({
declarations: [AppComponent, FooterComponent],
imports: [
浏览 2提问于2017-11-28得票数 0
我正在使用Angular Cli创建组件。
我使用这个命令：
ng g c DeviceComponent --module=./views/administration/Accounting.module.ts --spec=false --flat
我得到了警告：
Option "entryComponent" is deprecated: Since version 9.0.0 with Ivy, entryComponents is no longer necessary.
并且组件没有创建我的Angular版本是：
Angular CLI: 10.2.0
Node:
浏览 0提问于2020-11-13得票数 4
1回答
我们有一个JQuery应用程序，在该应用程序中，我们需要在角4中实现一些模块。为此，我们将手动引导一个角应用程序。但是现在情况是，我们已经创建了多个角分量，现在它们都是在引导AppComponent时加载的，这使得应用程序加载速度缓慢。
因此，我希望引导多个根组件(即AppComponent、App1Component)，以便在此基础上使用相应的子组件。
因此，下面是我的实施，这是无效的。
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ap
浏览 0提问于2018-10-11得票数 0
当我们在index.html中使用angular自定义元素标签，并使用量角器运行我们的e2e测试时，它会导致超时，因为在页面中找不到angular，因为对于Angular web组件，只有entryComponents而没有引导组件。因为构建用于部署为自定义元素的angular应用程序不需要引导组件。
浏览 11提问于2021-04-09得票数 0
我正在创建新的角度4应用程序使用材料用户界面框架。我遵循了如下步骤：。
但是当我在做'npm‘时，它没有编译并说：ERROR in /home/programoholic/workspace/heroapp/src/app/app.module.ts (3,10): Module '"/home/programoholic/workspace/heroapp/node_modules/@angular/material/material"' has no exported member 'MaterialModule'。
错误截图：
这
浏览 5提问于2017-09-27得票数 7
回答已采纳
我正在使用ngComponentOutlet动态创建一个组件。听起来像是：
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'alert-success',
template: `
<p>Alert success</p>
`,
})
export class AlertSuccessCompo
浏览 2提问于2017-06-16得票数 7
回答已采纳
4回答
我发现了一个错误：
模板解析错误:找不到管道'amDateFormat‘
这是我的app.module.ts
import { NgModule } from '@angular/core';
...
import { MomentModule } from 'angular2-moment';
...
@NgModule({
declarations: [
MyApp
],
imports: [
...
MomentModule,
...
],
bootstrap: [IonicApp],
浏览 7提问于2017-11-08得票数 5
回答已采纳
2回答
我有组件库angular4应用程序，在每个组件中，我使用的都是、DataTable、插件和自定义DataTable，在导入时，我得到的错误是错误: Uncaught (承诺)：DataFilterPipe类型是两个模块声明的一部分。请考虑将DataFilterPipe移动到更高的模块。然后我创建了一个名为dataFilterModule的新模块
进口：
import {DataTableModule} from "angular2-datatable";
import {DataFilterPipe} from "../plugins/datatable/datafil
浏览 3提问于2017-07-25得票数 0
回答已采纳
我在angular 4项目中使用ng服务器运行，得到错误。
Cannot read property 'length' of undefined
但是我的项目中没有任何属性长度..
完整的错误
Your global Angular CLI version (1.2.1) is greater than your local
version (1.1.3). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMi
浏览 0提问于2017-07-20得票数 21
我正在做一个9角的项目。只要这个项目还在增长，我就决定将代码分割成功能模块。我创建了一个单独的特性模块，声明并导出了每个子组件。我还在AppModule中导入了功能模块。
在运行ng serve之后，我仍然有这样的错误：If 'app-component-name' is an Angular component, then verify that it is part of this module. (错误发生在我的特性模块中使用的每个组件上，导致了带有相同消息的十几行错误)。
这里有个片段
landing-page.module.ts
//Core imports
...
浏览 5提问于2020-08-06得票数 0
2回答
@angular2，@angular2-组件，@angular2-模块
从设计和业务的角度来看，是从设计和业务的角度为项目的不同特性创建子模块、还是不同组件的，哪种方法更好呢？
浏览 11提问于2017-09-26得票数 2
回答已采纳
7回答
我有一个使用translateService的组件，但是不可能用组件模板HTML上的管道来转换条目，我得到以下错误：
找不到管道的“翻译”
app.module.ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule, Http} from "@angular/http";
import {TranslateModule, TranslateLoader, T
浏览 7提问于2016-11-10得票数 48
回答已采纳
我正在尝试使用angular 4中的angular材质创建一个表，并不断收到这个错误：
错误:模板分析错误:无法绑定到'dataSource‘，因为它不是'table’的已知属性。
我已经在我的app.module.ts文件的@NgModule中导入了MatTableModule。我使用表标记的方式如下：
<table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">
浏览 1提问于2018-10-18得票数 0
3回答
我正试着让@输入与棱角2中的打字稿一起工作。我得到了下面的错误，我不明白为什么。
ts找不到名称“输入”。任何
下面是该组件的代码。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-item',
templateUrl: './app-item.component.html',
styleUrls: ['./app-item.component.css']
})
export class App
浏览 1提问于2017-04-08得票数 17
回答已采纳
我目前正在尝试为我的Angular 4 (v 4.2.6)应用程序创建一个基于组件路由的自定义属性指令。关于如何创建这样的属性指令，我遵循了。
当myHighlight指令放在根组件上时，一切都很正常。不幸的是，当与插入到router-outlet中的组件中的@angular/router结合使用时，它不起作用( attribute指令没有执行)。
为了将问题从我的应用程序中隔离出来，我使用了。
在这个插件上，您可以看到一个名为myHighlight (highlight.directive.ts)的自定义属性指令。此指令在根组件(app.ts)中使用。
然后，我添加了两个组件，用于路由器的基
浏览 20提问于2017-07-11得票数 3
回答已采纳
我现在正在学习使用Angular 4和angular-cli来构建一个web前端(好吧)。
当我创建应用程序并开始用我自己的数据模型模仿Heroes教程时，我创建了一些组件，但它们-至少是出现在主页上的那些组件-都放在根app组件中。当我ng generate component时，它被放在应用程序one中，这让我认为这是有意的方式。
如果是这样，我应该如何路由应用程序而不关闭应用程序根组件？我不知道组件是如何与路由一起工作的吗？
我不希望这个问题过于宽泛，所以我将尝试集中讨论这一点:如何构建更改组件的子组件而不是主组件本身的路由？
浏览 0提问于2017-11-29得票数 0
1回答
我们正在为公司内部使用设计一个新的web应用程序，前端将在MVC 6和Angular2中创建。这个项目相当large...analysis，显示了大约1000个表单。另外，每个终端都有有限的内存(我们还不知道确切的数量)，因为我们将通过Citrix为页面服务。
我理解Angular2是在考虑大型应用程序的情况下创建的，但我发现了一些与如此大的SPA相关的问题：
太大的主模块声明对象。需求分析中的1000种表单仅在组件中是该数量的两倍，有什么方法可以将其最小化吗？
Angular2为加载的组件预留了多少内存？检查JS堆内存。我可以看到它在堆中保留组件原型，直到路由到另一个页面。我找不到关
浏览 1提问于2016-10-14得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
