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

[PieterjanDeClippel]

Bug Report

Description

I created an angular library using angular 12, but when using the library in another project, I'm getting the following error:

Cannot read property 'ɵmod' of undefined

Minimal Reproduction

• Git repo: https://github.com/PieterjanDeClippel/LdJsonTest
• StackBlitz: https://stackblitz.com/edit/angular-ivy-d7tgzx
• Package: https://github.com/MintPlayer/mintplayer-ng-json-ld

Exception or Error

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

Your Environment

Angular Version:

Angular CLI: 12.0.2
Node: 14.15.1
Package Manager: npm 6.14.8
OS: win32 x64

Angular: 12.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@schematics/angular             12.0.2
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?
The StackBlitz appears to be working fine...

[JoostK]

So the @mintplayer/ng-json-ld package is published to NPM as .ts source files, instead of the built .js files. Compilation succeeds because TypeScript sees those .ts files and considers their declarations as valid, but the file won't actually be emitted into .js when requested because TypeScript detects that it's a source file within node_modules, which it refrains from emitting.

I'm moving this issue to the CLI side as we should be able to report an error for this case (for context, analyzerFileEmitter should detect when the emit output is empty).

A solution for you would be to actually start publishing the compiled bundle to NPM; not the TypeScript sources.

[PieterjanDeClippel]

It seems that I was publishing the wrong files. Change projects/path/to/package.json to dist/path/to/package.json and now everything works fine.

Workflow:

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:

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

And the package package.json contains the link to your repository:

{
  "name": "@mintplayer/ng-json-ld",
  "private": false,
  "version": "1.0.7",
  "repository": {
    "type": "git",
    "url": "https://github.com/MintPlayer/mintplayer-ng-json-ld"
  },
  "peerDependencies": {
    "@angular/common": "^12.0.2",
    "@angular/core": "^12.0.2"
  },
  "dependencies": {
    "tslib": "^2.1.0"
  }
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}