AOT Angular Module

PRAISER

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

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Angular 4 AOT Compiler

From Dev

angular 5 noty and AOT

From Dev

Angular 5 --aot Vs Angular 5 --aot=false

From Dev

Angular 4 inject console with AOT

From Dev

Angular 2 Aot Error: 'ToastsManager' is not exported

From Dev

Angular interpolation causing AOT compile error

From Dev

Errors when attempting to compile AoT in Angular 4

From Dev

Angular AOT compiled app not tree shaking as expected

From Dev

Angular AOT failing at compilation (something with angular/compiler-cli)

From Dev

MSAL for Angular Preview angular webpack AOT compilation not including resourceMap

From Dev

Do the ngfactory files themselves have to be compiled in Angular 2 AOT compilation?

From Dev

Angular 2 AoT compile causes application issues and works fine in JiT

From Dev

`TypeError: providers.forEach is not a function` with Angular2 in AOT build

From Dev

angular-cli: "SyntaxError: Unexpected token" when compiling for production and AOT

From Dev

Running angular2 AOT and getting implicitly errors

From Dev

Angular2 AOT ngtools/webpack failed on linux

From Dev

Angular2 AOT Compilation with static external js file

From Dev

Angular - Property 'email' does not exist on type '{}' with AoT compilation

From Dev

The Angular AoT build failed when running the release command in Ionic 3

From Dev

Injecting a module into angular as module not found

From Dev

Angular 4 with angular-cli - doesn't find 3rd party provider with AOT

From Dev

Angular - Module not found

From Dev

Module 'angular' is not available

From Dev

Angular module bind priority

From Dev

Jasmine + Angular module constants

From Dev

Angular 2 missing module

From Dev

How to mock a module in angular

From Dev

Angular module not available

From Dev

Angular Module Loading

Related Related

  1. 1

    Angular 4 AOT Compiler

  2. 2

    angular 5 noty and AOT

  3. 3

    Angular 5 --aot Vs Angular 5 --aot=false

  4. 4

    Angular 4 inject console with AOT

  5. 5

    Angular 2 Aot Error: 'ToastsManager' is not exported

  6. 6

    Angular interpolation causing AOT compile error

  7. 7

    Errors when attempting to compile AoT in Angular 4

  8. 8

    Angular AOT compiled app not tree shaking as expected

  9. 9

    Angular AOT failing at compilation (something with angular/compiler-cli)

  10. 10

    MSAL for Angular Preview angular webpack AOT compilation not including resourceMap

  11. 11

    Do the ngfactory files themselves have to be compiled in Angular 2 AOT compilation?

  12. 12

    Angular 2 AoT compile causes application issues and works fine in JiT

  13. 13

    `TypeError: providers.forEach is not a function` with Angular2 in AOT build

  14. 14

    angular-cli: "SyntaxError: Unexpected token" when compiling for production and AOT

  15. 15

    Running angular2 AOT and getting implicitly errors

  16. 16

    Angular2 AOT ngtools/webpack failed on linux

  17. 17

    Angular2 AOT Compilation with static external js file

  18. 18

    Angular - Property 'email' does not exist on type '{}' with AoT compilation

  19. 19

    The Angular AoT build failed when running the release command in Ionic 3

  20. 20

    Injecting a module into angular as module not found

  21. 21

    Angular 4 with angular-cli - doesn't find 3rd party provider with AOT

  22. 22

    Angular - Module not found

  23. 23

    Module 'angular' is not available

  24. 24

    Angular module bind priority

  25. 25

    Jasmine + Angular module constants

  26. 26

    Angular 2 missing module

  27. 27

    How to mock a module in angular

  28. 28

    Angular module not available

  29. 29

    Angular Module Loading

HotTag

Archive