角度2のコンポーネントは外部化できますか？

Question

TL; DR

それは角度2アプリで部品ためpackage.jsonのようなものを持っていることは可能ですか？

ロングバージョン我々のアプリケーションの

コンポーネントが独立して開発されています。彼らは独自のサービス、定数、国際化文字列を持っています。コンポーネントが更新または変更されるたびに、アプリケーションのバージョンが更新されます。コンポーネントをバージョンアップし、各コンポーネントごとに別々のリポジトリを用意する方法はありますか？それぞれがメインアプリの依存関係として記述されていますか？

私の考え

• は
• メインアプリのビルドプロセスの指定をコンポーネントとコンポーネントに
• 仕事を開発し、それをリポジトリにコミットするために使用されている各マシン上にダミーのアプリを作成します。それらのリポジトリを依存関係として取得し、ビルド時にそれらをリルートします（特定のバージョン）。 （node_modulesからの）アプリケーションディレクトリへ
• 別のタスクをコピーし、それらを

は、誰もがすでにこの前に質問

をやっていますか？これを行うより良い方法はありますか？

Answer 1

それは私が思ったよりも簡単です。コンポーネントファイルを別のモジュールとしてアプリケーションから移動するだけです。 npm install --saveをアプリに追加し、app.module.tsファイルをポイントして更新します。 Angular CLIは自動的に残りの部分を処理します。

app.module.ts

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

Answer 2

私はローカルに同様のものを構築する方法を知っています。

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 

/角度/ 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'; 

/角度/ common_files/catalog1/package.json：

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

commonをnpm run tscでコンパイルできるようになりました。その後、あなたはapp1とapp2でそれらを再利用することができます：あなたのAPP1パッケージのエントリを作成します

npm install ../common/ --save 

を。JSON：

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

あなたは「共通モジュール/ catalog1」からapp1および/またはapp2 インポート{何か}からのファイルで、あなたのモジュールをインポートすることができた後。

また、このリンクをチェックアウトする必要があります：https://docs.npmjs.com/private-modules/intro