2016-11-04 19 views
3

角度2のポータルのような機能を作成しようとしていますが、これはベースナビゲーションと認証などのグローバルサービスを提供しますが、他の開発者が基本的にポータル。角度2モジュールを自分のプロジェクトに移動

私はangle-cliを使っていて、ルータ(loadChildrenを使用)を介してapp.moduleに遅延ロードされているプロジェクト内でモジュールが作成されているという素早い概念証明を行っています。各子モジュールにはそれぞれ独自のルータがあり、親ポータル(app.module)と基本的に切り離されています。

私は最終的にこれらの子モジュールを自分のプロジェクトに移行したいと考えていますが、どこから始めたらいいのか分からず、このオンラインに関する情報はほとんどないようです。誰かが例を知っているか、これを設定する方法を示すことができるなら、私は非常に感謝します。

編集:可能であれば、Angular-CLI機能を引き続き使用したいと思います。

私のディレクトリ構造は次のとおりです。モジュール1、2 & 3は自分のプロジェクトに移る必要があります。

+-- app 
│   +-- app.component.css 
│   +-- app.component.html 
│   +-- app.component.spec.ts 
│   +-- app.component.ts 
│   +-- app.module.ts 
│   +-- module1 
│   │   +-- dataflows 
│   │   │   +-- dataflows.component.css 
│   │   │   +-- dataflows.component.html 
│   │   │   \-- dataflows.component.ts 
│   │   +-- module1.component.css 
│   │   +-- module1.component.html 
│   │   +-- module1.component.ts 
│   │   +-- module1.module.ts 
│   │   \-- other 
│   │    +-- other.component.css 
│   │    +-- other.component.html 
│   │    \-- other.component.ts 
│   +-- index.ts 
│   +-- module2 
│   │   +-- module2.component.css 
│   │   +-- module2.component.html 
│   │   +-- module2.component.ts 
│   │   \-- module2.module.ts 
│   \-- module3 
│    +-- dummy1 
│    │   +-- dummy1.component.css 
│    │   +-- dummy1.component.html 
│    │   \-- dummy1.component.ts 
│    +-- module3.component.css 
│    +-- module3.component.html 
│    +-- module3.component.ts 
│    +-- module3.module.ts 
│    \-- dummy2 
│     +-- dummy2.component.css 
│     +-- dummy2.component.html 
│     \-- dummy2.component.ts 
+-- index.html 

答えて

-1

私は最終的に、これは代わりにSystemJSを使用して作業を取得する方法を考え出しましたWebpack/Angular CLIについて

私は基本的にモジュールを独自のプロジェクトに移動し、サブプロジェクトのtsconfig.jsonファイルのoutFile:プロパティを使用して "npm run tsc"を使用しました。また、tsconfig.jsonファイルで "module": "system"を設定する必要があります

次に、結果として得られたコンパイル済みモジュールをメインプロジェクトのルートに手動でコピーしました。ルータの設定で「test.module」と追加:

bundles: { 
    'test.module.js': ['test.module'] 
} 

を私systemjs.configに遅延ロードは、私がloadChildrenを使用しています機能するためには

。js

これは、この種の設定を達成しようとしている他の人に役立ちます。

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 
| 
---- app2 
    | 
    ------ package.json 

/角度/ common_files/

{ 
    "name": "common-modules", 
    "version": "0.0.1", 
    "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'; 

/angle/common_files/catalog1/package .json:

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

これで、npm run tscでコモンズをコンパイルできます。あなたはAPP1からのファイルで、あなたのモジュールをインポートすることができた後

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

および/または:

あなたAPP1のpackage.jsonにエントリを作成します
npm install ../common/ --save 

:その後、あなたはAPP1とAPP2でそれらを再利用することができますAPP2 import {something} from 'common-modules/catalog1';

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

関連する問題