Question

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

Answer 1

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

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

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

安装包：
```
npm install ng-packagr --save-dev
```

创建ng-package.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"
   }
}

运行构建目标：
```
npm run build
```

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

Answer 2

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

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

2 个答案: