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

为什么angular library的build不能将assets静态资源打包进去(转)的更多相关文章

  1. WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题

    在WebStorm中使用webpack打包 (命令npm run build) 后生成在项目的dist目录下,在浏览器打开,静态资源js.css等无法加载.因为打包时,资源使用了绝对路径. 解决: 打 ...

  2. vue 静态资源文件夹src下的assets 和static的区别

    static下的静态资源在项目打包的时候,直接在dist文件夹下直接把static文件夹打包进去src下的assets,在打包时,vue是按照模块来引入里面的静态资源,一般使用这种方式

  3. 使用Angular CLI进行Build (构建) 和 Serve

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  4. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  5. A SIMPLE LIBRARY TO BUILD A DEEP ZOOM IMAGE

    My current project requires a lot of work with Deep Zoom images. We recently received some very high ...

  6. How to add “Maven Managed Dependencies” library in build path eclipse

    If you have m2e installed and the project already is a maven project but the maven dependencies are ...

  7. Android 读取Assets中资源

    //读取文件 private static String getFromAssets(Context context, String fileName) { String result = " ...

  8. 在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案

    转自:http://www.jianshu.com/p/89687f618837 原因分析   当我们在Android依赖库中使用switch-case语句访问资源ID时会报如下图所示的错误,报的错误 ...

  9. Android ndk下用AssetManager读取assets的资源

    转自:http://www.cppblog.com/johndragon/archive/2012/12/28/196754.html 在使用 cocos2dx 在 Android 上进行游戏开发时, ...

随机推荐

  1. [ubuntu]android SDK 与Gradle环境的安装与配置|搭建android基础开发/构建环境

    系统环境: linux:ubuntu18 已配置jdk 环境变量 切换到root账户 sudo su 安装Android-sdk (0)准备工作 切换到/usr/local目录: /usr/local ...

  2. js上拉加载

    <ul class="u-f-log"> <li class="u-f-log-alone" v-for="item in log& ...

  3. git merge --squash 选项合并commit操作实例

     参考: [转] git merge 将多个commit合并为一条之--squash 选项 git checkout master git pull origin master # 本地先拉取最新的m ...

  4. Window Relationships and Frames

    If a page contains frames, each frame has its own window object and is stored in the frames collecti ...

  5. JavaScript基本入门03

    目录 JavaScript 入门基础 03 JavaScript构造函数 常用事件和事件处理函数 小练习 数据类型之间的差异性 数组 介绍 创建 数组的常规使用 数组的length属性 数组当中常见的 ...

  6. vuejs与angularjs以及react的区别?

    1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令. 都支持过滤器:内置过滤器和自定义过滤器. 都支持双向数据绑定. 都不支持低端浏览器. 不同点: 1.AngularJS的学 ...

  7. JAVA_day2_运算符

    Java运算符 一.算术运算符 ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果不同 1.++在左边,a先自增1再赋值给b int a=3 int b=++a 2.++在右边,先赋值 ...

  8. Spring体系

    1.Spring简介 Spring是一个轻量级Java开发框架,最早有Rod Johnson创建,目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题.它是一个分层的JavaSE/JavaEE ...

  9. 再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

    精炼并增补于:界面之下:还原真实的MV*模式 图形界面的应用程序提供给用户可视化的操作界面,这个界面提供给数据和信息.用户输入行为(键盘,鼠标等)会执行一些应用逻辑,应用逻辑(application ...

  10. python 爬虫 urllib模块 发起post请求

    urllib模块发起的POST请求 案例:爬取百度翻译的翻译结果 1.通过浏览器捉包工具,找到POST请求的url 针对ajax页面请求的所对应url获取,需要用到浏览器的捉包工具.查看百度翻译针对某 ...