CODEWITHSUNDEEP
angularng-packagr
Jakub Judas
Jakub Judas

Reputation: 787

Angular 8: "Please add a @NgModule annotation" when including a library into another library

I want to use one of my shared libraries in another shared library, but I am getting

ERROR: Unexpected value 'LibraryModule in ...' imported by the module 'TestlibModule in ...'. Please add a @NgModule annotation.

The libraries are in separate angular apps (test and test2). Each app contains one library (generated through ng generate library) which I build by running ng build library_name

a library in the test app (called testlib) includes the library from test2 (called library) through npm

package.json:

...
"dependencies": {
  "@angular/animations": "~8.2.14",
  ...
  "library": "file:../../test2/test2/dist/library"
},

testlib.module.ts

import { NgModule } from '@angular/core';
import { TestlibComponent } from './testlib.component';
import { LibraryModule } from 'library';

@NgModule({
  declarations: [TestlibComponent],
  imports: [
    LibraryModule
  ],
  exports: [TestlibComponent]
})
export class TestlibModule { }

tsconfig.lib.json in the included library

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

LibraryModule can be included without any problems into an application, but it crashes with the mentioned error when included into a library. I cannot find out what I am doing wrong. Can anyone point me in the right direction?

Upvotes: 3

Views: 5925

Answers (2)

Alex V
Alex V

Reputation: 31

I found one more solution:

In your library project (testlib) where you import your module TestlibModule from your library set

"fullTemplateTypeCheck": false, in angularCompilerOptions

So, update tsconfig.lib.json file for testlib project with this

"angularCompilerOptions": {
      ...
      "fullTemplateTypeCheck": false,
      ...
}

Now both libraries are building fine and you can import them in any app as well

Upvotes: 3

Anoop Rajasekhara Warrier
Anoop Rajasekhara Warrier

Reputation: 1050

Here you have 2 project test and test2. In test and test2 project, you have a library each.

Step to fix the issue:

  1. Test2 Project:

    a. npm i

    b. npm build library

    c. Go to the dist folder where you have the library build, then run "npm pack". This will generate a .tgz file. Copy that and paste that in test project. For that, create a folder (called packages), then paste here.

  2. Test Project:

    a. In package.json, replace the file path for library as: "library": "file:./packages/library.1.0.0.tgz",

    Here library.1.0.0.tgz is name of the tgz file generated after npm pack. You may rename that.

    b. npm i

    c. npm run build and ng build testLib.

    d. Try running the application, now using ng serve command. Hopefully this works.

Note: The steps you need to follow sequentially.

Upvotes: 1

Related Questions