Angular 如何创建可与'；ng服务'；？

如何创建角度组件库，其中包括可使用

ng serve

或类似命令运行的示例/示例应用程序？我这样问是因为，虽然有一些关于构建这样的库的信息，但我不知道如果不将其作为应用程序的一部分运行，我应该如何开发一个库。

如果您想创建一个可重用的模块库

@angular/cli

目前不支持该功能

但是，您可以使用一个名为

ng packagr

的有用库：

安装软件包：

npm install ng-packagr --save-dev

创建一个

ng包.json

{
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
       "entryFile": "public_api.ts"
   }
}

将生成目标添加到

package.json

：

{
  "scripts": {
     "build": "ng-packagr -p ng-package.json"
   }
}

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [ "assets", "favicon.ico" ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [ "styles/styles.scss" ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  },
  {
    "root": "src",
    "outDir": "dist",
    "assets": [ "assets", "favicon.ico" ],
    "index": "alternate-index.html",
    "main": "alternate-main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [ "styles/styles.scss" ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
],

运行生成目标：

npm run build

库的输出将在

dist

文件夹中。

Angular（或者更具体地说，Angular CLI）目前并不真正支持构建库。开发单独组件的另一种方法是在同一项目中使用替代应用程序。例如，您可以创建一个仅运行组件的备用“main.ts”，然后在

.angular cli.json

中创建一个新条目：

{
  "scripts": {
     "build": "ng-packagr -p ng-package.json"
   }
}

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [ "assets", "favicon.ico" ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [ "styles/styles.scss" ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  },
  {
    "root": "src",
    "outDir": "dist",
    "assets": [ "assets", "favicon.ico" ],
    "index": "alternate-index.html",
    "main": "alternate-main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [ "styles/styles.scss" ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
],

请注意，除了

index

和

main

之外，所有内容都是相同的。然后，您可以使用以下选项运行备用应用程序：

ng serve --app 1

---

这是我用来构建角度组件库的工具：