amd-dependency已棄用。 如何使用導入“模塊”

Question

我們的Web應用程序（TypeScript 2.1.4）以amd模塊為目標，並使用///<amd-dependency />加載帶有requirejs的模板。 今天我們成功使用以下語法將html字符串加載到tpl變量中：

/// <amd-dependency path="text!tpl/components/header/header.view.html" name="tpl"/>
declare var tpl: string;

此后不推薦使用此指令 ：

/// <amd-dependency />

該指令已被棄用。 使用import“moduleName”; 而是聲明。

要替換三重斜杠指令，我們在local.d.ts文件中使用了通配符模塊：

declare module "text!*" {
    var _: string;
    export default _;
}

並將指令替換為：

import tpl from "text!tpl/components/header/header.view.html";

使用tsc進行編譯很好但是模板的加載失敗了。 查看js，編譯產生：

define([text!tpl/components/header/header.view.html, ...],function(header_view_html_1, ...) method如預期，但隨后使用header_view_html_1。 默認的模塊中。

調試js文件時，模板位於header_view_html_1變量中，而不是header_view_html_1.**default**屬性，這是未定義的。

為什么typescript會產生這個默認屬性？ 如何避免它並保持header_view_html_1？

編輯 ：我遵循typescriptlang模塊通配符模塊聲明的指導

declare module "json!*" {
    const value: any;
    export default value;
}
import data from "json!http://example.com/data.json";

Answer 1

您可能需要調整導入語句...

這會將所有內容導入到模塊的別名中。

import * as yourAlias from "..."

這會導入特定部件並直接提供。

import {thing, anotherThing} from "..."

Answer 2

由於我們正在將構建系統遷移到webpack2，我最終使用了html-loader ：

module: {
   rules: [
      {
         test: /\.html$/,
         use: "html-loader"
      }

並加載模板：

let tpl = require("./header.view.html");