Import a JSON file at compile time

Type of Issue

[ X ] Bug Report
[ X ] Feature Request

Description

Im not really sure if I am looking at a bug or a missing feature.

What I need: I simply want do import a JSON file (containing my translation strings) at build time. Typescript should be able to import a JSON file as long there is an appropriate module type declared. So this is my importing file translations.ts:

/// <reference path="./json.d.ts" />

import * as de from './de.json';
import * as en from './en.json';

export default {
    de,
    en
};

I use the triple slash notation to import a custom json type, like described here. The type looks like in this article.

json.d.ts

declare module "*.json" {
    const value: any;
    export default value;
}

Both imported json files are existent and valid. Anyway, the moment I build this, my JSON files won’t be resolved resulting in this error message:

Building Angular Package
Building entry point 'demo'
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Could not resolve './de.json' from dist/demo/esm2015/assets/i18n/translation.js
Error: Could not resolve './de.json' from dist/demo/esm2015/assets/i18n/translation.js
    at error (/home/[truncated]/module-workbench/node_modules/rollup/dist/rollup.js:199:15)
    at /home/[truncated]/module-workbench/node_modules/rollup/dist/rollup.js:20784:25

Could not resolve './de.json' from dist/demo/esm2015/assets/i18n/translation.js
Error: Could not resolve './de.json' from dist/demo/esm2015/assets/i18n/translation.js
    at error (/home/[truncated]/module-workbench/node_modules/rollup/dist/rollup.js:199:15)
    at /home/[truncated]/module-workbench/node_modules/rollup/dist/rollup.js:20784:25

How To Reproduce

You would have to set up a simple case trying to import a JSON file.

Version Information

➜   module-workbench master $ node_modules/.bin/ng-packagr --version
ng-packagr:            3.0.6
@angular/compiler:     6.1.1
rollup:                0.59.4
tsickle:               0.32.1
typescript:            2.7.2

[alan-agius4]

At the moment Angular Compiler doesn’t support the TypeScript resolveJsonModules feature.

See: https://github.com/angular/angular/issues/25456

IMHO, this should be blocked until Angular Compiler can support Json imports, and eventually we can implement the JSON Inlining for FESM and UMD formats only via rollup.

As otherwise we need to implement a workaround to support JSON in ESM modules as well. Note that having a lot of json files will increase the library package size as each json will need to be copied 6 times, unless rewired which adds an additional layer of complexity.

Apart from that for FESM and UMD should json be inlined at all?

I think this needs to be discussed a bit more with the Angular guys, mainly to see what are their thoughts about inlining vs not, and come up with a proper specification.

On Mon, 20 Aug 2018 at 22:28, l0rn [e-mail] wrote:

So our use case is also 1.

Our i18n extractor produces JSON and it would be convenient to include it. Indeed my current fall back is this gulp task stupidly creating valid typescript from json:

return gulp.src('modules/**/i18n/*.json')
    .pipe(replace(/({(.|\s)*})/, function (match) {
        return 'export default ' + match;
    }))

    .pipe(rename(function (path) {
        path.extname = ".ts";
    }))
    .pipe(gulp.dest('modules/'));

But apart from the fact that there is a use case, I would argue since its a feature of the actual typescript compiler there shouldn’t be a reason for a member of the toolchain to not support it right?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dherges/ng-packagr/issues/1050#issuecomment-414452105, or mute the thread https://github.com/notifications/unsubscribe-auth/AQv-WirxfX9eME4K4VSHSZMkZsMGyebCks5uSxwBgaJpZM4V8aCK .

[l0rn]

Oh that is good to know… Although it doesn’t in angular world, ran into this one: https://github.com/angular/angular/issues/25456

Anyone already got a workaround?