Angular 8：如何禁用从库中导入的指定组件？

Great question! Since you can't modify the third-party library but need to block <second-component> entirely (with compile-time failure preferred), here are a few robust solutions tailored to your needs:

1. Compile-Time Enforcement with Custom ESLint Rule (Best for Build-Time Failure) #

This approach catches any usage of <second-component>—even if hidden behind *ngIf, *ngFor, or other structural directives—and fails the build immediately. Here's how to set it up:

Step 1: Create a Custom ESLint Rule #

In your project, add a new rule file (e.g., src/eslint-rules/no-second-component.ts):

import { Rule } from '@angular-eslint/utils';
import { AST_NODE_TYPES } from '@typescript-eslint/utils';

export const noSecondComponent: Rule.RuleModule = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallow usage of <second-component>',
      recommended: 'error',
    },
    schema: [],
    messages: {
      forbidden: '<second-component> is forbidden. Use <first-component> instead.',
    },
  },
  create(context) {
    return {
      // Catch the component selector in templates
      "Element$[name='second-component']"(node: any) {
        context.report({
          node,
          messageId: 'forbidden',
        });
      },
      // Catch direct references to the component class in TypeScript
      "Identifier[name='SecondComponent']"(node: any) {
        context.report({
          node,
          messageId: 'forbidden',
        });
      },
    };
  },
};

Step 2: Register the Rule in Your ESLint Config #

Update your .eslintrc.json to enable the rule for both templates and TypeScript files:

{
  "plugins": ["@angular-eslint"],
  "rules": {
    "your-project/no-second-component": "error"
  },
  "overrides": [
    {
      "files": ["*.component.html"],
      "parser": "@angular-eslint/template-parser",
      "rules": {
        "your-project/no-second-component": "error"
      }
    },
    {
      "files": ["*.component.ts"],
      "rules": {
        "your-project/no-second-component": "error"
      }
    }
  ],
  "rulesDirectory": ["src/eslint-rules"]
}

Step 3: Update Build Scripts #

Ensure your package.json runs ESLint before the Angular build to block invalid code:

{
  "scripts": {
    "build": "eslint . && ng build",
    "lint": "eslint ."
  }
}

Now any accidental usage of <second-component> will stop the build before it reaches production.

2. Runtime Block with Dummy Component (Fallback Option) #

If ESLint isn't feasible for your setup, you can override the third-party component with a dummy that throws an error immediately when used:

Step 1: Create a Forbidden Component #

import { Component } from '@angular/core';

@Component({
  selector: 'second-component',
  template: '',
})
export class ForbiddenSecondComponent {
  constructor() {
    throw new Error('<second-component> is forbidden. Use <first-component> instead.');
  }
}

Step 2: Declare It in Your Root Module #

Add this component to your AppModule declarations—Angular will prioritize your local component over the third-party one:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ThirdPartyModule } from 'third-party-lib'; // Keep importing the original module
import { ForbiddenSecondComponent } from './forbidden-second.component';
import { AppComponent } from './app.component';

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

Any attempt to use <second-component> will crash immediately at runtime, making accidental usage impossible to miss.

3. Partial Module Import (If Library Supports It) #

If the third-party library exports components individually (not just via a single module), you can import only the component you need:

// Instead of importing the full module:
// import { ThirdPartyModule } from 'third-party-lib';

// Import only FirstComponent directly:
import { FirstComponent } from 'third-party-lib';

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

This way, Angular has no knowledge of SecondComponent—any usage will throw a compile-time error for an unknown element. Note this only works if FirstComponent doesn't depend on providers from the third-party module.

All these solutions keep <first-component> fully functional while blocking <second-component> effectively. The ESLint approach is the most reliable, as it catches issues early in the development process.

内容的提问来源于stack exchange，提问作者NoShady420