question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AoT compilation fails without config

See original GitHub issue

While my app works great with JIT compiling, I have not been able to get AoT to work. The file appModule.ngfactory.js gets created, but then contains errors. The error is in the imports.

In appModule.ngfactory.js I see ng2-translate gets imported, such as

import * as import8 from 'ng2-translate/ng2-translate';

but then later on, it tries to import translate.service with a relative path.

import * as import189 from '../../src/translate.service';

which then gives the error

Error: Error at /workspace/project/app/appModule.ngfactory.ts:196:28: 
Cannot find module '../../src/translate.service'.

it seems to me that in AoT, the import of ‘…/…/src/translate.service’; shouldn’t happen at all because the contents of that file was already imported with ‘ng2-translate/ng2-translate’.

In my typescript code, I import TranslateModule through SharedModule, but in other classes, I inject TranslateService through the constructor so that I can programmatically access its methods. For example,

import {TranslateService} from 'ng2-translate/ng2-translate';
...
    constructor( private translate: TranslateService ) {}
...
    ngOnInit() {
        this.subscription = this._route.params
            .flatMap( (params,i) => {
                this.results = [];
                this.chart = params['chart'];
                return this._restService.getStatsChartData( this.chart );
            } )
            .map( (data) => {
                this.results = data;
            })
            .merge( this.translate.onLangChange )
            .flatMap( (data,i) => {
                return this.translate.get( "STATS."+this.chart.toUpperCase() );
            } )
            .subscribe( (values) => {
                this.translations = values;
            });
    }

Is this an error with the ng-translate package, perhaps the metadata.json ? or is it an error in the way I’m importing and injecting TranslateService into my classes? Again, the app works fine with JIT, but won’t compile with AoT.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:16

github_iconTop GitHub Comments

3reactions
Matmo10commented, Oct 30, 2016

Yes. Just to clarify, I had to use this for AOT to work:

export function createTranslateLoader(http: Http) {
   return new TranslateStaticLoader(http, './i18n', '.json');
}

...

  TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),

While just doing this would NOT work for AOT:

TranslateModule.forRoot()
1reaction
zackarychapplecommented, Oct 26, 2016

So as per @SamVerschueren’s documentation in the repo it is actually a requirement to use the following even if you are using the standard loader apparently. This did get it working for me. Thank you!

    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 5 AOT compilation failed - typescript - Stack Overflow
However, if I now export the application using the following command ng build --prod --aot false the application works without any problem.
Read more >
Ahead-of-time (AOT) compilation - Angular
The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the ...
Read more >
How to enable and run AOT compilation - OpenSilver
How to enable and run AOT compilation. Verify that .NET 6.0 is installed. To do this, open a command prompt and run the...
Read more >
Host and deploy ASP.NET Core Blazor WebAssembly
Without enabling AOT compilation, Blazor WebAssembly apps run on the ... For IIS web.config compression configuration, see the IIS: Brotli ...
Read more >
Angular: Writing AoT-friendly applications | by David - Medium
This causes AoT compilation to fail and has two possible solutions. ... With AoT compilation, the Angular compiler is no longer included in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found