Question

This discussion建议在<script type="text/javascript" src="/Scripts/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/Scripts/jsPDF-1.2.60/dist/jspdf.min.js"></script> <script type="text/javascript" src="/Scripts/jsPDF-1.2.60/plugins/jspdf.plugin.autotable.js"></script> <script type="text/javascript" src="/Scripts/jsPDF-1.2.60/plugins/split_text_to_size.js"></script>中，可以将外部非typescript 2文件作为字符串导入我的班级。

我正在尝试利用它将HTML导入我的typescript组件，以便我的应用程序将提取一个HTTP请求获取组件＆amp;它的HTML模板而不是两个单独的请求。我试过了：

typings.d.ts

css

app.component.ts

declare module "*!text" {
    const value: any;
    export default value;
}

typescript编译器不会引发错误。但是，当我运行该应用程序时，它会在请求import htmlTemplate from './app.component.html!text'; ... constructor(){console.log(htmlTemplate)}并获得http://localhost/text未找到“后崩溃

我也尝试过：的 typings.d.ts

app.component.ts

declare module "*.html" {
    const value: any;
    export default value;
}

同样在编译期间没有引发任何错误，但应用程序请求import htmlTemplate from './app.component.html'; ... constructor(){console.log(htmlTemplate)}并在收到http://localhost/app.component.html.js响应后崩溃。

模板位于404 not found中，与app.component.html文件位于同一文件夹中。我正在运行.ts。如何将typescript 2.0.2模板和.html样式表导入为字符串？

Answer 1

以下是我为Angular 2 rc.6申请

所做的工作

1 如果您还没有安装typescript 2。将其设置为编译器

npm install typescript@2.0.2

2 在 tsconfig.json 中将模块设置为system

"compilerOptions": {
    "target": "ES5",
    "module": "system",
    ...
}

3 这打破了应用。要修复edit every component以使用系统模块;取代...

@Component({
    module: moduleId,
    templateUrl: './app.component.html',
})

...与

@Component({
    module: __moduleName,
    templateUrl: './app.component.html',
})

4 这会引发打字稿中的错误，因为__moduleName未知。要摆脱它，请在与引导程序文件相同的目录中创建自定义定义文件（.d.ts）。

<强> custom.typings.d.ts

/** So typescript recognizes this variable wherever we use it */
declare var __moduleName: string;

/** Will be needed later to import files as text without raising errors */
declare module "*!text"

5 在引导文件中添加对类型化定义的引用，以便在解析代码时，typescript会看到它们： main.ts

///<reference path="./custom.typings.d.ts"/>

6 确保应用仍然运行。接下来，install systemjs-plugin-text：

npm install systemjs-plugin-text@0.0.9

7 在 systemjs.config.js

中将新插件设置为地图

System.config({
    map:{
        'app':        'app',
        '@angular':   'node_modules/@angular',
        //'text' map is used to import files as raw strings
        text:         'node_modules/systemjs-plugin-text/text.js'
    }
});

8 现在我们都设置为将文件导入为字符串

// this line should raise no error if steps 4 & 5 were completed correctly
import htmlTemplate from './app.component.html!text';
console.log(htmlTemplate); //will print the file as a string in console

@Component({
    moduleId: __moduleName,
    template: htmlTemplate, //success!!
})

就是这样！现在，如果您使用systemjs-builder或类似的捆绑工具，则会内联外部模板。

打字稿：如何将非.ts文件导入为原始字符串

1 个答案: