Search code examples
angularangular-cling-packagr

How to create angular component library using Angular CLI 12?

I'm trying to generate an angular workspace using Angular CLI. It should contain a library. Another app should be able to import the angular npm package and show the exported default component.

For generation I used ...

ng new custom-comp-lib --createApplication=false --directory="./" --skip-tests="true"

To create a new library entry, I used ng generate library example-feature.

> npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 20.63 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
    npm: 7.16.0 - ~/.nvm/versions/node/v14.15.3/bin/npm
  Browsers:
    Chrome Canary: 93.0.4546.0
    Firefox Developer Edition: 90.0
    Safari: 14.1.1
  npmGlobalPackages:
    @angular/cli: 12.0.5
    npm: 7.16.0

After publishing the npm package and importing it to another angular app, the module can't be resolved.

On Firefox:

Uncaught TypeError: can't access property "\u0275mod", type is undefined
    Angular 7
        getNgModuleDef
        recurse
        recurse
        registerNgModuleType
        NgModuleFactory$1
        compileNgModuleFactory__POST_R3__
        bootstrapModule
    4431 main.ts:11
    Webpack 7
        __webpack_require__
        __webpack_exec__
        <anonymous>
        O
        <anonymous>
        webpackJsonpCallback
        <anonymous>
core.js:1117
    Angular 7
        getNgModuleDef
        recurse
        recurse
        registerNgModuleType
        NgModuleFactory$1
        compileNgModuleFactory__POST_R3__
        bootstrapModule
    4431 main.ts:11
    Webpack 8
        __webpack_require__
        __webpack_exec__
        <anonym>
        O
        <anonym>
        webpackJsonpCallback
        webpackJsonpCallback
        <anonym>

OR

ERROR TypeError: can't access property "\u0275cmp", e is undefined
    Le http://localhost:4200/main.js:1
    je http://localhost:4200/main.js:1
    directiveDefs http://localhost:4200/main.js:1
    mr http://localhost:4200/main.js:1
    gr http://localhost:4200/main.js:1
    e http://localhost:4200/main.js:1
    create http://localhost:4200/main.js:1
    bootstrap http://localhost:4200/main.js:1
    _moduleDoBootstrap http://localhost:4200/main.js:1
    _moduleDoBootstrap http://localhost:4200/main.js:1
    bootstrapModuleFactory http://localhost:4200/main.js:1
    invoke http://localhost:4200/polyfills.js:1
    onInvoke http://localhost:4200/main.js:1
    invoke http://localhost:4200/polyfills.js:1
    run http://localhost:4200/polyfills.js:1
    P http://localhost:4200/polyfills.js:1
    invokeTask http://localhost:4200/polyfills.js:1
    onInvokeTask http://localhost:4200/main.js:1
    invokeTask http://localhost:4200/polyfills.js:1
    runTask http://localhost:4200/polyfills.js:1
    _ http://localhost:4200/polyfills.js:1
main.js:1:180898
    Sn http://localhost:4200/main.js:1
    handleError http://localhost:4200/main.js:1
    bootstrapModuleFactory http://localhost:4200/main.js:1
    invoke http://localhost:4200/polyfills.js:1
    run http://localhost:4200/polyfills.js:1
    runOutsideAngular http://localhost:4200/main.js:1
    bootstrapModuleFactory http://localhost:4200/main.js:1
    invoke http://localhost:4200/polyfills.js:1
    onInvoke http://localhost:4200/main.js:1
    invoke http://localhost:4200/polyfills.js:1
    run http://localhost:4200/polyfills.js:1
    P http://localhost:4200/polyfills.js:1
    invokeTask http://localhost:4200/polyfills.js:1
    onInvokeTask http://localhost:4200/main.js:1
    invokeTask http://localhost:4200/polyfills.js:1
    runTask http://localhost:4200/polyfills.js:1
    _ http://localhost:4200/polyfills.js:1

On Chrome:

ERROR TypeError: Cannot read property 'ɵcmp' of undefined
    at Le (main.js:1)
    at je (main.js:1)
    at Array.map (<anonymous>)
    at n.directiveDefs (main.js:1)
    at mr (main.js:1)
    at gr (main.js:1)
    at main.js:1
    at Qo.create (main.js:1)
    at e.bootstrap (main.js:1)
    at main.js:1

The testing app is also just a default generated angular app (latest = ^12.0.5).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ExampleFeatureModule } from 'example-feature/src/public-api';

import { AppComponent } from './app.component';

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


 <h1>Hi</h1>
 <lib-example-feature></lib-example-feature>

Any ideas why this is failing? It is also possible to run the build without errors.

Did anyone generate a new angular library this days? And has a similar issue?

Thanks in advance.

Solution

  • It seems like my npm publish wasn't using the dist resources folder :/

    Now everything works, with disabled Ivy.