2016-11-04 54 views
3

我試圖創建類似於角度2的門戶功能,它將提供基本導航和全局服務(如身份驗證),但允許其他開發人員創建自己的模塊,這些模塊從根本上插入門戶。Angular 2 - 將模塊移動到他們自己的項目

我正在使用angular-cli,並且已經通過路由器(使用loadChildren)在app.module中延遲加載,在項目內部創建了模塊(請參閱樹),對模塊進行了快速驗證。每個子模塊都有自己的路由器,並從父門戶(app.module)中根本解耦。

我最終希望將這些子模塊移動到他們自己的項目中,但完全不知道從哪裏開始,並且似乎很少有關於此在線的信息。如果有人知道一個例子,或者可以演示如何設置,我會非常感激。

編輯:我想繼續使用Angular-CLI功能來做到這一點,如果可能的話。

這是我的目錄結構。 Module 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」

然後,我手動將生成的編譯模塊複製到主項目的根目錄中。

爲了延遲加載的功能,我使用loadChildren:「test.module」在路由器配置和添加:

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

我systemjs.config。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'; 

/角/ common_files/catalog1 /包.json:

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

現在你可以用npm run tsc編譯你的commons了。之後,你可以在APP1和App2重用他們:

npm install ../common/ --save 

這將在APP1的package.json創建條目:

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

之後,你可以導入你的模塊從APP1文件和/或APP 2 import {something} from 'common-modules/catalog1';

你也應該看看這個鏈接:https://docs.npmjs.com/private-modules/intro