core: AoT compilation fails without config

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.

About this issue

Original URL
State: open
Created 8 years ago
Comments: 16

Most upvoted comments

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()

Matmo10 on Oct 30, 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]
    }),

zackarychapple on Oct 26, 2016

I created a repository to test this. I never worked with angular-cli so I installed it, created a new project in the first commit and added ng2-translate in the second commit.

https://github.com/SamVerschueren/ng2-translate-aot-test

I ran the following command and all seem to work

$ ng serve --prod

I wasn’t sure if this did AoT compilation and couldn’t find docs for that, so I also ran it with

$ ng serve --prod --aot

I checked the sourcecode and the template was compiled so that worked correctly. So not sure where it goes wrong then.

SamVerschueren on Oct 26, 2016