Angular 15 在浏览器的开发工具中找不到我的库的代码

Question

我有一个应用程序和一个单独的库。库本身功能正常，但我在浏览器开发工具中找不到库的文件，但应用程序的文件显示了。开发工具截图

目录结构

test (non-project folder)
- test-libs (project folder)
  - projects
   - test-lib
- test-app (project folder)

---

测试库文件

角度.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-lib": {
      "projectType": "library",
      "root": "projects/test-lib",
      "sourceRoot": "projects/test-lib/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/test-lib/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/test-lib/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/test-lib/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "development"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/test-lib/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "9d7aa77d-b59f-4cb0-b5de-41dc7effabf1"
  }
}

包.json

{
  "name": "test-libs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  }
}

测试库.module.ts

import { NgModule } from '@angular/core';
import { TestLibComponent } from './test-lib.component';


@NgModule({
  declarations: [
    TestLibComponent
  ],
  imports: [
  ],
  exports: [
    TestLibComponent
  ]
})
export class TestLibModule { }

测试库.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'test-lib',
  template: `
    <p>
      test-lib works!
    </p>
  `,
  styles: [
  ]
})
export class TestLibComponent {

}

---

测试应用程序文件

角度.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:component": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:interceptor": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:resolver": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist/test-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "test-app:build:production"
            },
            "development": {
              "browserTarget": "test-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "test-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "00c48272-8c8d-424b-99c7-7515065f40a0"
  }
}

包.json

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    // ...
    "test-lib": "file:../test-libs/dist/test-lib",
    // ...
  },
  "devDependencies": {
    // ...
  }
}

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestLibModule } from 'test-lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TestLibModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.html

<h1>{{title}}</h1>
<test-lib></test-lib>

---

运行整个过程时，我npm run watch在测试库和npm start测试应用程序上运行

我读到附加 test-app 的 angular.json >projects>test-app>architect>service 应该对 Angular 12 有帮助，所以我尝试了一下。

"options": {
  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": true
  }
}

它导致警告说此处不允许使用 sourceMap 属性，我不知道还能尝试什么。

Answer 1

我在 Angular 的 github 上发布了同样的问题，并且我得到了问题的解决方案。https://github.com/angular/angular-cli/issues/25781

我必须在test-app的angular.json文件中启用供应商源映射，因为我正在使用来自不同工作区的库。

所以在angular.json > projects.test-app.architect.build.configuration.development

而不是像这样配置源映射

"sourceMap": true,

我必须指定其属性并启用供应商地图

"sourceMap": {
  "scripts": true,
  "styles": true,
  "vendor": true
},

现在它找到了库的文件