Angular应用常见错误_present in the ngmodule.exports of homepagesmodule-优快云博客

本文链接：https://blog.youkuaiyun.com/supertor/article/details/116524443

本文详细介绍了Angular开发中常见的错误及解决方案，包括模块导入、DOM操作、依赖注入、警卫使用、组件声明、性能优化、AOT编译和代码组织。通过遵循这些最佳实践，可以打造更高效、更易维护的Angular应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导入所需的角度模块

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

此错误表明，尚未将 angular Forms Module导入到您的模块中。

Unhandled Promise rejection: No provider for HttpClient!

此错误告诉您尚未将angular HttpClient 模块导入到您的（根）模块中。

解决方案

要解决此问题，您需要将缺少的模块导入模块中。在大多数情况下，该模块将是您应用目录中的AppModule

src/app/app.module.ts

@NgModule({
   
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  bootstrap: [AppComponent],
})
export class AppModule {
   }

只导入您真正需要的模块！不必要地导入模块会大大增加应用程序的大小。
该建议不仅适用于框架Angular模块。它也适用于您可能要使用的任何Angular模块，包括第三方模块。

BrowserModule 
FormsModule //需要使用ngModel指令
HttpClientModule // //以前是HttpModule 
RouterModule 
BrowserAnimationsModule / NoopAnimationsModule

第三方库最好将模块拆分为尽可能多的模块，以使应用程序的大小保持较小。例如，对于Angular Material，您必须为所使用的每个组件导入一个模块。

MatMenuModule 
MatSidenavModule 
MatCheckboxModule 
MatDatepickerModule 
MatInputModule 
...

2.不要使用DOM引用在它们存在之前（@ViewChild）

在@ViewChild装饰器的帮助下，angular使引用组件的特定子元素（html节点或组件）变得非常容易。您需要做的就是向模板内部的节点或组件添加引用标识符。只需在节点属性旁边添加一个＃后跟一个名称。

<div #myDiv></div>

现在，我们可以从组件中引用该元素。如果它是一个组件，则可以调用其公共方法并访问其属性。如果它是纯HTML元素，则可以更改其样式，属性或子元素。

如果我们使用@ViewChild（）装饰器装饰该属性，Angular会自动将引用分配给该组件的属性。确保将参考名称传递给装饰器。例如@ViewChild（‘myDiv’）。

import {
    ViewChild } from '@angular/core'

@Component({
   })
export class ExampleComponent {
   
  @ViewChild('myDiv') divReference
}

问题

@ViewChild（）指令非常有用。但是您必须记住这一点：

如果元素确实存在，则只能使用对该元素的引用！

为什么不应该这样做？有许多原因导致您所引用的元素实际上不存在。

最常见的原因是，浏览器尚未完成创建并且尚未将其添加到DOM。如果您尝试在添加之前使用它，它将无法正常工作并使您的应用程序崩溃。如果您通常对JavaScript熟悉，那么您可能偶然发现了该问题，因为它不是特定于angular的。

在不存在DOM时访问DOM的一个示例是在组件的构造函数中。另一个将在ngOnInit生命周期回调中。

这以下代码是不起作用的：

import {
    ViewChild, OnInit } from '@angular/core'

@Component({
   })
export class ExampleComponent implements OnInit {
   
  @ViewChild('myDiv') divReference

  constructor() {
   
    let ex = this.divReference.nativeElement // divReference是未定义的
  }

  ngOnInit() {
   
    let ex = this.divReference.nativeElement // divReference是未定义的