Angular 2 - sharing a module between different ng2 apps

Question

I am having an issue sharing a module between ng2 apps. Here is a very simple scenario to demonstrate the problem. Using angular-cli all the way:

• There's a SharedModule app, created with ng new SharedModule.
• There's a MyApp app, created with ng new MyApp.
• The module in SharedModule app exports a custom component (that I would like to use in MyApp app).
• The main module in MyApp imports the module from SharedModule app.
• When trying to run MyApp with ng serve, it blows with error:

  Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function...

Omitting the not important stuff, the very basic structure looks like this:

MyApp
|────angular-cli.json
|────package.json
|
└──src
   └─app
     |────app.module.ts
     |────app-root.component.ts
     └─

SharedModule
|────angular-cli.json
|────package.json
|
└─src
  └─app
    |────app-root.component.ts
    |────custom-input.component.ts
    |────shared.module.ts
    └─

The key point here is that MyApp and SharedModule are two different apps. If I try to put the shared module inside MyApp (along with the exported custom component), then it works just fine. Unfortunately, this is not an option at the moment and I have to keep the modules/apps separate. Also creating an npm package from SharedModule and installing it into MyApp is not an option.

I've created a github repository demonstrating the problem. In order to run it:

• run npm install in MyApp and SharedModule folders.
• run npm start in MyApp folder.

The million dollar question here is how can I make this work? Thanks.

Answer 1

I'd say the problem lies in the fact that Angular CLI now uses AoT Compile as default.

That being the case, the SharedModule you are importing needs to be able to be statically analysed, so that it can be built alongside your MyApp.

When you create an app using the CLI, it is not expecting you to use it as a shared library, and as such, does not include the needed *.metadata.json files the AoT compiler needs to analyse it.

I could explain it further, but theres a great article about it on Medium, where I learned about this:

Getting your Angular 2 Library ready for AoT

Hope it helps you too.

EDIT:

There are also a couple Angular 2 Libraries that encountered this problem when the CLI was updated. To name a couple issues that might help you:

Tag-Input

Clarity

Answer 2

You can now share your modules between apps in angular. Just follow this guide on using multiple apps to an angular project, in the guide he puts two apps in angular-cli.json and can publish & serve them seperatly with the --app flag:

 ng serve --app 0
 ng build --app 1 

or like this:

 ng serve --app app1
 ng build --app app2

I have tested this myself but struggled for a while, therefore made a question here myself: Share a module between multiple angular apps that resides in the same project.