开发者问题收集

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

2021-05-28
7229

我一直使用 Cory Rylan 的 @ngx/json-ld 包 在我的 angular 组件上呈现 LD+json。今天我尝试将我的 angular 应用程序升级到 angular 12,但现在它出现错误。 因此,我决定创建一个新项目,其中包含一个 包含此组件的 angular 库 。同一存储库中的演示项目运行良好。但是当我在项目中使用自己的库时,也会遇到同样的错误。

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

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

3个回答

我不知道是谁发表了评论,但你是对的。已安装的软件包应包含文件夹 bundlesesm2015fesm2015lib 。显然我 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"
  }
}
Pieterjan
2021-05-29

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

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

如果您已经创建了库,并且想要使其可发布,则需要在 angular.json 文件中进行以下更改。

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

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

有关详细信息,请阅读:

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

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

ATHER
2022-02-16

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

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

我知道也许我的包是错的。

所以我修改了我的package.json。我希望我的package.json可以找到文件夹bundles,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",

你可以试试!

Luke
2022-03-02