ماژول - تایپاسکریپت: چگونه فایلهای غیر .ts را به عنوان رشته خام وارد کنیم

این بحث نشان میدهد که در typescript 2، امکان وارد کردن یک فایل خارجی که css نیست به عنوان یک رشته برای استفاده در کلاس من وجود دارد.

من در تلاش هستم از این فرصت استفاده کنم تا HTML را به کامپوننت تایپاسکریپتم وارد کنم تا برنامهام یک درخواست HTTP برای دریافت کامپوننت و قالب HTML آن انجام دهد به جای دو درخواست جداگانه. من امتحان کردهام:

typings.d.ts

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

app.component.ts

import htmlTemplate from './app.component.html!text';
...
constructor(){console.log(htmlTemplate)}

کامپایلر تایپاسکریپت هیچ خطایی نشان نمیدهد. با این حال، وقتی برنامه را اجرا میکنم، پس از درخواست http://localhost/text و دریافت 404 پیدا نشد، خراب میشود.

من همچنین تلاش کردهام: typings.d.ts

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

app.component.ts

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 و فایلهای استایل .css خود را به صورت رشتهها وارد کنم؟

پاسخ شماره ۱

این هم روشی است که من برای برنامه Angular 2 rc.6 خود انجام دادم

1 اگر هنوز نصب نکردهاید، typescript 2 را نصب کنید. آن را به عنوان کامپایلر تنظیم کنید

npm install [email 

2 تنظیم ماژول به system در tsconfig.json

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

3 این برنامه را خراب کرد. برای رفع مشکل، هر مؤلفه را ویرایش کنید تا از ماژولهای سیستم استفاده کند؛ جایگزین کنید...

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

با...

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

4 این در تایپاسکریپت خطا ایجاد خواهد کرد زیرا __moduleName ناشناخته است. برای رفع آن، یک فایل تعریف سفارشی (.d.ts) در همان دایرکتوری که فایل bootstrap شما قرار دارد ایجاد کنید.

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"

۵ یک مرجع به تعاریف تایپ شده در فایل بوتاسترپ خود اضافه کنید تا تایپاسکریپت هنگام تجزیه کد شما آنها را ببیند: main.ts

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

6 مطمئن شوید که برنامه هنوز اجرا میشود. سپس، systemjs-plugin-text را نصب کنید:

npm install [email 

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 یا ابزار باندلینگ مشابهی استفاده کنید، قالب خارجی درونخطی خواهد شد.