Typescript & SystemJS：为特定扩展自定义模块解析

Question

我使用 SystemJS 和 typescript 2.0.2 来开发我的应用程序。

systemjs.config.js

var map = {
    'app':   'dist',
};

var packages = {
    'app':  { main: './main.js',  defaultExtension: 'js' }
};

所以当我使用：

import {Services} from './service.module'

//result: load {baseURL}/dist/service.module.js

如何覆盖此行为并让编译器不为特定文件附加任何扩展名？例如，如果我这样做：

import htmlTemplate from './app.component.html';

//result: 404 Not found - {baseURL}/dist/app.component.html.js

另一方面，如果我使用绝对路径：

import htmlTemplate from 'app.component.html';

//result: 404 Not found - {baseURL}/app.component.html

我想要 {baseURL}/dist/app.component.html 而不必在 import

中使用完整路径

Answer 1

我相信 systemjs 本身无法加载 html。我为此使用 systemjs-plugin-text：

npm install systemjs-plugin-text

那么，这个配置对我有用：

var map = {
    'app':   'dist',
    'plugin-text': 'node_modules/systemjs-plugin-text/text.js'
};

var packages = {
    'app':  {
        main: './m1.js',
        defaultExtension: 'js',
        meta: { '*.html' : { loader: 'plugin-text' }}
    }
};

SystemJS.config({
    map: map,
    packages: packages
});

因为显然 loader，当它应用时，会覆盖包配置中的任何其他设置。

NOTE1 只有当 typescript compilerOptions 中的 module 设置为 system.

时，这才会起作用

NOTE2 对于 HTML 导入以使用 typescript 2.0 进行类型检查，您必须将此 wildcard ambient declaration 添加到 declarations.d.ts 文件：

declare module "*.html" {
    const templateString: String;
    export default templateString;
}

我在 github

上添加了示例回购

Typescript & SystemJS：为特定扩展自定义模块解析

Typescript & SystemJS: customize module resolution for a specific extension

module

typescript

systemjs