amd-dependency is deprecated. How to use import "module"

2
votes

Our web application (TypeScript 2.1.4) targets amd module and uses ///<amd-dependency /> to load template with requirejs. Today we are using with success the following syntax to load an html string into the tpl variable :

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

Henceforth this directive is deprecated :

/// < amd-dependency />

this directive has been deprecated. Use import "moduleName"; statements instead.

To replace the triple slash directive we used a wild card module in a local.d.ts file :

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

and replaced the directive with :

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

The compilation with tsc is fine but the loading of the template fails. Looking a the js, the compilation produces :

define([text!tpl/components/header/header.view.html, ...],function(header_view_html_1, ...) method as expected but then uses header_view_html_1.default in the module.

Debugging the js file, the template is in the header_view_html_1 variable not in the header_view_html_1.**default** property which is undefined.

Why typescript produces this default property ? How to avoid it and keep header_view_html_1 ?

Edit : I followed guidances from typescriptlang modules Wildcard module declarations

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

2 Answers

0
votes

You may need to adjust your import statement...

This imports everything into the alias from the module.

import * as yourAlias from "..."

This imports specific parts and makes them available directly.

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

Since we're migrating the build system to webpack2, I end up using html-loader:

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

and load the template with :

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