Angular Cli + xi18n internationalization

[rasilvap]

Please provide us with the following information:

OS
->Windows 7

Versions.

angular-cli: 1.0.0-beta.24
node: 4.4.5
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/compiler-cli: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/platform-server: 2.4.1
@angular/router: 3.4.1

npm version : 4.0.5.

Steps.

I have created an application with Angular CLI (ng new xxxxxx)
Also I want to add internationalization to my application and I following the angular.io documentation:
https://angular.io/docs/ts/latest/cookbook/i18n.html and this short tutorial:
https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

My problem is when I tried to execute the command: node_modules.bin\ng-xi18n, in order to generate the language files. I am getting the next issue:

C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots>node_modules.bin\ng-xi18n
Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a
reference to an exported function, resolving symbol AnimationDriver.NOOP in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/src/dom/animatio
n_driver.d.ts, resolving symbol BrowserTestingModule in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbo
l BrowserTestingModule in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/testing/browser.d.ts
at simplifyInContext (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25713:25)
at StaticReflector.simplify (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25725:15)
at StaticReflector.annotations (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25223:62)
at NgModuleResolver.resolve (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:17583:84)
at CompileMetadataResolver.getNgModuleMetadata (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18091:62)
at CompileMetadataResolver.getNgModuleSummary (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18047:54)
at C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18137:70
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18132:51)
at addNgModule (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:24985:60)
Extraction failed.

I understand that right now, Ican’t use the CLI in translated applications. It’s because the CLI compiles the templates while doing the build. According to the tutorial I mentioned before.

I was able to make work the internationalization with the ng2-translate libarary.

There is some way in oder to fix this issue?

Thanks.

[actimeo]

You'll have to adapt your tsconfig.json file to exclude test.ts from the compilation. More info: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.u7flu0anf

[rasilvap]

I actimeo, thanks a lot for your help, after of the executionof the npm run extract-i18n coomand, in the tutorial: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.u7flu0anfI got the next issue: .

C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots>npm run extract-i18n

drtslots@0.0.0 extract-i18n C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots
cd src && ng-xi18n

Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a
reference to an exported function, resolving symbol AnimationDriver.NOOP in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/src/dom/animatio
n_driver.d.ts, resolving symbol BrowserTestingModule in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbo
l BrowserTestingModule in C:/angular/drtslotnoCLi/crewtraininguipoc/DRTSlots/node_modules/@angular/platform-browser/testing/browser.d.ts
at simplifyInContext (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25713:25)
at StaticReflector.simplify (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25725:15)
at StaticReflector.annotations (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:25223:62)
at NgModuleResolver.resolve (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:17583:84)
at CompileMetadataResolver.getNgModuleMetadata (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18091:62)
at CompileMetadataResolver.getNgModuleSummary (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18047:54)
at C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18137:70
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:18132:51)
at addNgModule (C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots\node_modules@angular\compiler\bundles\compiler.umd.js:24985:60)
Extraction failed.

I think it is the same issue I got before. Do you know what is happening?

Thanks

[actimeo]

Have you modified your tsconfig.json file to exclude test.ts ? Le 5 janvier 2017 20:35:13 GMT+01:00, rasilvap <notifications@github.com> a écrit :

…

I actimeo, thanks a lot for your help, after to execute the npm run extract-i18n coomand, in the tutorial: ***@***.***/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.u7flu0anfI got the next issue: . C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots>npm run extract-i18n > ***@***.*** extract-i18n C:\angular\drtslotnoCLi\crewtraininguipoc\DRTSlots > cd src && ng-xi18n Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in ***@***.***/platform-browser/src/dom/animatio n_driver.d.ts, resolving symbol BrowserTestingModule in ***@***.***/platform-browser/testing/browser.d.ts, resolving symbo l BrowserTestingModule in ***@***.***/platform-browser/testing/browser.d.ts at simplifyInContext ***@***.***\compiler\bundles\compiler.umd.js:25713:25) at StaticReflector.simplify ***@***.***\compiler\bundles\compiler.umd.js:25725:15) at StaticReflector.annotations ***@***.***\compiler\bundles\compiler.umd.js:25223:62) at NgModuleResolver.resolve ***@***.***\compiler\bundles\compiler.umd.js:17583:84) at CompileMetadataResolver.getNgModuleMetadata ***@***.***\compiler\bundles\compiler.umd.js:18091:62) at CompileMetadataResolver.getNgModuleSummary ***@***.***\compiler\bundles\compiler.umd.js:18047:54) at ***@***.***\compiler\bundles\compiler.umd.js:18137:70 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata ***@***.***\compiler\bundles\compiler.umd.js:18132:51) at addNgModule ***@***.***\compiler\bundles\compiler.umd.js:24985:60) Extraction failed. I think it is the same issue I got before. Do you know what is happening? Thanks -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: #3868 (comment)

-- Envoyé de mon téléphone Android avec K-9 Mail. Excusez la brièveté.

[rasilvap]

Yeah, my tsconfig.json look like:

{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
},
"exclude": [ "test.ts" ],
"angularCompilerOptions": { "genDir": "i18n" }
}

My package.json looks like:

{
"name": "drtslots",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor",
"extract-i18n": "cd src && ng-xi18n"
},

Do you think, maybe I am skipping something?

Thanks a lot for your help.
Thanks a lot for your help.

[feloy]

@rasilvap More info on this Issue:
angular/angular#13624

[badre429]

thank you @rasilvap
after adding thouses lines to my tsconfig.json
,
"exclude": [ "test.ts" ],
"angularCompilerOptions": { "genDir": "i18n" }
}

it works

thanks

[crain]

@rasilvap is it working for you? I tried the above described steps but its still not working for me...

[filipesilva]

There's an ongoing discussion with some tips in #2201.

[rasilvap]

Temporarily I had to make the internationalization with Angular ng2-translate. I still having the same isssue with an Angular-CLI Project.

[feloy]

@rasilvap Hi, is there some source available so I can try to help you on this problem?

[leolivier]

Hi,
I'm facing the same problem (angular 4, angular-cli 1.0, all latest) with ng-xi18n. I changed my tsconfig.json as follows:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [ "test.ts" ],
  "angularCompilerOptions": { "genDir": "i18n" }
}

But when I run
ng xi18n
I get:

 10% building modules 4/4 modules 0 active                                         
An error occured during the i18n extraction:
Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /home/olivier/apps/angular/knot-note/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/olivier/apps/angular/knot-note/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/olivier/apps/angular/knot-note/node_modules/@angular/core/core.d.ts
    at syntaxError (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
    at simplifyInContext (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:23329:23)
    at StaticReflector.simplify (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:23341:13)
    at StaticReflector.annotations (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22807:60)
    at NgModuleResolver.resolve (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:13364:70)
    at CompileMetadataResolver.getNgModuleMetadata (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:13949:60)
    at addNgModule (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22539:58)
    at /home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22550:14
    at Array.forEach (native)
    at _createNgModules (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22549:26)
    at analyzeNgModules (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22424:14)
    at analyzeAndValidateNgModules (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:22434:35)
    at Extractor.extract (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler/bundles/compiler.umd.js:25561:18)
    at Extractor.extractBundle (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler-cli/src/extractor.js:41:33)
    at Extractor.extract (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler-cli/src/extractor.js:30:34)
    at Function.NgTools_InternalApi_NG_2.extractI18n (/home/olivier/apps/angular/knot-note/node_modules/@angular/compiler-cli/src/ngtools_api.js:94:26)

Versions:
angular-cli: 1.0.0
node: 7.8.0
os: Linux Mint 18 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/compiler-cli: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/platform-server: 4.0.1
@angular/router: 4.0.1
@angular/tsc-wrapped: 4.0.1

npm version : 4.2.0.

[leolivier]

Solved by reinstalling totally angular-cli