How to to augment multiple module in single declaration file in TypeScript?

Question

I notice very strange behavior with Module augmentation. I have one agument.d.ts file within my src folder i.e. <ROOT>/src/augment.d.ts. In this file, I am creating one module for Webpack raw-loader and also, augmenting existing hapi module. The code looks like this:

import { Server } from 'hapi';

declare module '*.view.html' {
    const contents: string;
    export default contents;
}

declare module 'hapi' {

    interface Server {
        x: string;
    }
}

In my tsconfig.json file, I am using the default value for typeRoots. And my include is set to ["src/**/*.ts"],.

The problem is - I notice that module augmentation for hapi works but not for *.view.html; The compiler keeps throwing an error for all the imports associated with html files.

However, the strange behavior is when I move definition for *.view.html to some other file i.e. - xyz.html.d.ts, then it works perfectly.

Is this the intended behavior? Should we have exactly one module augmentation per declaration file? Any rule I am unaware of!!!

Answer 1

Try to move the import in the module declaration:

declare module '*.view.html' {
    const contents: string;
    export default contents;
}

declare module 'hapi' {
    import { Server } from 'hapi';
    interface Server {
        x: string;
    }
}