CODEWITHSUNDEEP
angularjsangularangular2-routing
Heidi_DE
Heidi_DE

Reputation: 177

Angular 2 - moving modules to their own project

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

Upvotes: 7

Views: 2960

Answers (2)

Heidi_DE
Heidi_DE

Reputation: 177

I have finally figured out how to get this working using SystemJS instead of Webpack/Angular CLI.

I basically moved the modules into their own project and used "npm run tsc" using the outFile: property in the tsconfig.json file in the sub-project. You also have to set "module": "system" in the tsconfig.json file

I then manually copied the resulting compiled module in the root of the main project.

In order for the lazy loading to function I am using loadChildren: 'test.module' in the router configuration and adding: 

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

to my systemjs.config.js

Hope this helps someone else who is trying to achieve this kind of setup.

Upvotes: 0

Maciej Treder
Maciej Treder

Reputation: 12342

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

Upvotes: 2

Related Questions