设置baseHref为./的Angular与Electron集成构建错误排查

问题背景 #

开发用于Electron环境的Angular项目，为确保Electron能正确定位资源文件，将构建配置中的baseHref设为./，但触发NG3004构建错误：自定义库无法导入Angular Common、Angular Material中的符号（如NgIf指令），移除该配置或设为默认值/则恢复正常。

错误示例 #

Error: libs/libname/src/lib/products-table/project-overview.component.ts:21:14 - error NG3004: Unable to import directive NgIf.        
  The symbol is not exported from C:/Users/bla/node_modules/@angular/common/index.d.ts (module '@angular/common').

21 export class SomeComponent {
                ~~~~~~~~~~~~~~~~~~~~~~~~~

  libs/libname/node_modules/@angular/common/index.d.ts:2024:1
    2024 export declare class NgIf<T = unknown> {
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    2025     private _viewContainer;
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~
     ...
    2062     static ɵdir: i0.ɵɵDirectiveDeclaration<NgIf<any>, "[ngIf]", never, { "ngIf": { "alias": "ngIf"; "required": false; }; "ngIfThen": { "alias": "ngIfThen"; "required": false; }; "ngIfElse": { "alias": "ngIfElse"; "required": false; }; }, {}, never, never, true, never>;
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    2063 }
         ~
    The directive is declared here.

当前构建配置片段 #

...
 "build-relative": {
            ...
            "options": {
                "outputPath": "dist/apps/project",
                "baseHref": "./",
                ...
            },
            ...
        },

已完成调研 #

查阅GitHub相关issue，未找到匹配的解决方案。

解决方案与检查项 #

1. 修正自定义库的tsconfig.lib.json配置 #

确保库的编译配置不会干扰模块解析：

• 确认compilerOptions中的baseUrl设为.，且paths仅映射库自身的模块，无@angular/common或@angular/material的错误路径映射
• 保持moduleResolution为node（默认值，若被修改需恢复）

示例正确配置片段：

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "node",
    "paths": {
      "@your-lib/*": ["src/lib/*"]
    }
  }
}

2. 添加deployUrl与baseHref保持一致 #

在构建配置中补充deployUrl参数，避免资源路径与模块解析逻辑冲突：

"build-relative": {
    "options": {
        "outputPath": "dist/apps/project",
        "baseHref": "./",
        "deployUrl": "./",
        ...
    }
}

3. 清理缓存并重新构建 #

• 执行ng clean清除Angular构建缓存
• 删除项目根目录和自定义库目录下的node_modules、package-lock.json（或yarn.lock）
• 重新安装依赖：npm install
• 依次构建自定义库和主项目：ng build your-lib && ng build build-relative

4. 检查自定义库的导入规范 #

确保库中导入Angular官方模块时使用标准绝对路径，避免错误的相对路径：

• 正确写法：import { NgIf } from '@angular/common';
• 错误写法：import { NgIf } from '../../node_modules/@angular/common';

5. 统一Angular依赖版本 #

确认项目根目录和自定义库的package.json中，@angular/common、@angular/material等核心依赖的版本完全一致，避免版本不兼容导致的符号解析异常。

内容的提问来源于stack exchange，提问作者Tabea