AMD 依赖性已弃用。如何使用导入"module"

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依赖项/>

此指令已被弃用。使用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");