angularjs - Angular 2 - moving modules to their own project

Question

I am attempting to create portal like functionality with angular 2 which will provide base navigation and global services such as authentication, but allow other developers to create their own modules which fundamentally plug into the portal.

I am using angular-cli and have made a quick proof of concept with the modules being created inside the project (see tree below) which are lazy loaded in app.module via the router (with loadChildren). Each child module has its own router and is fundamentally decoupled from the parent portal (app.module).

I ultimately want to move these child modules into their own projects, but have absolutely no clue about where to start and there seems to be very little information relating to this online. If anyone knows of an example or can demonstrate how to set this up I′d be very grateful.

Edit: I would like to continue to use the Angular-CLI functionality to do this if it is possible.

Here is my directory structure. Module 1, 2 & 3 need to move into their own projects.

+-- 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

You could have following catalog structure:

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

/angular/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';

/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