Angular 2组件能够被外部化吗？

Question

TL;DR

在Angular 2应用程序中，是否有类似于package.json的内容来管理组件？需要对每个独立的组件进行版本控制，使其成为主应用程序的依赖项。

Long Version

我们的应用程序组件是独立开发的。它们有自己的服务、常量和国际化字符串。每次更新或更改组件时，应用程序版本都会更新。我们是否可以仅对组件进行版本控制，并为每个组件维护单独的存储库，让它们成为主应用程序的依赖项？

My Thoughts

• 在每台机器上创建一个虚拟应用程序，用于开发组件
• 与组件一起工作并将其提交到代码库
• 主应用程序的构建过程指定这些代码库作为依赖项，并在构建期间拉取它们（特定版本）
• 另一个任务会将它们从node_modules目录复制到应用程序目录中

Question

是否有人已经尝试过这样做？是否有更好的方法？

- Karma

Answer 1

我知道如何在本地构建类似的东西。

你可以拥有这样的目录结构：

angular
|
---- common_files
      |
      ----- package.json
      |
      ----- index.ts
      |
      ----- catalog1
            |
            ---- package.json
            |
            ---- some_file_with_service_model_comopnent.ts
            |
            ---- index.ts    - this is regular barrel file
      |
      ----- catalog2
|
---- app1
     |
     ------ package.json
|
---- apps
     |
     ------ package.json

/angular/common_files/

{
  "name": "common-modules",
  "version": "0.9.6",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsc -w",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "pack": "webpack"
  },
  "typings": "./index.d.ts",
  "author": "Maciej Sobala",
  "license": "UNLICENSED",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "2.0.0-alpha.9-3",
    "@angular/router": "3.0.0",
    "ng2-cookies": "^1.0.2",
    "rxjs": "5.0.0-beta.12",
    "typescript": "2.0.0",
    "typescript-collections": "^1.2.3",
    "zone.js": "^0.6.12"
  },
  "private": "true",
  "devDependencies": {
    "@types/body-parser": "0.0.29",
    "@types/compression": "0.0.29",
    "@types/cookie-parser": "^1.3.29",
    "@types/express": "^4.0.32",
    "@types/express-serve-static-core": "^4.0.33",
    "@types/hammerjs": "^2.0.32",
    "@types/mime": "0.0.28",
    "@types/node": "^6.0.38",
    "@types/core-js": "^0.9.34",
    "webpack": "^1.13.2",
    "webpack-merge": "^0.14.0",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "~1.1.1"
  }
}

/angular/common_files/index.ts:

export * from './catalog1/index';
export * from './catalog2/index';

/angular/common_files/catalog1/package.json:

{
  "name": "common-modules/catalog1",
  "main": "index.js"
}

现在你可以使用 npm run tsc 来编译你的 common 模块。之后，你可以在 app1 和 app2 中重复使用它们：

npm install ../common/ --save

这将在你的app1 package.json中创建一个条目：

"dependencies": {
    "common-modules": "file:///Users/my_name/Documents/work/my_project/angular/common_files",
  }

接下来，您可以在来自app1和/或app2的文件中导入模块：

import {something} from 'common-modules/catalog1';

您还应该查看此链接：https://docs.npmjs.com/private-modules/intro

- Maciej Treder

---

似乎它可以直接在CLI上工作。你提供的查看私有模块的提示非常有帮助。 - Karma

很高兴听到这个消息。 - Maciej Treder

Answer 2

比我想象的要简单。只需将组件文件移出应用程序作为单独的模块。npm install --save 它到应用程序并更新 app.module.ts 文件指向它。Angular CLI 将自动处理其余部分。

app.module.ts

import { ProfileCardComponent } from '@yoloinc/profile-card-component/profile-card.component';

从'@yoloinc/profile-card-component/profile-card.component'导入{ProfileCardComponent}

- Karma