0

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:

  1. download the zip and extract it into a folder

  2. cd lib folder

  3. run npm install or yarn install to install the dependencies

  4. run npm run bundle or yarn bundle to bundle the library into dist

  5. cd demo folder

  6. run npm install or yarn install

  7. run npm install ../lib or yarn add file:../lib to install the local ng-test-lib which is inside of lib folder

  8. run npm start or yarn start to start the Demo project

Update:

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?

PRAISER
  • 793
  • 7
  • 15

1 Answers1

1

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.

PRAISER
  • 793
  • 7
  • 15