angular cli AOT compile error

Question

I am using the simple starter angular cli example that is on the angular cli site. I created a service OUTSIDE the app folder and included it in the app module in the providers ..etc. Dont ask me why..Just imagine its a service i create that I plan to share between different angular projects. Now ng serve works but ng serve --aot breaks build. Here's the error I receive. Any ideas how to fix it? Thanks

Here is a link to my project structure

https://s3.amazonaws.com/uploads.hipchat.com/20493/94971/eVkgsEDXM8Kfzs1/upload.png

ng serve -- aot error below:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider rep lacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/ANGULAR PROJECTS/testNgCLI/node_modul es/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/ANGULAR PROJECTS/testNgCLI/node_modules/@angular/core/src/di/opaque_t oken.d.ts, resolving symbol OpaqueToken in C:/ANGULAR PROJECTS/testNgCLI/node_modules/@angular/core/src/di/opaque_token.d.ts

CLI version: angular-cli: 1.0.0-beta.24 node: 7.3.0 os: win32 x64

Answer 1

I think the problem is with the code that is inside the service. This happened to me too, and the error was the same:

Calling function 'makeDecorator', function calls are not supported. Consider rep lacing the function or lambda with a reference to an exported function

You are using some anonymous function called makeDecorator. For the code to be ready for AoT, you need to move that to separate function and export it (also it needs to be classic function, not => lamda).

You need to have something like this:

export function makeDecorator() {
    // implementation...
}

Answer 2

All your code should be inside a single app folder to follow Angular 2 StyleGuide. Also, I saw your issue in the AngularCLI. The CLI follows the Style Guide strictly so the issue will probably be closed.

Inside the app folder you could create something like this:

app/
|
+-- shared/
    |
    +-- utils/
        |
        + -- file.service.ts
    +-- shared.module.ts // this will be the module that declares and exports shared files
+-- app1/
    |
    +-- app1.module.ts // declare and export app1 stuff
+-- app2/
    |
    +-- app2.module.ts // declare and export app2 stuff
+-- app.module.ts // import app1, app2, and shared

I would suggest you don't name things app1 or app2 cause it's just bad practice, something more explanatory like admin or user, for example, will be easier to navigate when having to fix a bug.

Hopefully that's clear enough. If not I can try to explain better.