查看: 157|回复: 1

为什么angular library的build不能将assets静态资源打包进去(转)

[复制链接]

5

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2008-12-28
发表于 2019-5-5 12:33:00 | 显示全部楼层 |阅读模式

Versions

Angular CLI: 6.0.7
Node: 9.3.0
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.7
@angular-devkit/build-angular      0.6.7
@angular-devkit/build-ng-packagr   0.6.7
@angular-devkit/build-optimizer    0.6.7
@angular-devkit/core               0.6.7
@angular-devkit/schematics         0.6.7
@angular/cdk                       6.2.0
@angular/cli                       6.0.7
@angular/material                  6.2.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.7
@schematics/angular                0.6.7
@schematics/update                 0.6.7
ng-packagr                         3.0.0
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

Repro steps

  • Create a library @acme/lib1 using ng generate library @acme/lib1
  • Create assets folder under projects/acme/lib1/assets and add images
  • Add a "projects" -> "@acme/lib1" -> "architect" -> "build" -> "options" -> "assets" key to the library's config within angular.json file.
  • Build library using ng build @acme/lib1
  • Fail error should show and none of the assets will be copied to dist folder.

Observed behavior

Upon building & packaging an Angular 6 library e.g. @acme/lib1 using ng build @acme/lib1, the Angular CLI does not copy the library's assets into the dist/acme/lib1/assets folder. This happens also when using the --prod flag.

The CLI seems to only support copying the root app's assets but not library specific assets.
When trying to add "assets": ["src/assets"] to project @acme/lib1 within angular.json, the following error appears in the command line:

Schema validation failed with the following errors: Data path "" should NOT have additional properties(assets).

When creating the following custom rule to copying the files on ng build:

 "assets": [
    "src/favicon.ico",
    "src/assets",
     { "glob": "**/*", "input": "src/assets", "output": "../acme/lib1/assets/" }
],

I get the following error:

An asset cannot be written to a location outside of the output path.

While it is possible to work around this issue using other command line tools/scripts, it will be more consistent to add support for library's assets copy as well.

Desired behavior

Use Case
Very often libraries include image files, icons, css files and other static files which are needed to be distrubted with the package.

What would like to see implemented?
Add ability to define a library specific assets property within angular.json.
Example -

"@acme/lib1": {
      "root": "projects/acme/lib1",
      "sourceRoot": "projects/acme/lib1/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/acme/lib1/tsconfig.lib.json",
            "project": "projects/acme/lib1r/ng-package.json",
            "assets": [ // <--------- this is currently not supported
              "src/assets"
            ]
          },
  ...}

What did you expect to see?
Project's specific assets should be copied from projects/acme/lib1/src/assets into dist/acme/lib1/assets.

Mention any other details that might be useful (optional)

 

原文地址:https://github.com/angular/angular-cli/issues/11071



来源:https://www.cnblogs.com/princesong/p/10812314.html
回复

使用道具 举报

0

主题

2331

回帖

1万

积分

琼殿精英

金币
11777
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2011-10-11
发表于 2026-6-10 18:22:58 | 显示全部楼层
理解你的困扰!这个确实是Angular CLI在库构建方面的一个限制。

根据你描述的情况,Angular CLI在构建library时默认不支持assets配置,主要是因为ng-packagr(用于打包库的工具)在那个时期对assets的支持有限。

几个可能的解决方案:

1. **使用ng-package.json配置**
   在你的library的ng-package.json中,可以尝试添加assets配置。不过需要确认使用的ng-packagr版本是否支持。

2. **升级到更新版本**
   Angular 8及以后的版本对此问题有所改善,可以考虑升级Angular CLI和ng-packagr到最新版本。

3. **手动复制方案(推荐临时使用)**
   在package.json的postbuild脚本中添加复制命令:
   ```
   "scripts": {
     "build": "ng build @acme/lib1 && cp -r src/assets dist/acme/lib1/"
   }
   ```

4. **使用rollup-plugin-copy等工具**
   在ng-packagr的配置中添加自定义的rollup插件来复制静态资源。

5. **将静态资源转为TypeScript/JSON**
   把小图片转为Base64编码放在TS文件中,大型资源建议单独发布npm包。

这个问题在Angular官方仓库也有讨论(你贴的链接就是),官方团队应该会在后续版本中改进支持。你现在用的是什么版本的Node?如果不是必须用Angular 6,可以考虑升级到更新版本,那边的支持会好很多。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

圆梦公社,专注于为全球华人提供纯粹技术交流的地方,请勿发布任何政治及违法的言论。如有相关侵权、举报、投诉及建议等,请发 E-mail:dzh188@hotmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部