测试中出现‘directive is not a known element’错误，如何将指定结构转为npm模块？

Hey there, let's tackle both your error and the npm module conversion step by step—this is a common workflow when building Angular libraries, so I've got you covered.

First: Squash That 'directive is not a known element' Error #

This error almost always means Angular can't locate your component/directive in the module it's being used in. Since you're prepping a library, here's how to fix it in your current setup:

• Lock in your library module's declarations and exports in lib/src/libname.module.ts:
  You need to declare your component here, and crucially, export it so other modules can access it:

  import { NgModule } from '@angular/core';
  import { LibnameComponent } from './libname/libname.component';
  
  @NgModule({
    declarations: [LibnameComponent],
    exports: [LibnameComponent], // Don't skip this—this makes the component usable outside the library
    imports: []
  })
  export class LibnameModule { }
  

• Update your library's entry point (lib/index.ts) to expose the module (and component if needed):

  // Export the module so consuming apps can import it
  export * from './src/libname.module';
  // Optional: Export the component directly if users want to import it standalone
  export * from './src/libname/libname.component';
  

• Import the library module in your demo app (demo/app/app.module.ts):
  Angular needs to know you're using components from this library, so add it to the imports array:

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  // Import from your local lib path
  import { LibnameModule } from '../../lib';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, LibnameModule], // Add your library module here
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

Second: Convert Your Project to a Proper npm Module #

Angular has great tooling for this—we'll use ng-packagr (the official library builder) to make sure your package works seamlessly with other Angular apps.

Step 1: Set Up ng-packagr #

First, install the tool:

npm install ng-packagr --save-dev

Step 2: Add a Library Config File #

Create lib/ng-package.json to tell ng-packagr how to build your library:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-lib-name", // Where the built files go
  "lib": {
    "entryFile": "index.ts" // Your library's entry point
  }
}

Step 3: Configure package.json for Your Library #

Update your root package.json (or create a separate one in lib/ if you prefer a monorepo setup) with these critical fields—these let npm and Angular know how to handle your package:

{
  "name": "your-lib-name", // Pick a unique name for npm
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^16.0.0", // Match your Angular version
    "@angular/core": "^16.0.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "main": "index.js",
  "module": "fesm2020/your-lib-name.mjs",
  "typings": "index.d.ts",
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "esm2020": "./fesm2020/your-lib-name.mjs",
      "default": "./index.js"
    }
  }
}

Step 4: Add a Build Script #

Add this to your root package.json scripts to make building easy:

"scripts": {
  "build:lib": "ng-packagr -p lib/ng-package.json"
}

Then run the build:

npm run build:lib

Step 5: Test Your Library Locally #

Before publishing, test it in your demo app using npm link to avoid publishing a broken package:

1. Link the built library:

   cd dist/your-lib-name
   npm link
   

2. Link it to your demo app:

   cd demo
   npm link your-lib-name
   

3. Update the import in demo/app/app.module.ts to use the package name instead of the local path:

   import { LibnameModule } from 'your-lib-name';
   

Step 6: Publish to npm (When You're Ready) #

Once everything works, publish the built package from the dist/your-lib-name directory:

cd dist/your-lib-name
npm publish

Quick Troubleshooting #

• If the element error persists, double-check that your component is exported from the library module, and that the library module is imported in the consuming module (no typos in the selector or module name!).
• Make sure your TypeScript configs are set up for library compilation—Angular's default library tsconfig uses strict settings and targets that work for shared packages.
• If you run into build errors with ng-packagr, ensure all your library code follows Angular's library guidelines (no relative paths to external files, no relying on app-specific code).

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