如何使用 webpack 2 导入 html 个文件?
how to import html files with webpack 2?
我不知道如何使用 webpack 2 导入 html 文件!我正在使用 angular 1.6.0 和打字稿。
我想导入一个模板并将其用作路由器状态模板:
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import theView from './theView.html';
import appComp from './app.component';
export default angular
.module('app.main', [uiRouter])
.component('myAppComp', appComp)
.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$locationProvider.hashPrefix('');
$stateProvider
.state('main', {
url: '/main',
template: '<p>main state template</p>'
})
.state('main.cardList', {
url: '/cardList',
template: theView
});
}
它给出:
error:
ERROR in ./src/app/module.ts
(3,22): error TS2307: Cannot find module './theView.html'.
我不明白(奇怪)的是,如果我导入与上面相同的模板并在组件模板中使用它,它确实会给出相同的错误"cannot find module './theView.html'" 但它有效!
这有效(有 ts 编译错误):
import template from './theView.html';
.component(appComp, {
template
})
webpack.config:
module.exports = {
entry: './src/app/module.ts',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
}
]
},
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
}
};
这是怎么回事..?
给以后遇到这个问题的人;解决方法如下:
declare const require: any;
$stateProvider
.state('main.cardList', {
url: '/cardList',
template: require('./theView.html').default
});
以上答案感谢@yadejo!
我不知道如何使用 webpack 2 导入 html 文件!我正在使用 angular 1.6.0 和打字稿。
我想导入一个模板并将其用作路由器状态模板:
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import theView from './theView.html';
import appComp from './app.component';
export default angular
.module('app.main', [uiRouter])
.component('myAppComp', appComp)
.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$locationProvider.hashPrefix('');
$stateProvider
.state('main', {
url: '/main',
template: '<p>main state template</p>'
})
.state('main.cardList', {
url: '/cardList',
template: theView
});
}
它给出:
error:
ERROR in ./src/app/module.ts
(3,22): error TS2307: Cannot find module './theView.html'.
我不明白(奇怪)的是,如果我导入与上面相同的模板并在组件模板中使用它,它确实会给出相同的错误"cannot find module './theView.html'" 但它有效!
这有效(有 ts 编译错误):
import template from './theView.html';
.component(appComp, {
template
})
webpack.config:
module.exports = {
entry: './src/app/module.ts',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
}
]
},
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
}
};
这是怎么回事..?
给以后遇到这个问题的人;解决方法如下:
declare const require: any;
$stateProvider
.state('main.cardList', {
url: '/cardList',
template: require('./theView.html').default
});
以上答案感谢@yadejo!