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??

user_6156635 · Answer

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

Angular/Typescript - Wildcard module declaration

1 Answers

stackblitz link