Angular 库和实时重新加载

Question

我遵循了几个关于如何构建和测试angular libary.

例如https://www.youtube.com/watch?v=lvjt9rBHWjo

它的正常工作，除了每一次，我做一个ng build mylibary，它的擦除mylibrary folder的dist folder。在完成构建之前，服务器（通过 npm start 启动）检测到更改（文件夹已删除）并重新编译。当然，由于库文件夹不再存在，因此会出现编译错误，除了ctrl-c再次 npm start ...

我错过了什么？

Answer 1

这是一种超级方便的方法，可以使应用程序自动重新加载，无论对主机应用程序还是对库源代码进行更改，同时保持原始结构准备好构建和发布（无需恢复之前对代码所做的任何更改）构建并发布库）。

拥有一个名为 的库my-lib，需要执行以下步骤：

• 转到projects/my-lib/src/lib目录并创建index.ts导出要公开可用的 lib 组件的文件

• projects/my-lib/src/public-api.ts以从先前创建的文件中导出所有内容的方式编辑文件，index.ts例如：

  export * from './lib/index';

• 最后，更新文件中 lib 的生成 TS 路径tsconfig.json（根目录）以指向index.ts之前创建的文件（而不是指向 dist 文件夹）

这是 git 提交，显示了上述步骤中描述的更改。

有关更详细的信息，请访问：为 Angular CLI 库设置实时重新加载。

不需要外部依赖。

Answer 2

从 Angular 12 开始，不再需要单一工作区、整体存储库，但这是 Angular所采用的方法，有时也是推荐的方法。我在下面概述并测试了单个和多个工作区解决方案。Angular 团队多次建议不要引用未构建的库，因为应用程序构建与库的^{[1] [2]}不同。

单一工作空间

当库和应用程序位于同一工作区时，将监视的库的输出目录添加到应用程序的tsconfig paths中。如果库有多个入口点，请为主库和辅助库创建单独的路径。

/* tsconfig.app.json */
"compilerOptions": {
  "paths": {
    "@my-scope/my-lib": ["dist/my-lib"],
    "@my-scope/my-lib/*": ["dist/my-lib/*"]
  }
}

运行库的 watch 命令。

ng build my-lib --configuration development --watch

运行应用程序的服务命令。

ng serve app --configuration development

多个工作空间

可以使用三种解决方案来开发具有不同工作区中的应用程序的库。

TS 配置路径

如上一节所示，将库的输出目录添加到应用程序的 tsconfig 路径是最简单的解决方案。然而，问题是可能还需要添加未监视库的其他路径，特别是那些具有深度导入的库。这些有时会产生如下所示的编译错误，尽管我也见过其他晦涩的情况。

Module build failed (from .../ivy/index.js)

Error TS2339: Property 'X' does not exist on type 'typeof import("Y")

Error TS2305: Module '"X"' has no exported member 'Y'.

始终包含 Angular，然后包含任何失败的内容，直到成功为止。

/* tsconfig.app.json */
"compilerOptions": {
  "paths": {
    "@angular/*": ["node_modules/@angular/*"],
    "@my-scope/my-lib": ["../MyWorkspace/dist/my-lib"],
    "@my-scope/my-lib/*": ["../MyWorkspace/dist/my-lib/*"],
    "@third-party-scope/third-party-lib": ["node_modules/@third-party-scope/third-party-lib"]
  }
}

VSCode 可能需要tsconfig.json.

目录参考

启用中的preserveSymlinks 构建选项angular.json。

使用输出目录路径安装库以创建符号链接。npm 在安装符号链接时不会安装对等依赖项。使用install-peerdeps或手动安装它们。以下是一个有用的 npm 脚本。

"link:my-lib": "npm install ../MyWorkspace/dist/my-lib && install-peerdeps --only-peers --silent @my-scope/my-lib",

运行库的监视和应用程序的服务命令。

npm 链接

详细说明

用于npm link创建到输出目录的符号链接。

> (cd MyWorkspace/dist/my-lib && npm link)
> (cd AppWorkspace && npm link @my-scope/my-lib)

将 tsconfig 路径添加到tsconfig.json. 如果存在入口点的内部导入，则必要的路径将是安装在工作区和库本身中的包的路径。构建错误是线索，但建议从 Angular 开始。添加路径直至构建成功。每个路径中只能使用一个通配符，因此具有多个入口点和目录的库将需要多个路径。

"paths": {
  "@angular/*": ["node_modules/@angular/*"],
  "@angular/common/*": ["node_modules/@angular/common/*"],
  "rxjs": ["node_modules/rxjs"],
  "@third-party-scope/third-party-lib": ["node_modules/@third-party-scope/third-party-lib"]
}

运行库的监视和应用程序的服务命令。请注意，运行npm install将替换链接。

次要切入点

在 Angular 14 之前，不支持查看辅助入口点。它可以与 tsconfig 路径配合使用。首选的解决方法是配置 webpack 以监视应用程序构建的node_modules 。安装自定义 webpack 构建器。

npm install -D @angular-builders/custom-webpack

配置构建架构师目标。创建“链接”构建和服务配置。

/* angular.json */
"projects": {
  "my-app": {
    ...
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        ...
        "configurations": {
          ...
          "linked": {
            ... a development configuration
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            }
        }
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "configurations": {
          ...
          "linked": {
            "browserTarget": "my-app:build:linked"
          }
}

node_modules从 webpack 配置中的托管路径中删除。

/* webpack.config.json */
module.exports = {
    snapshot: { managedPaths: [] }
};

或者，禁用构建缓存。

export NG_BUILD_CACHE=0

什么是工作空间？

工作空间是根目录结构和配置文件，例如angular.json和package.json，它包含和管理项目（应用程序和库）。整体工作区包含共享一组依赖项的所有项目。一些 Angular 更喜欢将项目组织到单独的工作区中，以便他们可以单独管理依赖项版本。有关更多信息，请查看文档。

Answer 3

您可以使用wait-on来等待库的构建，使用rimraf来清理dist目录，使用npm-run-all与一个命令行窗口中的一个命令并行运行监视脚本。因此安装wait-on，rimraf并run-p作为开发依赖：

npm install wait-on --save-dev
npm install rimraf --save-dev
npm install run-p --save-dev

并package.json根据以下示例更新脚本：

  "scripts": {
    ...
    "clean": "rimraf dist",
    "start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000",
    "watch:lib": "ng build your-library-name --watch",
    "watch:all": "npm run clean && run-p watch:lib start:app",
    ...
  },

可以使用npm run watch:all命令一起观看库和应用程序。

这是脚本的工作方式：

"clean": "rimraf dist"

删除dist文件夹。

"start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000"

等待fesm5目录中的文件夹dist，ng serve --poll 2000启动应用程序并将文件监视轮询时间延长至 2000 毫秒。在我的情况下，最后一个是必要的，因为在库修改后，应用程序能够在浏览器中重新加载与以前相同的内容，我只能在按 F5 后看到新版本。

"watch:lib": "ng build your-library-name --watch"

在监视模式下构建库。

"watch:all": "npm run clean && run-p watch:lib start:app"

清理dist文件夹，然后它为应用程序提供服务并并行观察库。