javascript - Importarea fișierelor SVG cu TypeScript + Webpack

Am o configurație destul de simplă Webpack + TypeScript și încerc să import svg-uri. Folosesc svg-sprite-loader și funcționează bine dacă require() svg-urile mele astfel:

require('./assets/alert.svg')

--

Totuși, aș prefera să folosesc următoarele:

import alert from './assets/alert.svg'

Cu asta, primesc următoarea eroare:

TS2307: Cannot find module './assets/alert.svg'.

Am un fișier custom.d.ts în rădăcina proiectului meu (după ce am citit asta: https://webpack.js.org/guides/typescript/#importing-other-assets). Arată astfel:

declare module '*.svg' {
  const content: any;
  export default content;
}

Al meu tsconfig arată astfel:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

Și, în final, configurația mea webpack include:

 module: {
   rules: [
       {
           test: /\.ts$/,
           use: `awesome-typescript-loader`
       },
       {
           test: /\.html$/,
           loader: 'html-loader'
       },
       {
           test: /\.svg$/,
           loader: 'svg-sprite-loader'
       }
   ]
 }

Încerc să înțeleg cum intervine fișierul custom.d.ts. Trebuie să adaug ceva în tsconfig?

De asemenea, pentru versiuni, folosesc:

• Webpack @ 2.5.0
• TypeScript @ 2.4.0
• svg-sprite-loader @ 3.6.2
• awesome-typescript-loader @ 3.1.2

Răspuns #1

Încercați să adăugați

"files": [ 
  "custom.d.ts" 
]  

la tsconfig.json-ul tău

Răspunsul #2

Poți specifica un typeRoot în fișierul tău tsconfig.json indicând locația fișierului custom.d.ts.