类不是外部库的Angular模块 [英] Class is not an Angular module for external library

问题描述

我创建了一个简单的 Angular 应用，并添加了一个自定义库(相同的项目):

ng新的我的图书馆 ng生成库my-library-lib

然后在不同项目中测试这个简单的库，我构建了lib: ng构建my-library-lib

我将dist文件夹中的lib链接到另一个项目，并将 MyLibraryLibModule 导入我的 SharedModule

来自"my-library-lib

的

{MyLibraryLibModule}

导入:[...，MyLibraryLibModule] ->引发错误: class不是Angular Module

这是一个简单的项目，我从头开始重做所有操作，没有更改 tsconfig 文件中的任何内容，等等.在线查看但找不到任何解决方案.

要对其进行测试:库回购: https://github.com/GCour/ui-library

简单的项目存储库:> https://github.com/GCour/ui-test

tsconfig.lib.json :

  {"extends":"../../tsconfig.json"，"compilerOptions":{"outDir":"../../out-tsc/lib"，目标":"es2015"，声明":是的，"declarationMap":是的，"inlineSources":是的，类型":[]，"lib":["dom"，"es2018"]}，"angularCompilerOptions":{"skipTemplateCodegen":是的，"strictMetadataEmit":是的，"enableResourceInlining":是}，排除":["src/test.ts"，"**/*.spec.ts"]} 

tsconfing.lib.prod.json

  {"extends":"./tsconfig.lib.json"，"compilerOptions":{"declarationMap":false}，"angularCompilerOptions":{"enableIvy":false}} 

tsconfig.json

  {"compileOnSave":false，"compilerOptions":{"baseUrl":"./"，"outDir":"./dist/out-tsc"，" sourceMap" ;:是的，声明":false，"downlevelIteration":是的，"experimentalDecorators":是的，"moduleResolution":节点"，" importHelpers" ;:是的，目标":"es2015"，模块":"es2020"，"lib":["es2018"，"dom"]，路径":{"my-library-lib":["dist/my-library-lib/my-library-lib"，"dist/my-library-lib"；]}}} 

解决方案

如果您要求在开发人员中使用本地库，则应在生产环境中创建库

  ng构建my-lib --prod 

然后使用 npm链接在本地创建您的图书馆

  cd distcd my-libnpm连结 

如果一切正常，则可以导入计算机的另一个项目，可以在以下位置检查lib是否已添加到本地npm中:

  C:\ Users \ [您的用户] \ AppData \ Roaming \ npm \ node_modules \ my-lib 

现在，您唯一需要使用 npm link my-library

在计算机的另一个项目中使用的东西

  cd c:\ my-another-app \ srcnpm链接我的图书馆 

并像往常一样在您的app.module中使用

 从"my-lib"导入{myLibModule}//或从"my-lib/public-api"导入{MyLibService}...导入:[myLibModule} 

I have created a simple Angular app and added a custom library (same project):

ng new my-library ng generate library my-library-lib

Then to test this simple library in a different project, I built the lib: ng build my-library-lib

I linked the lib in dist folder and linked it to a different project and imported the MyLibraryLibModule in my SharedModule

{ MyLibraryLibModule } from 'my-library-lib

imports: [..., MyLibraryLibModule] --> throws error: class is not an Angular Module

This is a simple project I did to redo everything from scratch, did not change anything in tsconfig files etc. Looked online but couldn't find any solution.

To test it: Library repo: https://github.com/GCour/ui-library

Simple project repo: https://github.com/GCour/ui-test

tsconfig.lib.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

tsconfing.lib.prod.json

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "my-library-lib": [
        "dist/my-library-lib/my-library-lib",
        "dist/my-library-lib"
      ]
    }
  }
}

解决方案

If you are asking about use in developer a local library you should create your library in production

ng build my-lib --prod

then use npm link to create locally your library

cd dist
cd my-lib
npm link

If all is ok, you can import in another project of your computer, you can check if the lib is added to your local npm in

C:\Users\[your-user]\AppData\Roaming\npm\node_modules\my-lib

Now the only thing you need to use in another project of your computer using npm link my-library

cd c:\my-another-app\src
npm link my-library

And use as usually, in your app.module

   import {myLibModule} from 'my-lib'
   //or import {MyLibService} from 'my-lib/public-api' 

   ...
   imports: [myLibModule}

这篇关于类不是外部库的Angular模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！