Can Angular 2 components be externalised?

Question

TL;DR

Is it possible to have something like package.json for components in an Angular 2 app?

Long Version

The components of our application are being developed independently. They have their own services, constants and internationalisation strings. Every time there is an update or change to a component the application version is updated. Is there a way we could just version a component and have separate repositories for each component; each being stated as a dependency of the main app?

My Thoughts

• Create a dummy app on each machine that is used to develop a component
• Work with the component and commit it to a repository
• The main app's build process specifies those repositories as dependency and pulls them (specific version) during build time.
• Another task copies them into the application directory (from node_modules)

Question

Has anyone already done this before? Is there a better way of doing this?

Answer 1

I know how to build something similar locally.

You could have catalog structure like this:

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"
}

Now you can compile your commons with npm run tsc. After that you can reuse them in app1 and app2:

npm install ../common/ --save

That would create entry in your app1 package.json:

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

After that you can import your modules in files from app1 and/or app2 import {something} from 'common-modules/catalog1';

You should also check out this link: https://docs.npmjs.com/private-modules/intro

Answer 2

It's simpler than I thought. Just move the component files out of the app as a separate module. npm install --save it to the app and update the app.module.ts file to point at it. Angular CLI will automatically handle the rest.

app.module.ts

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