Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 RC 6 AoT Compiler not working

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]
        }
    ],
like image 295
Naveed Ahmed Avatar asked Sep 02 '16 01:09

Naveed Ahmed


People also ask

What is AOT compiler how do you enable it?

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

Is AOT better than JIT?

Loading in JIT is slower than the AOT because it needs to compile your application at runtime. Loading in AOT is much quicker than the JIT because it already has compiled your code at build time. JIT is more suitable for development mode. AOT is much suitable in the case of Production mode.

Can I use AOT compilation with ivy?

AOT compilation with Ivy is faster and should be used by default. In the angular. json workspace configuration file, set the default build options for your project to always use AOT compilation. When using application internationalization (i18n) with Ivy, translation merging also requires the use of AOT compilation.

What are the ways to control AOT compilation?

When you use the Angular AOT compiler, you can control your app compilation in two ways: By providing template compiler options in the tsconfig. json file. By specifying Angular metadata.


1 Answers

        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

like image 56
Mark Pieszak - Trilon.io Avatar answered Sep 30 '22 18:09

Mark Pieszak - Trilon.io