Angular库发布至NPM后无法导入：找不到模块'atptest'及其类型声明问题求助

Let's break down what's going wrong here and how to fix it step by step:

First, what does "corresponding type declarations.ts" mean? #

When using TypeScript (which Angular relies on by default), every module you import needs a type definition file (with a .d.ts extension). This file tells TypeScript about the types, interfaces, and public exports of your library. The error means TypeScript can’t locate these definition files for atptest—either they weren’t included in your published package, or the path to them is misconfigured.

Root Cause of Your Issue #

After reviewing your library’s setup, the main problems lie in your package configuration and publish workflow:

1. Missing/Incorrect Paths in package.json #

Your library’s package.json (either in the source folder or compiled dist folder) needs explicit pointers to the compiled library files and their type definitions. Without these, npm and TypeScript don’t know where to look for your module’s code.

2. Publishing the Wrong Directory #

It’s easy to accidentally publish your root project folder instead of the compiled dist folder. If you ran npm publish from your project root, the published package won’t contain the production-ready files Angular needs to import.

Step-by-Step Fixes #

1. Update Your Library’s package.json #

Navigate to your library’s source folder (e.g., projects/atptest) and add/update these key fields:

{
  "name": "atptest",
  "version": "0.0.1",
  "main": "./dist/atptest/atptest.umd.js",
  "module": "./dist/atptest/fesm2020/atptest.mjs",
  "typings": "./dist/atptest/index.d.ts",
  "files": [
    "dist/**/*"
  ],
  "exports": {
    ".": {
      "types": "./dist/atptest/index.d.ts",
      "esm2020": "./dist/atptest/fesm2020/atptest.mjs",
      "umd": "./dist/atptest/atptest.umd.js"
    }
  }
}

• files: Ensures all compiled files in the dist folder are included when publishing to npm.
• main/module: Point to the compiled UMD and ES module files respectively, which Angular uses to load your library.
• typings: Points to the main type definition file for your library, resolving the TypeScript error.
• exports: Modern configuration that helps tools pick the correct file based on the runtime environment.

2. Verify ng-package.json Configuration #

In your library’s folder, check ng-package.json to confirm it compiles to the right directory:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/atptest",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

• dest: Must point to the correct relative path to your dist folder (e.g., ../../dist/atptest) so compiled files end up where your package.json expects them.
• entryFile: Should point to public-api.ts, which exports all components/modules you want to make public in your library.

3. Fix the Publish Workflow #

Follow these steps to properly build and publish your library:

1. Build the library first to generate the compiled files:

   ng build atptest
   

2. Navigate to the compiled dist/atptest folder:

   cd dist/atptest
   

3. Publish the package from this directory:

   npm publish
   

This ensures only the production-ready, compiled files are uploaded to npm.

4. Test the Fix #

After republishing, reinstall the package in your Angular app:

npm i atptest@latest

Try importing AtptestModule again—both the module not found and type declaration errors should be resolved now that npm and TypeScript can locate the correct files.

内容的提问来源于stack exchange，提问作者a.toraby