如何创建一个可以使用'ng serve'运行的Angular组件库？

Question

如何创建一个Angular组件库，其中包含可以使用ng serve或类似命令运行的示例/示例应用程序？我问，因为虽然有一些关于构造这样的库的信息，但我不知道如何在没有将它作为应用程序的一部分运行的情况下开发它。

Answer 1

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

Answer 2

如果要创建可重用的模块库，@angular/cli目前不支持该功能。

但是，您可以使用名为ng-packagr的有用库：

https://www.npmjs.com/package/ng-packagr

1. 安装包： npm install ng-packagr --save-dev
2. 创建一个ng-package.json

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

3. 将构建目标添加到package.json：

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

4. 运行构建目标： npm run build

库的输出将位于dist文件夹中。