Repository navigation
ivy: i18n messages identifiers have dots in their name #28080
Description
🐞 bug report
Description
ngtsc fails to compile an application using ng-bootstrap because i18n messages have weird identifiers generated by ngcc.
For example, in ./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js after running ngcc:
const MSG_EXTERNAL_ngb.alert.close$$FESM5_NG_BOOTSTRAP_JS__15 = goog.getMsg("Close");
Note the dots in the name of the constant.
That produces after ng build --aot in an Ivy app:
ERROR in ./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js 71:22
Module parse failed: Unexpected token (71:22)
You may need an appropriate loader to handle this file type.
| const _c13 = ["alert-dismissible"];
| const _c14 = ["type", "button", 1, "close", 3, "click"];
> const MSG_EXTERNAL_ngb.alert.close$$FESM5_NG_BOOTSTRAP_JS__15 = goog.getMsg("Close");
| const _c16 = ["aria-label", MSG_EXTERNAL_ngb.alert.close$$FESM5_NG_BOOTSTRAP_JS__15];
| const _c17 = ["aria-hidden", "true"];
Is this a regression?
No it has been present for a while
🔬 Minimal Reproduction
ng new ivy-boostrap --defaults
npm i --save @ng-bootstrap/ng-bootstrap
$(npm bin)/ivy-ngcc
# if ngcc fails apply https://github.com/angular/angular/pull/28076 manually and rerun
# add NgDropdownModule to AppModule (see above)
# enable ivy to use ngtsc
ng build --aot
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbDropdownModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }🔥 Exception or Error
ng build --aot yields:
ERROR in ./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js 71:22
Module parse failed: Unexpected token (71:22)
You may need an appropriate loader to handle this file type.
| const _c13 = ["alert-dismissible"];
| const _c14 = ["type", "button", 1, "close", 3, "click"];
> const MSG_EXTERNAL_ngb.alert.close$$FESM5_NG_BOOTSTRAP_JS__15 = goog.getMsg("Close");
| const _c16 = ["aria-label", MSG_EXTERNAL_ngb.alert.close$$FESM5_NG_BOOTSTRAP_JS__15];
| const _c17 = ["aria-hidden", "true"];
🌍 Your Environment
Angular Version:
Angular CLI: 7.2.0
Node: 10.14.1
OS: darwin x64
Angular: 7.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.0
@angular-devkit/build-angular 0.12.0
@angular-devkit/build-optimizer 0.12.0
@angular-devkit/build-webpack 0.12.0
@angular-devkit/core 7.2.0
@angular-devkit/schematics 7.2.0
@ngtools/webpack 7.2.0
@schematics/angular 7.2.0
@schematics/update 0.12.0
rxjs 6.3.3
typescript 3.2.2
webpack 4.23.1
Activity
cexbrayat commentedon Feb 6, 2019
@AndrewKushnir I just tried #28522 and this fixes this issue as expected 👍
AndrewKushnir commentedon Feb 6, 2019
Thanks for checking @cexbrayat and glad to hear the problem is resolved!
cexbrayat commentedon Feb 7, 2019
@AndrewKushnir FYI, the runtime now fails because
googis not defined.AndrewKushnir commentedon Feb 7, 2019
@cexbrayat we are working on a polyfill that should resolve this problem. Will keep you updated. Thank you.
Jclove93 commentedon Feb 8, 2019
Julio chavez
AndrewKushnir commentedon Feb 13, 2019
@cexbrayat, @ocombe just submitted PR to solve the
googis not defined error message (for non-Closure environments) - please refer to PR #28689 to get additional information and the status. Thank you.angular-automatic-lock-bot commentedon Sep 14, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.