Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loadTranslations from @angular/localize dependes on Node.js #38692

Closed
janousek opened this issue Sep 3, 2020 · 3 comments
Closed

loadTranslations from @angular/localize dependes on Node.js #38692

janousek opened this issue Sep 3, 2020 · 3 comments

Comments

@janousek
Copy link

janousek commented Sep 3, 2020

🐞 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" (

export type MessageId = string;
, that are declared in messages.ts that use:

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

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
Copy link
Member

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

@petebacondarwin
Copy link
Member

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.

petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Sep 3, 2020
…itted

A recent change to `@angular/localize` brought in the `AbsoluteFsPath` type
from the `@angular/compiler-cli`. But this brought along with it a reference
to NodeJS typings - specifically the `FileSystem` interface refers to the
`Buffer` type from NodeJS.

This affects compilation of `@angular/localize` code that will be run in
the browser - for example projects that reference `loadTranslations()`.
The compilation breaks if the NodeJS typings are not included in the build.
Clearly it is not desirable to have these typings included when the project
is not targeting NodeJS.

This commit replaces references to the NodeJS `Buffer` type with `Uint8Array`,
which is available across all platforms and is actually the super-class of
`Buffer`.

Fixes angular#38692
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Sep 3, 2020
A recent change to `@angular/localize` brought in the `AbsoluteFsPath` type
from the `@angular/compiler-cli`. But this brought along with it a reference
to NodeJS typings - specifically the `FileSystem` interface refers to the
`Buffer` type from NodeJS.

This affects compilation of `@angular/localize` code that will be run in
the browser - for example projects that reference `loadTranslations()`.
The compilation breaks if the NodeJS typings are not included in the build.
Clearly it is not desirable to have these typings included when the project
is not targeting NodeJS.

This commit replaces references to the NodeJS `Buffer` type with `Uint8Array`,
which is available across all platforms and is actually the super-class of
`Buffer`.

Fixes angular#38692
@petebacondarwin petebacondarwin self-assigned this Sep 3, 2020
atscott pushed a commit that referenced this issue Sep 8, 2020
…#38700)

A recent change to `@angular/localize` brought in the `AbsoluteFsPath` type
from the `@angular/compiler-cli`. But this brought along with it a reference
to NodeJS typings - specifically the `FileSystem` interface refers to the
`Buffer` type from NodeJS.

This affects compilation of `@angular/localize` code that will be run in
the browser - for example projects that reference `loadTranslations()`.
The compilation breaks if the NodeJS typings are not included in the build.
Clearly it is not desirable to have these typings included when the project
is not targeting NodeJS.

This commit replaces references to the NodeJS `Buffer` type with `Uint8Array`,
which is available across all platforms and is actually the super-class of
`Buffer`.

Fixes #38692

PR Close #38700
@atscott atscott closed this as completed in 2c4a98a Sep 8, 2020
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 9, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants