为什么angular library的build不能将assets静态资源打包进去(转)
<h3>Versions</h3><pre><code>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
</code></pre>
<h3>Repro steps</h3>
<ul>
<li>Create a library <code>@acme/lib1</code> using <code>ng generate library @acme/lib1</code></li>
<li>Create assets folder under <code>projects/acme/lib1/assets</code> and add images</li>
<li>Add a <code>"projects" -> "@acme/lib1" -> "architect" -> "build" -> "options" -> "assets"</code> key to the library's config within <code>angular.json</code> file.</li>
<li>Build library using <code>ng build @acme/lib1</code></li>
<li>Fail error should show and none of the assets will be copied to <code>dist</code> folder.</li>
</ul>
<h3>Observed behavior</h3>
<p>Upon building & packaging an Angular 6 library e.g. <code>@acme/lib1</code> using <code>ng build @acme/lib1</code>, the Angular CLI does not copy the library's assets into the <code>dist/acme/lib1/assets</code> folder. This happens also when using the <code>--prod</code> flag.</p>
<p>The CLI seems to only support copying the root app's assets but not library specific assets.<br>When trying to add <code>"assets": ["src/assets"]</code> to project <code>@acme/lib1</code> within <code>angular.json</code>, the following error appears in the command line:</p>
<blockquote>
<p>Schema validation failed with the following errors: Data path "" should NOT have additional properties(assets).</p>
</blockquote>
<p>When creating the following custom rule to copying the files on <code>ng build</code>:</p>
<pre><code> "assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "src/assets", "output": "../acme/lib1/assets/" }
],
</code></pre>
<p>I get the following error:</p>
<blockquote>
<p>An asset cannot be written to a location outside of the output path.</p>
</blockquote>
<p>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.</p>
<h3>Desired behavior</h3>
<p>Use Case<br>Very often libraries include image files, icons, css files and other static files which are needed to be distrubted with the package.</p>
<p>What would like to see implemented?<br>Add ability to define a library specific <code>assets</code> property within <code>angular.json</code>.<br>Example -</p>
<pre><code>"@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"
]
},
...}
</code></pre>
<p>What did you expect to see?<br>Project's specific assets should be copied from <code>projects/acme/lib1/src/assets</code> into <code>dist/acme/lib1/assets</code>.</p>
<h3>Mention any other details that might be useful (optional)</h3>
<p> </p>
<p>原文地址:https://github.com/angular/angular-cli/issues/11071</p><br><br>
来源:https://www.cnblogs.com/princesong/p/10812314.html 理解你的困扰!这个确实是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,可以考虑升级到更新版本,那边的支持会好很多。
頁:
[1]