Угловые 2 - движущиеся модули к собственному проекту

Question

Я пытаюсь создать портал как функциональность с угловым 2, который обеспечит базовую навигацию и глобальные сервисы, такие как аутентификация, но позволит другим разработчикам создавать свои собственные модули, которые принципиально подключаются к порталу ,

Я использую angular-cli и сделал быстрое доказательство концепции с модулями, создаваемыми внутри проекта (см. Ниже), которые лениво загружаются в app.module через маршрутизатор (с loadChildren). Каждый дочерний модуль имеет свой собственный маршрутизатор и принципиально отделен от родительского портала (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 

Answer 1

Я, наконец, понял, как получить эту работу, используя SystemJS вместо Webpack/Угловая CLI.

Я в основном переместил модули в свой проект и использовал «npm run tsc», используя свойство outFile: в файле tsconfig.json в подпроекте. Вы также должны установить «module»: «system» в файле tsconfig.json

Затем я вручную скопировал полученный скомпилированный модуль в корень основного проекта.

Для того, чтобы отложенная загрузка функционировать Я использую loadChildren: «» test.module в конфигурации маршрутизатора и добавление:

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

моего systemjs.config.js

Надеюсь, это поможет кому-то еще, кто пытается достичь такого рода настроек.

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 
| 
---- 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. После этого вы можете использовать их в 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