I've been trying to export a simple Angular4 module to work in another project for at least a month. Read a lot of articles but it's not working. Here a file containing two folders:
lib -> Containing a simple Angular4 module
demo -> Containing a simple AngularCli project
The lib
is a very simple implementation of an Angular module, and demo
is importing that module inside of its root module.
No matter what I do the demo app gives me different kind of errors saying that the lib
is not an Angular module.
Sometimes talking about not include decorators, and sometimes this error:
ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule
I tried to target es5
and es2015
without any luck.
Steps to reproduce the issue:
download the zip and extract it into a folder
cd lib
folder
run npm install
or yarn install
to install the dependencies
run npm run bundle
or yarn bundle
to bundle the library into
dist
cd demo
folder
run npm install
or yarn install
run npm install ../lib
or yarn add file:../lib
to install the local ng-test-lib
which is inside of lib
folder
run npm start
or yarn start
to start the Demo project
I add the contents of some of files here:
lib/src/a-module.ts
import { NgModule } from '@angular/core';
import { ADirective } from './a-directive';
@NgModule({
declarations: [
ADirective,
],
exports: [
ADirective,
]
})
export class AModule {}
lib/src/a-directive.ts
import {
Input,
OnInit,
Directive,
} from '@angular/core';
@Directive({
selector: '[aDir]',
})
export class ADirective implements OnInit {
@Input() test: string;
ngOnInit() {
console.log(`I'm the directive, and this is test value: ${this.test}`);
}
}
lib/tsconfig.aot.json
{
"compilerOptions": {
"sourceMap": true,
"inlineSources": true,
"declaration": true,
"noImplicitAny": false,
"skipLibCheck": true,
"stripInternal": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"suppressImplicitAnyIndexErrors": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"lib": [
"es2015",
"dom"
],
"outDir": "./dist",
"rootDir": "./src",
"baseUrl": ".",
"types": []
},
"files": [
"./src/a-module.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"annotateForClosureCompiler": true,
"flatModuleOutFile": "index.js",
"flatModuleId": "index",
"genDir": "./dist"
}
}
Anyone knows what's going on here?
So it turns out the issue is symlink-ing the folders meaning if you use npm install ../lib
the issue won't happen! I didn't try it cause I thought it's the same as yarn add file:../lib
but no.
At the end this is an issue related to @angular/compiler
that is not working properly with symlink directories.
That's it.
I hope this helps someone else not to waste their time as much as I did.
Updates Be aware that this issue will happen if you're using npm v5 cause it uses symlink to link local packages.