loadTranslations from @angular/localize dependes on Node.js

[janousek]

🐞 bug report

Affected Package

The issue is caused by package @angular/localize

Is this a regression?

Yes, the previous version in which this bug was not present was: 10.0.x

Description

I was using "loadTranslations" to dynamically load translations at runtime. Example:

import { loadTranslations } from '@angular/localize';
loadTranslations(window['LOCALIZATION_MESSAGES']);

This worked until Angular 10.1.0. Now build breaks with this error message:

ERROR in node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/types.d.ts:37:43 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
readFileBuffer(path: AbsoluteFsPath): Buffer;
.................
.................

The problem is that "loadTranslations" use "MessageId" and "TargetMessage" (

angular/packages/localize/src/utils/src/messages.ts

Line 40 in fdea180

export type MessageId = string;

, that are declared in messages.ts that use:

import { AbsoluteFsPath } from '@angular/compiler-cli/src/ngtsc/file_system';

angular/packages/localize/src/utils/src/messages.ts

Line 9 in fdea180

import {AbsoluteFsPath} from '@angular/compiler-cli/src/ngtsc/file_system';

So it depends on Node.js (therefore, it cannot be used in a browser).

The problem is just with typings. There is simple solution. Divide messages.ts into 2 files (one that contains types that are dependent on Node and the second that is independent).

A clear and concise description of the problem...

🔥 Exception or Error

ERROR in node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/types.d.ts:37:43 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

37     readFileBuffer(path: AbsoluteFsPath): Buffer;
                                             ~~~~~~
node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/types.d.ts:38:52 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

38     writeFile(path: AbsoluteFsPath, data: string | Buffer, exclusive?: boolean): void;
                                                      ~~~~~~
node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/node_js_file_system.d.ts:10:43 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

10     readFileBuffer(path: AbsoluteFsPath): Buffer;
                                             ~~~~~~
node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/node_js_file_system.d.ts:11:52 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

11     writeFile(path: AbsoluteFsPath, data: string | Buffer, exclusive?: boolean): void;
                                                      ~~~~~~

🌍 Your Environment

**Angular Version: **

Angular CLI: 10.1.0
Node: 12.16.0
OS: win32 x64

Angular: 10.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1001.0
@angular-devkit/build-angular     0.1001.0
@angular-devkit/build-optimizer   0.1001.0
@angular-devkit/build-webpack     0.1001.0
@angular-devkit/core              10.1.0
@angular-devkit/schematics        10.1.0
@ngtools/webpack                  10.1.0
@schematics/angular               10.1.0
@schematics/update                0.1001.0
rxjs                              6.6.2
typescript                        4.0.2
webpack                           4.44.1

[petebacondarwin]

Great issue report @janousek - thanks. I will take a look at this today.

[petebacondarwin]

It's a bit complicated to fix this way since loadTranslations() relies upon parseTranslation() which returns a type that relies upon ParsedTranslation which itself contains a reference to SourceLocation which is what references AbsoluteFsPath.

I realise though that the FileSystem types should not have any real dependency on Node. So instead I propose to change that code to drop Buffer from the API and use Uint8Array instead, which Buffer actually inherits from.

[angular-automatic-lock-bot]

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.}