Search code examples
angulartypescriptdebugginggoogle-chrome-devtoolsangular-cli

Angular 15 Can't find my library's code in browser's dev tools

I have an application and a separate library that I use. The library itself functions correctly, but I can't find the library's files in the browsers dev tools, the application's files show up though. Dev tools screenshot

Directory structure

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

test-libs files

angular.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"
  }
}

package.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": {
    // ...
  }
}

test-lib.module.ts

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


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

test-lib.component.ts

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

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

}

test-app files

angular.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"
  }
}

package.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": {
    // ...
  }
}

app.module.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 { }

app.component.html

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

When running the whole thing I run npm run watch on the test-libs and npm start on the test-app

I've read that appending test-app's angular.json > projects > test-app > architect > serve with this should help on Angular 12 so I gave it a try.

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

It resulted in a warning saying that the sourceMap property is not allowed here, I don't know what else to try.

Solution

  • I posted the same question on angular's github, and I got a solution to my problem. https://github.com/angular/angular-cli/issues/25781

    I had to enable vendor source maps in test-app's angular.json file, because I was using my library from a different workspace.

    So in angular.json > projects.test-app.architect.build.configuration.development

    Instead of configuring the source map like this

    "sourceMap": true,

    I had to specify its attributes and enable vendor maps

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

    Now it finds the library's files browser-screenshot