Angular library - Cannot read property 'ɵmod' of undefined

Question

I've always been using the @ngx/json-ld package from Cory Rylan to render LD+json on my angular components. Today I tried upgrading my angular app to angular 12, but now it's giving errors. So I decided to create a new project with an angular library containing this component. The demo project in the same repository is working perfectly fine. But when I'm using my own library in my project I'm getting the same error as well.

Uncaught TypeError: Cannot read property 'ɵmod' of undefined

How can I solve this? Is this a problem with angular itself?

git clone https://github.com/PieterjanDeClippel/LdJsonTest
cd LdJsonTest
npm install
npm start -- --open

Edit:

However, it seems that when I create the project in StackBlitz, everything works fine...

https://stackblitz.com/edit/angular-ivy-d7tgzx?embed=1&file=package.json

Bertram

Answer 1

I don't know who posted the comment, but you were right. The installed package should contain the folders bundles, esm2015, fesm2015, lib. Apparently I was npm publishing the wrong folder.

All I needed to do was change my workflow to publish package = dist/path/to/package.json instead of projects/path/to/package.json.

My final workflow is:

name: npm-publish

on:
  push:
    branches: [ master ]

jobs:
  build:
  
    name: npm-publish
    runs-on: ubuntu-latest
    
    permissions: 
      contents: read
      packages: write 
    
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    
    - name: Setup node
      uses: actions/setup-node@v2
      with:
        node-version: 14

    - name: Install dependencies
      run: npm install
    
    - name: Build
      run: npm run build -- --prod

    - name: Test
      run: npm run test-headless
    
    - name: Push to NPM
      uses: JS-DevTools/npm-publish@v1
      with:
        package: 'dist/path/to/package.json'
        registry: 'https://registry.npmjs.org'
        token: ${{ secrets.PUBLISH_NODE_TO_NPMJS_COM }}
        access: 'public'

    - name: Push to Github
      uses: JS-DevTools/npm-publish@v1
      with:
        package: 'dist/path/to/package.json'
        registry: 'https://npm.pkg.github.com'
        token: ${{ github.token }}
        access: 'public'

Where the root package.json contains the following script (nothing else matters):

{
  ...,
  "scripts": {
    ...
    "test-headless": "ng test --watch=false --browsers=ChromeHeadless"
  }
}

Bertram

Just for the record, here's an example project which uses NX, has multiple libraries, and contains a github workflow – Bertram

Answer 2

ok, i am responding to this question just incase if anyone is on this thread and getting the error mentioned in question using Angular NRWL / Nx and have created component library, trying to use that library outside mono-repo workspace

The reason it is happening is, by default the library being created is NOT PUBLISHABLE, i did that mistake. Yes the above mentioned answer by @Pieterjan is correct, once the package is published in dist folder it should have these folders bundles, esm2015, fesm2015 and lib. if you do not see these folders, that means your library is not publishable.

if you have already created your library and you want to make it publishable you need to make following changes in your angular.json file.

        <your-lib> --> architect --> build --> builder 
    change value from : @nrwl/angular:ng-packagr-lite to : @nrwl/angular:ng-packagr

Rebuild your library and check your dist folder, if you see your package having these folders bundles, esm2015, fesm2015 and lib, that means your package is now publishable. Specify .npmrc file if you are publishing your package to your own package repo, do npm publish and install it in your target application. it should work.

For details please read:

https://nx.dev/structure/buildable-and-publishable-libraries and

https://angular.io/guide/angular-package-format

Limon

Answer 3

I also encounter the same problem as you.

I don't know what happen, but I read the answer from Pieterjan.

I know maybe my package is wrong.

So I modify my package.json. I want that my package.json can find the folders bundles, esm2015, fesm2015.

In my package.json:

  "module": "dist/your-lib/fesm2015/your-lib.mjs",
  "es2020": "dist/your-lib/fesm2020/your-lib.mjs",
  "esm2020": "dist/your-lib/esm2020/your-lib.mjs",
  "fesm2020": "dist/your-lib/fesm2020/your-lib.mjs",
  "fesm2015": "dist/your-lib/fesm2015/your-lib.mjs",
  "typings": "dist/your-lib/your-lib.d.ts",

You can try it!

Holdback