treeblah
treeblah

Reputation: 1265

Exportable Angular "ng-cli" Modules

I have an architecture that consists of multiple Angular applications created with ng-cli:

FrontendLibs
  @company/
    core/
      src/
      package.json
      index.ts
  main-app/
    src/
    package.json

In this example my two ng-cliapplications are Core and Home.

I want to export a module from Core, say SharedLibraryModule, so that Home can use it. I'm doing so in the form of a local NPM package:

// package.json in main-app
{
    "@company/core": "file:./@company/core/"
}

The @company/core module contains an index.ts file that exports the module in question:

// index.ts in @company/core
export { SharedLibraryModule } from './src/app/shared-library/shared-library.module';

However, when I reference the SharedLibraryModule within my main-app and run an ng-serve, I get the following error:

ERROR in 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

Here's the app.module.ts for main-app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { SharedLibraryModule } from '@company/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SharedLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How can I export a module via a local npm package (Or NPM Link) so I can use it in other Angular applications (created through ng-cli)?

Things I've tried:

Additionally, the above does work after I make an insignificant change and save somewhere in the source to re-compile. It's only on the initial compilation that this fails. However, it will fail identically every time that the ng serve command is called.


EDIT

Here are the steps that I needed in order to get this to work:

  1. Build the app for production: ng build --env=prod
  2. Generate a .tgz file for the app: npm pack
  3. Reference .tgz file directly from the consumer within the package.json: "@company/core": "file:../company-core-0.0.0.tgz"
  4. Observe successful ng serve builds

Note:

Upvotes: 1

Views: 650

Answers (2)

Mike Lunn
Mike Lunn

Reputation: 2470

Take a look at this github repo. I used this as a template to build a reusable local Angular npm library that I shared between my mobile ionic app and my web app. I think the key thing here is that there is an issue currently with npm link, use npm pack instead if you can't publish it to npm, and then reference the module like below in yor package.json file. Also remember to run the ngc script before npm pack.

 "my-core-module": "file:../core/my-core-module-1.0.0.tgz",

I hope this helps you.

Upvotes: 3

Robin Dijkhof
Robin Dijkhof

Reputation: 19270

To either link or use npm you need to create a build of the shared project. This might help you.

Upvotes: 0

Related Questions