Headercomponent.tsに画像をインポートできません。 ts(webpack ts loaderを使用して)をコンパイルしているときに何か間違っているのが原因だと思う
エラーの場所は
//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png'
@Component({
selector: 'my-header',
//templateUrl:'components/header/header.tmpl.html' ,
template: `<header class="main-header">
<div class="top-bar">
<div class="top-bar-title">
<a href="/"><img src="{{logoSource}}"></a>
</div>
私のウェブパックの設定は
// webpack.config.js
'use strict';
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports = {
entry: path.join(basePath,'/components/boot/boot.ts'),
output: {
path: path.join(basePath,"..","/build"), // This is where images AND js will go
publicPath: path.join(basePath,"..","/build/assets"),
// publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images
filename: 'bundle.js'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ],
//
loaders: [
{ test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest
{
test: /\.json/,
loader: 'json-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/],
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
// now require('file') instead of require('file.coffee')
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png']
},
devtool: 'source-map'
};
私のディレクトリ構造は次のようになります
-/
-server/
-build/
-node-modules/
-public/
-components/
-boot/
-boot.component.ts
-header/
-header.component.ts
-images/
-logo.png
-services/
-typings/
-browser/
-main/
-browser.d.ts
-main.d.ts
-tsconfig.json
-typings.json
私のtsconfigファイルは次のとおりです:
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
私はTypeScriptのコンパイルで何かを混乱させていると思う、何がわからない
問題は、TypeScriptレベルモジュールとWebpackレベルモジュールを混同することです。
Webpackでは、インポートするファイルはビルドパイプラインを通過します。
TypeScriptでのみ.ts
および.js
ファイルが関連しており、import x from file.png
を実行しようとしてもTypeScriptがどうするかわからない場合、TypepackはWebpack configを使用しません。
あなたのケースでは、懸念を分離する必要があります。TypeScript/ EcmaScriptコードにはimport from
を使用し、Webpack固有にはrequire
を使用します。
.d.ts
ファイルに次のような定義を含むこの特別なWebpack require
構文をTypeScriptに無視させる必要があります。
declare function require(string): string;
これにより、TypeScriptはrequireステートメントを無視し、Webpackはビルドパイプラインでそれを処理できるようになります。
の代わりに:
import image from 'pathToImage/image.extension';
使用する:
const image = require('pathToImage/image.extension');
私は使っています
import * as myImage from 'path/of/my/image.png';
とTypeScript定義を作成しました
declare module "*.png" {
const value: any;
export = value;
}
これは、webpackのファイルローダーのような正しいハンドラーがある場合にのみ機能します。このハンドラーはファイルへのパスを提供するためです。
私も同じ問題を抱えていたので、次のアプローチを使用しました。
import * as myImage from 'path/of/my/image';
私のコンポーネントでは、インポートした画像をデータメンバーに割り当てました。
export class TempComponent{
public tempImage = myImage;
}
テンプレートで次のように使用します:
<img [src]="tempImage" alt="blah blah blah">
Christian Stornowskiの答えに対する小さな改善は、エクスポートをデフォルトにすることです。
declare module "*.png" {
const value: string;
export default value;
}
したがって、次を使用して画像をインポートできます。
import myImg from 'img/myImg.png';
インポートにES6構文を使用する場合。
まず、tsconfig.json
あなたが持っている:
target: 'es5',
module: 'es6'
次のようになります。
import MyImage from './images/my-image.png';
このようなデフォルトのインポートを使用できるようにするには:
import grumpyCat from '../assets/grumpy_cat.jpg';
jpg
モジュール宣言を定義します。
declare module "*.jpg" {
const value: string;
export default value;
}
tsconfig
で"module": "es6"
を使用(@vedran 上記のコメント を参照)または"module": "commonjs"
を使用する場合"esModuleInterop": true,
を追加
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true,
...
ソース: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818