利用ng new project的命令办法进行建立工程。
注：也可以创建工程，先不创建运用或library， 之后可以通过多运用办法来添加。
例如ng g application xxx 或 ng g library xxx
利用cli ，根据创建依次选择估量利用的样式等信息后开始建立。
$ ng new my-project ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No CREATE my-project/README.md (1063 bytes) CREATE my-project/.editorconfig (274 bytes) CREATE my-project/.gitignore (548 bytes) CREATE my-project/angular.json (2786 bytes) CREATE my-project/package.json (1041 bytes) CREATE my-project/tsconfig.json (903 bytes) CREATE my-project/tsconfig.app.json (263 bytes) CREATE my-project/tsconfig.spec.json (273 bytes) CREATE my-project/.vscode/extensions.json (130 bytes) CREATE my-project/.vscode/launch.json (470 bytes) CREATE my-project/.vscode/tasks.json (938 bytes) CREATE my-project/src/main.ts (250 bytes) CREATE my-project/src/favicon.ico (15086 bytes) CREATE my-project/src/index.html (295 bytes) CREATE my-project/src/styles.scss (80 bytes) CREATE my-project/src/app/app.component.scss (0 bytes) CREATE my-project/src/app/app.component.html (20884 bytes) CREATE my-project/src/app/app.component.spec.ts (928 bytes) CREATE my-project/src/app/app.component.ts (369 bytes) CREATE my-project/src/app/app.config.ts (227 bytes) CREATE my-project/src/app/app.routes.ts (77 bytes) CREATE my-project/src/assets/.gitkeep (0 bytes) ✔ Packages installed successfully. Successfully initialized git.
加入library
这里创建了一个library， 并加入到当前的工程中。建立完成后， 会再projects下建立对应的工程。
$ ng g library my-lib ? Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.io/analytics. No Global setting: enabled Local setting: disabled Effective status: disabled CREATE projects/my-lib/README.md (978 bytes) CREATE projects/my-lib/ng-package.json (155 bytes) CREATE projects/my-lib/package.json (210 bytes) CREATE projects/my-lib/tsconfig.lib.json (314 bytes) CREATE projects/my-lib/tsconfig.lib.prod.json (240 bytes) CREATE projects/my-lib/tsconfig.spec.json (273 bytes) CREATE projects/my-lib/src/public-api.ts (118 bytes) CREATE projects/my-lib/src/lib/my-lib.component.spec.ts (590 bytes) CREATE projects/my-lib/src/lib/my-lib.component.ts (223 bytes) CREATE projects/my-lib/src/lib/my-lib.service.spec.ts (353 bytes) CREATE projects/my-lib/src/lib/my-lib.service.ts (134 bytes) UPDATE angular.json (3784 bytes) UPDATE package.json (1070 bytes) UPDATE tsconfig.json (975 bytes) ✔ Packages installed successfully.为控件创建和利用全局样式
全局样式， 表示library中可以利用的样式， 但是利用全局的情形一样平常为通过scss或tailwindcss等，要预先产出的css样式库的模式。 正常libaray 可以不须要或利用时利用app.component.scss中定义组件自己的样式即可。
由于这个工程会利用tailwindcss,以是工程中先引入tailwindcss 。
以是 在project/my-lib 下建立assets用于放置一个全局的样式文件。
将global.css放到打包设定中，关照包装要带入该样式文件。
{ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/my-lib", "lib": { "entryFile": "src/public-api.ts" }, "assets": [ { "input": "src/assets", "glob": "/.css", "output": "assets" } ] }加入tailwindcss ，参考官方加入。
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init
初始化后， 建立了tailwind.config.js的文件， 调度该文件如下：
/ @type {import('tailwindcss').Config} / module.exports = { content: [ "./src//.{html,ts}", "./projects/my-lib/src//.{html,ts}" ], theme: { extend: {}, }, plugins: [], }
注，以上是最基本的配置， 如果要配置其他属性可参考官方设定。
对付applcation 的工程，加入@tailwind 的定义。
@tailwind base; @tailwind components; @tailwind utilities;开拓library的组件页面
以上基本的搭建事情完成了， 下面我们来写一个最大略的lib .
开启my-lib.component.ts的文件， 加入了tailwind的利用， 显示了4个div。
如下：
import { Component } from '@angular/core'; @Component({ selector: 'lib-my-lib', standalone: true, imports: [], template: ` <div class="flex flex-row items-center justify-center w-full h-12 border border-colors-item-start"> <div class="rounded w-10 h-10 bg-blue-800"></div> <div class="rounded-md w-10 h-10 bg-lime-300"></div> <div class="rounded-lg w-10 h-10 bg-red-400"></div> <div class="rounded-full w-10 h-10 bg-red-400 "></div> </div> `, styles: `` }) export class MyLibComponent { }编译和打包
由于我们利用了tailwind， 但是在angular的ng-packagr并不会实行动态的天生干系事情， 以是这个地方再build之前，先利用tailwind 的cli 工具天生global.css的文件。 把稳：tailwind会根据工程中利用的样式进行天生， 没有利用不会创建。
$ npx tailwindcss -o ./projects/my-lib/src/assets/global.css --minify Rebuilding... Done in 121ms. $ ng build my-lib --configuration production Building Angular Package ------------------------------------------------------------------------------ Building entry point 'my-lib' ------------------------------------------------------------------------------ ✔ Compiling with Angular sources in Ivy partial compilation mode. ✔ Generating FESM bundles ✔ Copying assets ✔ Writing package manifest ✔ Built my-lib $ cd ./dist/my-lib $ npm pack npm notice npm notice my-lib@0.0.1 npm notice === Tarball Contents === npm notice 978B README.md npm notice 2.8kB esm2022/lib/my-lib.component.mjs npm notice 1.4kB esm2022/lib/my-lib.service.mjs npm notice 480B esm2022/my-lib.mjs npm notice 615B esm2022/public-api.mjs npm notice 2.3kB fesm2022/my-lib.mjs npm notice 2.2kB fesm2022/my-lib.mjs.map npm notice 111B index.d.ts npm notice 264B lib/my-lib.component.d.ts npm notice 223B lib/my-lib.service.d.ts npm notice 523B package.json npm notice 78B public-api.d.ts npm notice === Tarball Details === npm notice name: my-lib npm notice version: 0.0.1 npm notice filename: my-lib-0.0.1.tgz npm notice package size: 3.9 kB npm notice unpacked size: 12.0 kB npm notice shasum: 8e90e3ff50fddc3cdeac4c6aa938afbb8ee57543 npm notice integrity: sha512-3P6YRElbEzl8A[...]HftBmHIJXoyjA== npm notice total files: 12 npm notice my-lib-0.0.1.tgz
到此， 我们天生了my-lib的tgz的文件了。 其他工程可以引入利用。 当然我们也可以发布我们库到npm中。
发布发布之前， 要有npm的账户哦。 如果没有登入请实行下面语句
$ npm login exit 1 npm notice Log in on https://registry.npmjs.org/ Login at: https://www.npmjs.com/login?next=/login/cli/xx Press ENTER to open in the browser... Logged in on https://registry.npmjs.org/.
登入成功后， 就可以发布了。
$ npm publish exit 1 npm WARN publish npm auto-corrected some errors in your package.json when publishing. Please run "npm pkg fix" to address these errors. npm WARN publish errors corrected: npm WARN publish Removed invalid "scripts" npm notice npm notice my-lib-xx@0.0.1 npm notice === Tarball Contents === npm notice 978B README.md npm notice 5.0kB assets/global.css npm notice 2.8kB esm2022/lib/my-lib.component.mjs npm notice 1.4kB esm2022/lib/my-lib.service.mjs npm notice 480B esm2022/my-lib.mjs npm notice 615B esm2022/public-api.mjs npm notice 2.3kB fesm2022/my-lib.mjs npm notice 2.2kB fesm2022/my-lib.mjs.map npm notice 111B index.d.ts npm notice 264B lib/my-lib.component.d.ts npm notice 223B lib/my-lib.service.d.ts npm notice 527B package.json npm notice 78B public-api.d.ts npm notice === Tarball Details === npm notice name: my-lib-xx npm notice version: 0.0.1 npm notice filename: my-lib-xx-0.0.1.tgz npm notice package size: 5.7 kB npm notice unpacked size: 17.0 kB npm notice shasum: 19644a8e46c20e067d7c24d9d51ddd57b3846a0f npm notice integrity: sha512-tIJXZUPlRFjpT[...]fKDZ1PWvrtyLQ== npm notice total files: 13 npm notice npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access + my-lib-xx@0.0.1
把稳， 不要重名， my-lib 由于有了对应的包了， 以是这里调度了一下包名后推送。
利用lib利用和其他包利用过程一样。这里区分2种， 一个是当前工程内利用， 只须要实行了ng build ，运用程序的工程内即可利用该library了。
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { MyLibComponent } from '../../projects/my-lib/src/public-api'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet,MyLibComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { title = 'my-project'; }
<lib-my-lib></lib-my-lib>
把稳，引入lib的css文件。
可以看到样式已经出来了。
如果是新增的工程，利用包， 可以如下：
引入lib可以直接 npm install xxx的办法直接从npm 中下载， 也可以直接写路径。
例如：
"my-lb-xx": "/Users/xxx/dist/my-lib/my-lib-0.0.11.tgz",引入css
可以直接调度style.scss加入引用
@import "../node_modules/aiwow-chat/assets/global.css"
然后须要的组件就可以开始利用了。
