Come importare .html frammento utilizzando la sintassi ES6 a macchina

Question

Come importare un modello HTML da un percorso relativo come questo:

import customSelectHtml from "./custom-select.html!text"; 

dattiloscritto compilatore si lamenta che non riesce a trovare il modulo. Stavo cercando di creare una definizione di modulo ambientale, ma non consente percorsi relativi nei nomi dei moduli. Sto usando SystemJS come caricatore di moduli.

Answer 1

È impossibile.

A causa della definizione di ciò che è module in dattiloscritto, e per quanto ne so in ES6 javascript (import). Il modulo non può essere html. L'approccio comune è quello di importare un modulo javascript che esporta una stringa contenente html, css, qualunque sia. Ma non è importare il file con html raw.

Forse vuoi dare un'occhiata anche allo html imports, ma questa è una cosa completamente diversa.

Answer 2

Non so su SystemJS, ma questo è sicuramente possibile con Webpack e la html-loader

Answer 3

è possibile importare utilizzando la sintassi necessaria

1) Creare app.d.ts di file e richiedono la definizione così dattiloscritto sanno che questa è la funzione. (Si usi t bisogno di aggiungere qualsiasi libreria Inoltre, il supporto systemJs richiedono sintassi)

declare function require(params:string): any; 

2) ora è possibile importare la vostra HTML usando modello var = require ('! ./ misura select.html testo')

ho trovato ancora meglio, perché è possibile utilizzare richiede linea

var directive = { 
    template: require('./custom-select.html!text'), 
    scope: {} 
} 

Answer 4

non sto usando dattiloscritto, ma lo faccio usare ES6. Potrebbe essere utile per te.

Il modo in cui risolvo questo è dichiarando stringhe di template usando "virgolette". Funziona bene per me, sarei felice di sapere se qualcuno pensa che questa sia una cattiva abitudine.

sotto uno snippet con Angolare (-ui-router).

index.js

var indexTemplate = ` 
<div> 
    <h1>{{ Index page }}</h1> 
</div 
` 

export {indexTemplate} 

config.js

import { indexTemplate } from './index.js' 

function config($stateProvider){ 
    $stateProvider.state('index', { 
     url: '/', 
     controller: 'indexController', 
     template: indexTemplate 
    }) 
} 

Per completezza, questo assume IndexController è definito altrove. Inoltre, questa funzione di configurazione viene esportata in un luogo in cui è definita l'app. Ma tutto ciò non è correlato alla domanda.