Question

建筑物＆amp;打包一个Angular 6库，我似乎无法指示Angular CLI将库的资源复制到每个构建的dist/assets文件夹中。

假设项目的文件夹结构是这个 -

- dist
- e2e
- node_modules
- projects
  - lib1
    - src
      - lib
      - assets
        - icons
- src

当我运行ng build lib1或ng build lib1 --prod时，assets/icons文件夹未被复制到dist/lib1/assets/icons。

如果我运行ng build，则会复制src/assets（根src / assets），但不会复制projects/lib1/assets。

angular.json文件包含对"assets": ["src/assets"]的引用，但不允许将assets密钥专门添加到项目中，只允许添加到主根应用程序。添加时，我收到以下错误：

架构验证失败，并出现以下错误：数据路径“” 不应该有其他属性（资产）。

我还尝试将以下自定义复制规则添加到资源，以将资产复制到dist / lib而不是dist / appname：

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

但是我收到以下错误：

无法将资产写入输出路径之外的位置。

是否有内置的方法来管理每个版本的库资产副本？

更新06/05/2018

我向Angular CLI提出了一个问题，但尚未收到回复。 Issue #11701

Answer 1

目前，我还没有找到正式的内置方式。

我打开了Angular CLI issue，希望能得到CLI小组的响应。

与此同时，我的解决方法是使用命令行工具：

在"scripts": { ... "build": "ng build lib1 --prod && scss-bundle -c scss-bundle.config.json && cp -R projects/lib1/src/assets/ dist/lib1/assets/", }我添加了：

scss-bundle

要复制SASS文件，我使用scss-bundle.config.json包含以下内容的配置文件{ "entry": "./projects/lib1/src/assets/style/main.scss", "dest": "./dist/lib1/assets/style/styles.scss" }：

-- projects/lib1/src/assets/
                  -- style
                     -- main.scss
                     -- partials
                        -- _variables.scss
                        -- _styles.scss
                        __ _rtl.scss

这会将项目的SASS文件构建为1个文件并将其复制到dist文件夹中。我的SASS文件结构类似于：

.css

所以你可以看到我不想发送所有的原始sass，只有一个最终文件。当然，您也可以将其编译为cp -R文件。

为确保复制所有其他资源，我使用简单的Mac OS / Linux命令rsync或ng build。

当然，我不是运行npm run build而是运行{{1}}。

希望这会有所帮助，如果您有更好的解决方案，请告诉我。

Answer 2

看起来将来这一切都可以通过CLI进行自动化，但是，目前有一些解决方案。有些涉及编写后安装脚本，如果您有大量的工作要做的话，这是一个很好的脚本。其中之一涉及手动移动它们，但这对于出现错误IMO来说太开放了。我还看到了几个可以安装的npm软件包，它们似乎可以扩展ng-packagr的功能（ng-packagr可以构建库，而webpack可以构建应用）。

其中一些是好的，有些是坏的，IMO，我不会逐一讨论我的想法，相反，我只会分享我的工作。

我正在研究企业Angular应用程序，并且正在将我们的特性和功能提取到库中，以便我们可以在不久的将来开始与小型应用程序共享代码。由于我们的流程和构建协议，我们已经没有直接使用ng cli来构建我们的项目，而是使用了npm脚本。

如果您已经熟悉NPM脚本，请跳到下面，否则，此快速注释将非常有帮助。

使用Angular CLI，您可以运行以下命令...

ng build myProject --configuration=production来运行项目的产品构建。

ng build myLibrary运行库的产品版本，您可能运行ng build myLibrary --watch=true运行库的产品版本，并在使用库时监视更改。

对我来说，在我从事项目工作时，就像使用并运行ng build myLibrary --watch=true

一样，我使用ng CLI。

这很好用。我有一个包含资产的库的资产文件夹，并将它们存储在myProject / src / lib / assets中。一切都很好。虽然我的资产不在我的dist / myLibrary中……但是，这很酷，因为在开发过程中，当我在图像标签<img>中使用相对路径时，webpack将从我的图书馆项目而非我的dist文件夹中提取无论如何。那么，如何使用NPM脚本解决此问题？好吧，当您阅读下一行时，您将拍打额头，然后说“废话，我知道”……来了……

如果要跳过，请点击此处...

"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run msgAssetsCopied",

是的，就是一些基本的bash：）

我将针对命令行的新功能进行分解。

myLibrary:prod这是npm脚本（也称为npm运行脚本）的名称。您可以在命令行中使用npm run myLibrary:prod来调用它，然后让终端完成其余的工作。 “休息”只是您的计算机终端可以相应读取，解释和执行的命令。

ng build myLibrary这会触发标准的ng CLI构建命令，从而构建您的库

&&的意思是：“嘿，在您做我[&&]左边的事情之后，再做我右边的事情”

mkdir dist/myLibrary/lib/assets这是一个基本的bash命令，它创建一个目录，您将资产复制到该目录。 mkdir创建一个目录，路径指定我希望该目录所在的位置和位置。如果我在文件夹中，我想建立一个目录，例如“ foo”，那么如果我在“ foo”中，并且想要目录“ tacos”，我会做mkdir bar，这会给我foo/bar放在“ bar”目录中，我将执行mkdir bar/tacos，它将在“ bar”目录中创建“ tacos”，例如foo/bar/tacos。

我更喜欢创建一个文件夹并从a-> b移动资产，而不是尝试cp文件夹及其资产。

cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/对于刚接触bash的人来说，它分为4部分。

cp是“副本”
-R用于“递归”，意思是将所有文件和文件夹复制后都保持相同的结构。
projects/myLibrary/src/lib/assets/，这是我要移到我之前用上一个mkdir命令创建的新目录的位置。
dist/myLibrary/lib/assets/是复制命令的目标。

所以有了这个，你就可以...

命令cp -R
目标path/to/assets/in/library/project/
目的地path/to/desired/directory/in/build

最后一步是npm run msgAssetsCopied，这只是我package.json中的另一个npm脚本，它告诉该人在键盘上敲打该资产已被复制。我通常在脚本中都带有表情符号，以便通过识别屏幕上的表情符号，使开发人员更容易在任何时间点准确地查看脚本的位置。例如...

"msgAssetsCopied": "echo '? Assets Copied to Library Dist Folder ?'",

当完成后，? Assets Copied to Library Dist Folder ?将被打印在终端中。

还是新手？不用担心，现在我将告诉您它们在package.json中的位置。

{
  "name": "YourWorkspace",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    }
}

如您所见，这是package.json文件的顶部。您可以根据需要添加任意数量的脚本，下面将添加我刚刚共享的脚本...

{
  "name": "YourWorkspace",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp 
    -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run 
    msgAssetsCopied",
    }
}

炸弹爆炸！

Answer 3

当您问这个问题时，除非您创建一个处理逻辑的js脚本，否则无法在dist文件夹中包含css文件。

现在有可能是因为ng-packagr发布了一个新版本，该版本允许您将资产与构建文件一起包括在内：

您可以使用资产选项复制这些资产。

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

此处提供更多信息：https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

Answer 4

现在，您可以使用最新版本的Packager（版本9.0.0-rc.3）执行此操作。请看提供的示例here

Answer 5

我只是手动将所需的图像复制到/ dist / assets并作为URL分配给了/assets/image.jpg

Angular 6构建一个带有资产的库

5 个答案: