Angular 库 - 无法读取未定义的属性 'ɵmod'

Question

我一直在使用 Cory Rylan 的 @ngx/json-ld package 在我的 angular 组件上渲染 LD+json。今天我尝试将我的 angular 应用程序升级到 angular 12，但现在出现错误。所以我决定用 angular library containing this component 创建一个新项目。同一存储库中的演示项目运行良好。但是当我在我的项目中使用我自己的库时，我也遇到了同样的错误。

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

我该如何解决这个问题？这是angular本身的问题吗？

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

编辑：

但是，当我在 StackBlitz 中创建项目时，似乎一切正常...

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

Answer 1

我不知道是谁发表了评论，但你是对的。安装包应包含文件夹 bundles、esm2015、fesm2015、lib。显然我 npm publish 放错了文件夹。

我需要做的就是更改我的工作流程以发布 package = dist/path/to/package.json 而不是 ~~projects/path/to/package.json~~.

我的最终工作流程是：

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'

其中 root package.json 包含以下脚本（其他无关紧要）：

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

Answer 2

好的，我正在回答这个问题，以防万一有人在这个线程上，并且使用 Angular NRWL / Nx 得到了问题中提到的错误，并创建了组件库，试图在外部使用该库 mono-repo 工作区

发生这种情况的原因是，默认情况下正在创建的库是不可发布的，我犯了那个错误。是的，上面提到的 @Pieterjan 的回答是正确的，一旦包在 dist 文件夹中发布，它应该有这些文件夹包，esm2015、fesm2015 和 lib。如果您没有看到这些文件夹，则表示您的图书馆不可发布。

如果您已经创建了您的库并希望将其发布，您需要在 angular.json 文件中进行以下更改。

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

重建你的库并检查你的 dist 文件夹，如果你看到你的包有这些文件夹包，esm2015，fesm2015 和 lib，这意味着你的包现在可以发布了。如果要将包发布到自己的包存储库，请指定 .npmrc 文件，执行 npm publish 并将其安装到目标应用程序中。它应该工作。

详情请阅读：

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

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

Answer 3

我也遇到了和你一样的问题

我不知道发生了什么，但我读了 Pieterjan 的回答。

我知道我的包裹可能有误。

所以我修改了我的package.json。我希望我的 package.json 可以找到文件夹 bundle、esm2015、fesm2015。

在我的 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",

你可以试试！

Angular 库 - 无法读取未定义的属性 'ɵmod'

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

angular

angular-library

angular12

Angular 库 - 无法读取未定义的 属性 'ɵmod'

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

angular

angular-library

angular12

Angular 库 - 无法读取未定义的属性 'ɵmod'