Reputation: 1265
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-cli
applications 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:
core/
on its own, rather than
@company/core
@company/core
with AOT -- this required
setting up a lot of configuration to generate relevant .js
files
and metadataAdditionally, 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:
ng build --env=prod
.tgz
file for the app: npm pack
.tgz
file directly from the consumer within the package.json
: "@company/core": "file:../company-core-0.0.0.tgz"
ng serve
buildsNote:
tsconfig-build.json
file, or a .npmignore
filemoduleId: module.id
within component decoratorsnpm link
will not work. Use npm pack
insteadUpvotes: 1
Views: 650
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
Reputation: 19270
To either link or use npm you need to create a build of the shared project. This might help you.
Upvotes: 0