Angular 2 RC 6 AoT Compiler not working

Question

I just updated my project to Angular 2 RC 6. I am now trying to use Ahead of Time (AoT) Compilation as mentioned in blog post http://angularjs.blogspot.com/ but no success.

I am not using angular cli as I building project in ASP.Net.

As the blog post suggests, I have installed @angular/compiler-cli

But when I try to run ngc from command prompt it gives error

'ngc' is not recognized as an internal or external command,
operable program or batch file.


npm run ngc
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ngc"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.3

npm ERR! missing script: ngc
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Project\App\npm-debug.log

Can anyone please guide how to use AoT compiler with ASP.Net Project. Or when you are not using Angular CLI but building components etc manually.

Edit

I now managed to run ngc by first moving to ./node_modules/.bin/ and then running

ngc -p D:\Project\App

But now the compiler is throwing the below error:

When I try to compile my project with ngc, it throws the below error:

Error: 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 92:25 in the original .ts file), resolving symbol AppModule in

In my App Module I have the below providers and probably this is causing the project. I am not sure what exactly is wrong with this?

providers: [
        GlobalService,
        {
            provide: Http,
            useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
            deps: [XHRBackend, RequestOptions, GlobalService]
        }
    ],

Vesicatory

Possible duplicate of ng is not recognized as an internal or external command – Suppose

If you look at the answer, it's a windows issue somehow your PATH might have gotten screwed up, or you need to restart, or even open CMD as an Admin. It could be many things unfortunately. Give those a shot! – Suppose

Thank you Mark for your reply, Can you please have a look at the Edit I made to the question? – Vesicatory

Answer 1

        GlobalService,
        {
            provider: Http, // <-- I believe you were missing the "r" in provide"r"
        }

Take a look at the rc6 breaking changes:

https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes

Suppose

Answer 2

I was running into this issue using

"@angular/compiler-cli": "^4.0.1"

For me deleting /node_modules/@angular folder and running

npm install

Seemed to resolve my issue. My copy of the package must have gotten mucked up

Angelesangelfish

Answer 3

Problem 1

When running scripts from package.json or "npm scripts", to fix the path issue on Windows 10, you need to wrap the directory_path in double quotes, and escape each double quote with a backslash:

"compile:aot": \"./node_modules/.bin/ngc\" -p src

This would execute the ngc program located in ./node_modules/.bin with -p src arguments.

Otherwise, you have to cd ./node_modules/.bin && ngc -p src as 2 different commands.

Problem 2

Currently it seems that AOT compilation for angular 2 has a problem with require() statements. So if you want to eliminate the compilation errors, you have to remove all require() statements from your app.

Obviously, this is a bad idea since there is value to require(), especially when working with Webpack or other module bundlers. We have to wait for a solution from the angular2 team.

Anne

Hi @TetraDev, re. problem 2, do you any more source of info for this AOT Vs require() problem? I could not find any, but I'm hitting that when I try to require a "global" CSS file and doing AOT build in production. Thanks – Betjeman

@Superjos Yes, instead of require('my.css'); just do import 'my.css'; and AOT will compile fine. – Anne

Thanks for reply. I forgot about my question. At some point we adopted the same workaround as you. Later, upgrading dependencies to the latest currently available, I found out that require() works again. Try with @angular 2.1.0 dependencies, and if not enough also with webpack 2.1.0-beta.25 – Betjeman

FYI there is a PR on the way which accepts require. github.com/angular/angular/pull/12405 – Arching

Answer 4

Probably it is that you have function calls in your @NgModule definitions. I have to remove some dynamic providers to make it work for me.

Maybe you should try to replace your 'useFactory: (...)=>{...}' or at least test commenting it.

Retsina

I guess functions in module definitions are in runtime so AOT will definitely fail. – Retsina