You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何检测Angular未使用模板?排查HousingListComponent未识别问题

问题描述

我需要检查HousingListComponent或其模板标签<app-housing-list>是否未被使用。目前遇到的问题是:在app.component.html中注释掉<app-housing-list>后,代码检查工具(linter)没有提示该组件未被使用。我尝试用Karma编写测试,但即使AppModule中不声明HousingListComponent,测试仍然通过,相关代码如下:

已尝试的Karma测试代码

import { TestBed } from '@angular/core/testing';
// import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
// import { HousingListComponent } from './housing-list/housing-list.component';
// import { HousingLocationService } from './housing-location.service';
import { AppModule } from './app.module';
import { NO_ERRORS_SCHEMA } from '@angular/core';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        // if lazy to write unit tests
        // if no need to fake service.
        AppModule

        // RouterTestingModule
      ],
      // declarations: [
      //   AppComponent,
      //   HousingListComponent
      // ],
      // providers: [HousingLocationService]
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

  it('should use the HousingListComponent in the template', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges(); // Trigger change detection

    const compiled = fixture.nativeElement as HTMLElement;
    const housingListElement = compiled.querySelector('app-housing-list');

    expect(housingListElement).toBeTruthy(); // Check if <app-housing-list> element is present in the template
  });
});

app.module.ts代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HousingListComponent } from './housing-list/housing-list.component';
import { HousingLocationService } from './housing-location.service';

@NgModule({
  declarations: [
    AppComponent,
    HousingListComponent <= main concern
  ],
  imports: [
    BrowserModule
  ],
  providers: [HousingLocationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html代码

<main>
    <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
    <section>
        <!-- 
        The locationList attribute must be enclosed in square brackets ( [ ] ) 
        so that Angular can dynamically bind the value of the locationList property 
        to a variable or expression. 
        Otherwise, Angular treats the value on the right-hand side of the equals sign as a string. 
    -->
    <!-- 
        The $event is provided by Angular when dealing with event handlers in templates. 
        The $event argument is an object of type HousingLocation 
        because that is what we set the EventEmitter's type parameter to be. 
    -->
        <!-- <app-housing-list [locationList]="housingLocationList" -->
            <!-- (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list> -->

        <article>
            <!-- 
                If you apply the ngIf directive to the article element directly, 
                it causes a layout shift when the user makes the first selection. 
                To improve this experience, you can wrap the location details in another element 
                that is a child of the article. 
                This element has no styling or function and just adds weight to the DOM. 
                To avoid that, you can use ng-container. 
                You can apply directives to it, but it won't show up in the final DOM. 
            -->
            <ng-container *ngIf="selectedLocation">
                <img [src]="selectedLocation.photo">
                <p>{{selectedLocation.name}}</p>
                <p>Available Units: {{selectedLocation.availableUnits}}</p>
                <p>{{selectedLocation.city}}, {{selectedLocation.state}}</p>
                <p>{{selectedLocation.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
                <p>{{selectedLocation.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
            </ng-container>
        </article>
    </section>
</main>

内容的提问来源于stack exchange,提问作者Jason Rich Darmawan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 13:55:55