Angular - 在库生产构建中返回 404 的资产

Question

我正在使用 ng serve 在 Angular 中开发一个组件库。

每当我运行开发服务器时，我都可以提供资产，因为我已将它们捆绑在我的项目 angular.json 文件中。项目结构是这样的：

angular-project
- projects
  - component-library
    - src
      - assets <- contains SVGs consumed by library
      - lib <- source code
- src
  - app
    app.component.ts
    app.component.html
    app.component.scss
    app.module.ts
angular.json <-- bundles projects/component-library/src/assets when running ng serve

我认为这是我搞砸了自己的地方。在我的angular.json 文件中，我有这个：

 "angular-project-name": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/angular-project",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/manifest.webmanifest",
                            {
                                "glob": "**/*",
                                "input": "./projects/component-library/src/assets",
                                "output": "/src/assets/"
                            } <-- HERE is where I bundle everything
                        ], 
                        ...

然后我可以像这样在代码中调用资产：

export class SomeComponent {

    public get logoUrl(): string {
        switch (this.messageBarType) {
            case 'warning':
                return './src/assets/img/message-bar/string-icon-info-warn.svg';
            case 'severe-warning':
                return './src/assets/img/message-bar/string-icon-info-severe-warn.svg';
            case 'error':
                return './src/assets/img/message-bar/string-icon-info-error.svg';
            case 'blocked':
                return './src/assets/img/message-bar/string-icon-info-blocked.svg';
            case 'success':
                return './src/assets/img/message-bar/string-icon-info-success.svg';
            case 'info':
                return './src/assets/img/message-bar/string-icon-info-warn.svg';
        }

    }

}

这在开发服务器上运行良好。但是当我创建一个生产版本并将其推送到 NPM 时，任何对资产的调用都会返回 404。资产文件夹肯定包含在生产版本中，正如我在 dist 文件夹中看到的那样，据我所知，我的ng-package.json 文件是正确的：

{
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
    "dest": "../../dist/component-library",
    "lib": {
        "entryFile": "src/public-api.ts"
    },
    "assets": [
        "./src/lib/**/*.scss",
        "./src/assets/**"
    ]
}

我尝试移动资产文件夹，尝试更改代码中的路径以指向正确的位置，但在生产构建方面我绝对没有运气。有没有人经历过这样的事情？

Answer 1

我最终创建了自己的自定义图标模块。

因为资产是 SVG，而且很可能总是如此，所以我在这里创建了这种类型：

export interface INgxFluentDesignIcon {
    readonly name: string;
    readonly paths: Array<string>;
    readonly fill: string;
    readonly width: number;
    readonly height: number;
}

然后创建一个像这样采用 IngxFluentDesignIcon 的组件：

import { Component, Input } from '@angular/core';
import { INgxFluentDesignIcon } from '../shared/types/ngx-fluent-design-icon.interface';

@Component({
    selector: 'ngx-fluent-design-icon',
    templateUrl: './icon.component.html',
    styleUrls: ['./icon.component.html']
})
export class NgxFluentDesignIconComponent {
    @Input() public icon: INgxFluentDesignIcon;
}

<svg *ngIf="icon" [attr.width]="icon.width" [attr.height]="icon.height" [attr.viewBox]="'0 0' + ' ' + icon.width + ' ' + icon.height" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path *ngFor="let path of icon.paths" [attr.d]="path" [attr.fill]="icon.fill"></path>
</svg>

现在我的组件上显示了正确的图标。

 public get logoUrl(): INgxFluentDesignIcon {
        switch (this.messageBarType) {
            case 'warning':
                return NgxFluentDesignIconInfoWarn;
            case 'severe-warning':
                return NgxFluentDesignIconInfoSevereWarn;
            case 'error':
                return NgxFluentDesignIconInfoError;
            case 'blocked':
                return NgxFluentDesignIconInfoBlocked;
            case 'success':
                return NgxFluentDesignIconInfoSuccess;
            case 'info':
                return NgxFluentDesignIconInfoWarn;
        }
    }

这完全符合我的需要。不过，我仍然不知道如何在 Angular 库的生产版本中包含资产，所以我将把它再开放几天。