Angular CLI 6 库支持

Library support in Angular CLI 6

库支持在 Angular CLI 6

Angular CLI v6 comes with library support via ng-packagr
plugged into the build system we use in Angular CLI, together with schematics for generating a
library.
Angular CLI v6通过插入到我们在Angular CLI中使用的构建系统中的ng-packagr提供库支持,以及用于生成库的原理图。

Generating a library

生成库

You can create a library in a existing workspace by running the following commands:
您可以通过运行以下命令在现有工作区中创建库:

ng generate library my-lib

You should now have a library inside projects/my-lib.
It contains a component and a service inside a NgModule.
你现在应该在 projects/my-lib 中有一个库。它包含一个组件和一个NgModule内的服务。

Building your library

构建你的库

You can build this library via ng build my-lib, and also unit test it and lint it by replacing
build with test or lint.
您可以通过 ng build my-lib 来构建这个库,并且还可以通过用test或lint替换构建来对其进行单元测试并对其进行测试

Using your library inside your apps

在应用中使用库

Before you use your library, it's important to understand the mental model of how libraries are
used in general.
在使用库之前,了解库一般使用的心理模型很重要。

When you want to use a library from npm, you must:
当你想从npm使用一个库时,你必须:

  • install the library into node_modules via npm install library-name
    通过 npm install library-name 将库安装到node_modules中
  • import it in your application by name import { something } from 'library-name';
    通过 import { something } from 'library-name'; 将库安装到node_modules中

This works because importing a library in Angular CLI looks for a mapping between library name
and location on disk.
这是有效的,因为在Angular CLI中导入库会查找本地磁盘上库名声带库和位置之间的映射。

Angular CLI first looks in your tsconfig paths, then in the node_modules folder.
Angular CLI首先在您的tsconfig路径中查找,然后在node_modules文件夹中查找。

When you build your own libraries it doesn't go into node_modules so we use the tsconfig paths
to tell the build system where it is.
Generating a library automatically adds its path to the tsconfig file.
当您构建自己的库时,它不会进入node_modules,因此我们使用tsconfig路径来告诉构建系统它在哪里。生成库自动将其路径添加到tsconfig文件。

Using your own library follows a similar pattern:
使用你自己的库遵循类似的模式:

  • build the library via ng build my-lib
    通过 ng build my-li b构建库
  • import it in your application by name import { something } from 'my-lib';
    通过import { something } from 'my-lib'; 导入到应用程序中;

It's important to note that your app can never use your library before it is built.
请注意,您的应用在构建之前不能使用您的库。

For instance, if you clone your git repository and run npm install, your editor will show
the my-lib imports as missing.
This is because you haven't yet built your library.
例如,如果你克隆你的git仓库并运行npm install,你的编辑器会显示缺少my-lib导入。这是因为你还没有建立你的图书馆。

Another common problem is changes to your library not being reflected in your app.
This is often because your app is using an old build of your library.
If this happens just rebuild your library.
另一个常见问题是您的库的更改没有反映在您的应用程序中。这通常是因为你的应用程序正在使用你的库的旧版本。如果发生这种情况只是重建你的图书馆。

Publishing your library

发布你的库

To publish your library follow these steps:
要发布您的库,请按照以下步骤操作

ng build my-lib --prod
cd dist/my-lib
npm publish

If you've never published a package in npm before, you will need to create a user account.
You can read more about publishing on npm here:
https://docs.npmjs.com/getting-started/publishing-npm-packages
如果您以前从未在npm发布过软件包,则需要创建一个用户帐户。你可以在这里阅读更多关于npm的发布:https://docs.npmjs.com/getting-started/publishing-npm-packages

The --prod flag should be used when building to publish because it will completely clean the build
directory for the library beforehand, removing old code leftover code from previous versions.
构建发布时应使用 --prod 标志,因为它会事先完全清除库的构建目录,从旧版本中删除旧的代码剩余代码。

Why do I need to build the library everytime I make changes?

每当我进行更改时,为什么需要构建库?

Running ng build my-lib every time you change a file is bothersome and takes time.
每次更改文件时运行构建my-lib都很麻烦并且需要时间。

Some similar setups instead add the path to the source code directly inside tsconfig.
This makes seeing changes in your app faster.
一些类似的设置直接在tsconfig中添加源代码的路径。这可以更快地查看应用程序的更改。

But doing that is risky.
When you do that, the build system for your app is building the library as well.
But your library is built using a different build system than your app.
但这样做是有风险的。当你这样做时,你的应用程序的构建系统也在构建这个库。但是你的库是使用与你的应用程序不同的构建系统构建的

Those two build systems can build things slightly different, or support completely different
features.
这两个构建系统可以构建稍微不同的东西,或支持完全不同的功能。

This leads to subtle bugs where your published library behaves differently from the one in your
development setup.
这会导致您发布的库的行为与开发设置中的行为不同的细微错误。
For this reason we decided to err on the side of caution, and make the recommended usage
the safe one.
出于这个原因,我们决定谨慎犯错,并推荐使用安全的产品。

In the future we want to add watch support to building libraries so it is faster to see changes.
在将来,我们希望增加对建筑图书馆的监视支持,以便更快地查看更改。

We are also planning to add internal dependency support to Angular CLI.
This means that Angular CLI would know your app depends on your library, and automatically rebuilds
the library when the app needs it.
我们还计划向Angular CLI添加内部依赖关系支持。这意味着Angular CLI会知道你的应用程序依赖于你的库,并在应用程序需要时自动重建库

Note for upgraded projects

升级项目的注意事项

If you are using an upgraded project, there are some additional changes you have to make to support
monorepo (a workspace with multiple projects) setups:
如果您正在使用升级项目,则需要进行一些其他更改才能支持monorepo(具有多个项目的工作区)设置:

  • in angular.json, change the outputPath to dist/project-name for your app
    angular.json中, 修改 outputPathdist/project-name 为你的项目
  • remove baseUrl in src/tsconfig.app.json and src/tsconfig.spec.json
    移除 baseUrlsrc/tsconfig.app.jsonsrc/tsconfig.spec.json
  • add "baseUrl": "./" in ./tsconfig.json
    添加 "baseUrl": "./"./tsconfig.json
  • change any absolute path imports in your app to be absolute from the root (including src/),
    or make them relative
    将您的应用程序中的所有绝对路径导入更改为绝对路径(包括src /),或使它们相对

This is necessary to support multiple projects in builds and in your editor.
New projects come with this configuration by default.
这对于在编译和编辑器中支持多个项目是必需的。新项目默认配置此配置。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,096评论 0 10
  • Getting Started Use the Current Stable Version (7.1) Buil...
    Leonzai阅读 1,899评论 0 3
  • 那一年,似乎不知是情窦初开还是阳光晃了眼,觉得眼前曹明月竟然比平时好看了许多,笑的那么美,脸上带着光,晃得我有点晕...
    小计阅读 1,380评论 0 2
  • 2002年,我还是个高一的新兵蛋子,正值风华正茂臭得瑟的青春期,整天上课神游,下课疯玩,少年不识愁滋味。 那年的平...
    浮生3阅读 279评论 0 1
  • 大年初一,陪哥哥嫂子去网吧打游戏,去吃宵夜。 宝宝在家喝酒 ,好可惜,没见过她醉的样子
    Ermao阅读 254评论 0 1