Angular-cli: ngtools/webpack Function expressions are not supported in decorators in 'NgModule'

[crowmagnumb]

Versions

npm 4.2.0
macOS Sierra
@angular/compiler-cli: ^5.2.1

Repro steps

To recreate, clone this repo and then do the following...

cd <repoDir>
git checkout functions
cd module
yarn install
cd ../app
yarn install
yarn run build:prod

Observed behavior

Upon compiling with the last statement I get ...

ERROR in ../module/src/utils/module.ts(5,2): Error during template compile of 'Utils'
  Function expressions are not supported in decorators in 'NgModule'
    'NgModule' contains the error at @angular/core/core.ts(194,31)
      Consider changing the function expression into an exported function.

But doing yarn run build:dev which does not use AoT compilation works fine. You can point your browser to /app/public/index.html to see the results.

Desired behavior

To be able to use AoT compilation with this setup.

Mention any other details that might be useful (optional)

Notice that the tsconfig.json file has a path set to look for code in the modules directory. Not entirely sure if it's due to that or not but I have multiple apps sharing code from a large base that I have not made into modules due to other issues.

[filipesilva]

Hello, errors like Error encountered resolving symbol values statically mean that there has been some problem in statically analyzing your app.

Angular CLI always runs some statical analysis, even on JIT mode, in order to discover lazy-loaded routes.
This may cause a lot of static analysis errors to surface when importing your project into the CLI, or upgrading for older versions where we didn't run this kind of analysis.

Below are good resources on how to to debug these errors:

• https://angular.io/guide/metadata
• https://gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60
• https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts

If your problem still persists, it might be a bug with the Angular Compiler itself.
In that case, please open an issue in https://github.com/angular/angular.

[crowmagnumb]

Did you even look at my repo? Did you assume I did absolutely no homework on this? I don't think the case I have is any of those outlined in any of the links above. Sorry, but I spent a great amount of time reducing my problem to a very simple repo for you to look at and I feel like I was completely dismissed out of hand.

[matheushf]

And I Have the same error here, so...

Error during template compile of 'CountDownModule'
  Function expressions are not supported in decorators in 'NgModule'
    'NgModule' contains the error at @angular/core/core.ts(194,31)
      Consider changing the function expression into an exported function.

[filipesilva]

@crowmagnumb I have to admit I did not look at your repro, no. Static compilation errors are thrown by the Angular itself (@angular/compiler-cli) and Angular CLI has no control over them proper.

I didn't mean to sound dismissive but please understand that this sort of error is one of the most commonly mis-reported here in Angular CLI and that your issue description refers to a somewhat straightforward error message (Function expressions are not supported in decorators) described in the links I posted. From a triage perspective there wasn't much to lead me to believe this wasn't the case.

You seem quite sure that my assessment isn't correct and I thank you for calling it to my attention again. I'll reopen and label for further attention.

[filipesilva]

I debugged a bit right now to see if it was something obvious and didn't get far. I can say it's not related to @ngtools/webpack though, or to webpack configuration in general. You can test this yourself by adding this script to app/package.json:

    "scripts": {
        "ngc": "ngc -p tsconfig.json",

Running (after repro setup) it will yield the same error message:

kamik@T460p MINGW64 /d/sandbox/aot-problem/app (functions)
$ npm run ngc

> [email protected] ngc D:\sandbox\aot-problem\app
> ngc -p tsconfig.json

..\module\src\utils\module.ts(5,2): Error during template compile of 'Utils'
  Function expressions are not supported in decorators in 'NgModule'
    'NgModule' contains the error at @angular\core\core.ts(194,31)
      Consider changing the function expression into an exported function.

If I had to bet, it is related to your setup, yes. Generally speaking setups that have library sources are very hard to configure correctly and are extremely dependant on the custom setup.

I think your best bet to get some help is to report it in https://github.com/angular/angular, with just a ngc reproduction.

Personally I don't know if its a bug in the Angular Compiler or just some missing configuration, but I can say it is not related to Angular CLI or the webpack plugin we use.

[devoto13]

@crowmagnumb The problem 2 seems to be related to the fact that you have multiple instances of Angular (one used by the module and another one used by the app itself. ngc -p tsconfig.json error is gone after removing module/node_modules and moving app/node_modules to node_modules to ensure both components use same instance of Angular packages. But the whole build requires more adjustments to work.

Not sure what you are really doing, but just in case. Have you checked ready to use solutions for Angular mono repos instead of inventing your own wheel: Nrwl extensions, yarn workspaces or lerna-based setup?

[crowmagnumb]

Thank you @filipesilva! I think you and @devoto13 may be right that it has to do with my home-grown sub-module setup which up until the very latest version of Angular, namely 5.2 (been doing it this way since Angular 1.3!), has worked just fine. But now I've run into this this problem as well that looks to also be related to this. My actual module is huge and I had a ton of problems getting it to work with ng-packagr a number of months ago. While I might attempt that again, yarn workspaces also looks like a great possible solution. I'll give those a go. Thank you!

[mariohmol]

Hi.. having this issue in this module... https://github.com/mariohmol/ang-jsoneditor

after updated to typescript 2.7? really lost! any help?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}