我尝试创建一个虚拟项目来测试 Webpack + Angular + TypeScript，但无论如何我都找不到 ng-include 的作品。
我的项目“结构”(这实际上是一个虚拟项目):
/src/
58852927.jpg
App.ts
index.html
style.scss
test.html
Test.ts
/typings/ ...
/webpack.config.js
我的index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app">
<div class="toto">
RedRed
<span class="fa fa-check"></span>
</div>
<div>
<ng-include src="'test.html'"></ng-include>
</div>
<img src="58852927.jpg" alt="">
<img src="58852927.jpg" alt="">
<img src="58852927.jpg" alt="">
</body>
</html>
(我尝试使用/test.html，./test.html)
我的App.ts(我的应用程序的入口点):
import "./style.scss"
import "./test.html"
import angular = require("angular");
import {toto} from "./Test"
angular
.module("app", [])
.run(function () {
angular.element(".toto").text(toto);
});
还有我的 webpack.config :
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: ['webpack/hot/dev-server', "./src/App.ts"],
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devtool: 'source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: "ts-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader?sourceMap!sass-loader?sourceMap"
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.html$/,
exclude:/index\.html$/, //I don't want to put index in templateCache
loader: "ngtemplate!html"
},
{
test: /\.(jpg|png|gif)$/,
loader: "file-loader?name=assets/[name].[ext]"
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
},
{
test: require.resolve("jquery"),
loader: 'expose?jQuery'
},
{
test: require.resolve("angular"),
loader: "imports?jQuery=jquery"
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: "Lab",
filename: "index.html",
template: "./src/index.html"
})
]
};
每当我刷新浏览器时，我都会得到一个
GET http://localhost:9780/test.html 404 (Not Found)
我尝试使用 webpack-require-plugin，正如我在这里看到的:Webpack: using require for ng-include
我尝试用 ng-cache-loader 替换 ngtemplate : https://github.com/teux/ng-cache-loader
我没有更多的想法...
最佳答案
{
test: /\.html$/,
exclude: /index\.html/,
loader: "imports?angular=angular!ngtemplate?relativeTo=src!html"
},
{
test: /index\.html/,
loader: "html"
},
{
test: require.resolve("angular"),
loader: "expose?angular!imports?jQuery=jquery"
}
通过此导入:
似乎有效。
首先，我的模板传递到 html 加载器，以获取图像和其他依赖项，其次，传递到 ngtemplate 加载器以放入 $templateCache...然后传递到导入加载器以获取对全局 Angular 变量
关于javascript - 如何使用 Angular 1.x 和 Typescript 设置 Webpack 以使用 Angular 模板(ng-include)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37864186/