Angular/Typescript - Wildcard module declaration

Question

I'm trying to implement wildcard modules and i don't seem to get it work:

Right now i have the following code which works:

typings.d.ts

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

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
  }
}

You may see a live example here, however i want to implement WILDCARDS, as seen here (typescriptlang) and here (sitepen):

Implementation should allow me to do something like this:

typings.d.ts

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

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

declare module "*!text" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json!i18n';
import * as someObject from './static/someObject.json!static';
import * as template1 from './templates/template1.html!text';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
    console.log(someObject.default);
    console.log(template1.default);
  }
}

The issue is that for some reason wildcards are not being correctly recognized... throwing at runtime that "json" is not found.

• "Module not found: Error: Can't resolve 'json' in ..."
• "Module not found: Error: Can't resolve 'static' in ..."
• "Module not found: Error: Can't resolve 'text' in ..."

An example of this feature working is here when it was first implemented on Angular 2,

Any idea of what i'm doing wrong??

Demantoid

I'm deleting my answer because I discovered it is completely wrong: wildcard declare module does work for relative imports in TypeScript. I think your problem is with the webpack configuration, but I don't know enough about that to help. – Mclemore

Thank you Matt, i thought so because i've tried to implement your answer without success :( im still trying to figure out a way to implement this. – Demantoid

You shouldn't use ! annotations in your imports. It should be extracted into webpack config. You might also want to check out resolveJsonModule flag – Henshaw

Hello @Ebuall, im already working without ! annotation, the reason for this question is that i want to implement it so i can make a separation of every different kind of JSON file, for example i18n JSON's module should look something simillar to this: declare module "*.json!i18n" { const value: any; export default value; export interface Language { [key: string]: any; }; } i would be able encapsulate JSON behaviour/interfaces by just using the import. – Demantoid

#52320856 – Settle

@AironBrynchke please take a look to this link at section Wildcard module declarations, according to the documentation the following import should work import template1 from './templates/template1.html!text' – Demantoid

Answer 1

According to the stackblitz code link you shared, 'static' and 'template' directories does not exists. Just create the directories and put your data in it. Also update your imports and remove !i18n or !static from paths.

import * as es from './i18n/es.json';
import * as someObject from './static/someObject.json';

I've tested with static/someObejcts only. Templates will also work in the same way.

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';
import * as someObject from './static/someObject.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
    console.log(es.default.hello);
    console.log(someObject.default.hello);

  }
}

typings.d.ts

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

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

stackblitz link

Here is a working example of your code

Nesmith

Hello Javapocalypse,this question is about "how to use wildcards" so the goal is to get them working... wildcards are the "!static" and "!i18n" parts you suggested to use... removing them destroy the whole purpose of using them. – Demantoid

i've added a screenshoot showing the documentation of wildcards so you'll see what im actually trying to implement. – Demantoid