如何使用 Angular 1.x 和 Typescript 设置 Webpack 以使用 Angular 模板（ng-include）？答案

【问题标题】：How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?如何使用 Angular 1.x 和 Typescript 设置 Webpack 以使用 Angular 模板（ng-include）？
【发布时间】：2016-10-18 06:22:36
【问题描述】：

我尝试创建一个虚拟项目来测试 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

我没有更多的想法......

【问题讨论】：

标签： javascript html angularjs typescript webpack

【解决方案1】：

{
    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...，然后传入导入加载器以获取对全局角度变量

【讨论】：