Angular project with external lib doesn't compile in AOT mode using angular-cli

Question

I started a fresh new project, generated with angular-cli 8.1.2. I want to have a shared library for several microservices (apps). This library should NOT be included in the applications folder, it's a different project, has its own git. If I try that, the application does not compile in aot/production mode, but works in jit.

I want 2 projects in 2 directories for the application:

/test-lib
/test-app

So I first generate the lib with angular-cli:

ng new test-lib --create-application=false
(using defaults)
cd test-lib/
ng generate library test-lib --prefix=test
ng build test-lib

This generates the library folder and a project inside /test-lib/projects/test-lib

Now I generate the (first) application:

cd ..
ng new test-app
(using defaults)

Now I connect the lib to that app:

Adding "paths" to tsconfig.json:

"paths": {
  "test-lib": [
    "../test-lib/dist/test-lib"
  ],
  "test-lib/*": [
    "../test-lib/dist/test-lib/*"
  ]
}

Adding the import to app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestLibModule } from 'test-lib';

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

And added this tag to app.component.html:

<test-test-lib></test-test-lib>

Running "ng serve" now works without problems.

Firing "ng build" in the folder test-app fails with:

ERROR in : Unexpected value 'TestLibModule in C:/Users/.../test-lib/dist/test-lib/test-lib.d.ts' imported by the module 'AppModule in C:/Users/.../test-app/src/app/app.module.ts'. Please add a @NgModule annotation.
enter code here

Additionally it reports:

: 'test-test-lib' is not a known element:
1. If 'test-test-lib' is an Angular component, then verify that it is part of this module.
2. If 'test-test-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("
</ul>

[ERROR ->]<test-test-lib></test-test-lib>")

My tries to import the component in app.component.ts failed as well (not found)

Shouldn't it be possible to create a library with anglular-cli that lives in an external folder in a simple way?

Robert garcia · Accepted Answer · 2019-07-22T10:40:25.120

1

You need to work with the public_api barrel in your library, import the module from it, then compile

Also you can work with npm link to have separated directories

edited Jul 22 '19 at 10:40

answered Jul 22 '19 at 08:43

Robert garcia

581
2
7

I thought I do so already. If I use import { TestLibModule } from 'test-lib/public-api'; in my app.module.ts I have the same result. I changed export * to export { TestLibModule } from './lib/test-lib.module'; in the public-api.ts, but that didn't help either. – C. Gäking Jul 22 '19 at 09:09
Post your TestLib module please – Robert garcia Jul 22 '19 at 09:10
I think you are having problems with your tsconfig paths since they are pointing to dist, try to import your lib like this: import {//your imports} from '../../projects/testLib/src/public_api' – Robert garcia Jul 22 '19 at 09:38
Ok, I uploaded the testing-app as well now: https://github.com/cgaeking/test-app I tried import { TestLibModule } from '../../../test-lib/projects/test-lib/src/public-api'; but the same error came up – C. Gäking Jul 22 '19 at 09:46
Your import is wrong import { TestLibModule } from '../../projects/test-lib/src/public-api'. Your projects dir must be at the same level than src dir – Robert garcia Jul 22 '19 at 09:51
So I can not have them in seperate directories? That is disappointing when trying to build a proper microservice architechture. A building is not possible otherwise? Why? So the only way is to publish a npm package and import that? That would make the lib development awkward. – C. Gäking Jul 22 '19 at 10:03
I dont know if a build its not possible, but both, your lib and your app needs to live in the same workspace, once you release it, it will live in your node_modules dir. – Robert garcia Jul 22 '19 at 10:06
Thank you for the answers and your time anyways. I'll then try to do a workaround with symlinks or something to be able to have the lib in a seperate git repo. – C. Gäking Jul 22 '19 at 10:13
Ok, that will have to do it. Thanks – C. Gäking Jul 22 '19 at 10:39
I updated my answer, if it helped you plz accept it – Robert garcia Jul 22 '19 at 10:40
I'm having this issue and this is the only place I have been able to find someone else experiencing the same problem. I have tried `"@mylib/api": ["../../dist/@mylib/api"]` and `"@mylib/api": ["../mylib/src/public-api"]` both result in "the Error: Angular JIT compilation failed: '@angular/compiler' not loaded!" so the above solution does not work for me. – Mark Clark Jan 14 '20 at 00:53

Angular project with external lib doesn't compile in AOT mode using angular-cli

1 Answers1