Issues with AOT Compiler in Angular CLI

[kuuurt13]

When using AOT compiler in Angular CLI it throws the following exception:

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, resolving symbol NgModule in /home/kuuurt/Workspace/blockUI/node_modules/ng-block-ui/
node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /home/kuuurt/Workspace/blockUI/node_modules/ng-block-ui/node_modu
les/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /home/kuuurt/Workspace/blockUI/node_modules/ng-block-ui/node_modules/@angular/core/s
rc/core.d.ts, resolving symbol NgModule in /home/kuuurt/Workspace/blockUI/node_modules/ng-block-ui/node_modules/@angular/core/index.d.ts, resolving sy
mbol BlockUIModule in /home/kuuurt/Workspace/blockUI/node_modules/ng-block-ui/lib/block-ui.module.ts, resolving symbol BlockUIModule in /home/kuuurt/W
orkspace/blockUI/node_modules/ng-block-ui/lib/block-ui.module.ts

[shuryyy]

Same here :(

[kuuurt13]

@shuryyy I have found an article on getting libraries ready for AOT. I hope to have a fix for this soon. https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.7xjmfhv64

[kuuurt13]

524d976 (v0.2.0) adds AOT support. Changes have been tested with Angular CLI AOT compilation.

[shuryyy]

Hi @kuuurt13 I tested it with angular-cli 1.0.0-rc.0 And I still have an 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, resolving symbol NgModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/node_modules/@angular/core/src/metadata/ng_module.d.ts

I also have a warning

WARNING in ./src/app/app.component.ts
32:50-59 "export 'NgBlockUI' was not found in 'ng-block-ui'

Strang because I can see the export in your index.ts ...

[shuryyy]

Here is the complete 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, resolving symbol NgModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/node_modules/@angular/core/index.d.ts, resolving symbol BlockUIModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/dist/lib/block-ui.module.d.ts, resolving symbol BlockUIModule in D:/codecommit/eptwiterstats/ep-twitter-chat/node_modules/ng-block-ui/dist/lib/block-ui.module.d.ts

[kuuurt13]

@shuryyy I just tested again by creating a fresh app with angular-cli and it was compiling for me. Can you run npm list @angular/cli @angular/compiler-cli and let me know what versions you are on? I'm currently on these versions @angular/[email protected] @angular/[email protected] and that seems to work fine.

As for the export 'NgBlockUI' was not found in 'ng-block-ui' warning I think this might be unique to angular-cli, see angular/angular-cli#2034. I tested with an app that is using a webpack build process without angular-cli and it builds with no errors. I will try to do some research and see if there is a fix I can implement for now.

[kuuurt13]

@shuryyy sorry I over looked that you said you are on 1.0.0-rc.0. I will upgrade and see if I run into any issues.

[kuuurt13]

@shuryyy I just updated angluar-cli to 1.0.0-rc.0 and ran ng serve --aot (I think it does aot by default but added the flag to be sure). Everything compiled for me and the app came up fine. Below is my setup:

app.module.ts

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

import { BlockUIModule } from 'ng-block-ui';
import { AppComponent } from './app.component';


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

app.component.ts

import { Component } from '@angular/core';
import { BlockUI, NgBlockUI } from 'ng-block-ui';


@Component({
  selector: 'app-root',
  template: `
    <block-ui>
      <h1>{{ title }}</h1>
    </block-ui>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  @BlockUI() blockUI: NgBlockUI;

  constructor() {
    this.blockUI.start();
  }
}

This was with creating a brand new app with ng new. If your app was on an older version of the cli and you updated, maybe there was an issue with the upgrade process. You might have already gone through this but I found this wiki from angular-cli team about upgrading https://github.com/angular/angular-cli/wiki/stories-rc.0-update. If you are still having issues you could try creating a new throwaway app with the cli, add my changes above and then see if it compiles. Let me know how everything works out.

[shuryyy]

Re @kuuurt13,

So I just did the same but with the option ng new project --ng4. And this is the issue I think...
I'm using the RC of angular 4 for the rest I have the same code as you.
Here is the package.json generated by a-cli.

{

"name": "project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": ">=4.0.0-beta <5.0.0",
"@angular/compiler": ">=4.0.0-beta <5.0.0",
"@angular/core": ">=4.0.0-beta <5.0.0",
"@angular/forms": ">=4.0.0-beta <5.0.0",
"@angular/http": ">=4.0.0-beta <5.0.0",
"@angular/platform-browser": ">=4.0.0-beta <5.0.0",
"@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0",
"@angular/router": ">=4.0.0-beta <5.0.0",
"core-js": "^2.4.1",
"ng-block-ui": "^0.3.0",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.0",
"@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.1.0"
}
}

[kuuurt13]

@shuryyy, I currently wasn't supporting 4.x but I just added support, see #6 for details. Can you try testing your 4.x app after running npm install ng-block-ui@next? This should get the beta version I published on npm that has support for 4.x. I tested it with a new angular-cli app using the --ng4 flag and it seems to be working fine.

Since this issue was originally for AOT compiling targeting the current released of angular (2.x) I am going to close this. If you can just reply back to #6 with you findings that would be great. I also created a new issue for the warning you are currently seeing for NgBlockUI, see #7.