如何使用Angular 1.x和Typescript设置Webpack以使用Angular模板（包括ng）？

Question

I try to create a dummy project to test Webpack + Angular + TypeScript, but i don't find anyway to get ng-include works. 我尝试创建一个虚拟项目来测试Webpack + Angular + TypeScript，但无论如何我都找不到要获得ng-include的作品。

My project "structure" (it's really a dummy project) : 我的项目“结构”（这实际上是一个虚拟项目）：

/src/
    58852927.jpg
    App.ts
    index.html
    style.scss
    test.html
    Test.ts

/typings/ ...

/webpack.config.js

My index.html file : 我的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>

(I try with /test.html, ./test.html) （我尝试使用/test.html、./test.html）

My App.ts (entry point of my app) : 我的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);
    });

And my webpack.config : 和我的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"
        })
    ]
};

And anytime I refresh the browser, i got a 每当我刷新浏览器时，

GET http://localhost:9780/test.html 404 (Not Found)

I try to use the webpack-require-plugin as i saw here : Webpack: using require for ng-include 我尝试使用webpack-require-plugin，如我在这里看到的： Webpack：对ng-include使用require

I try to replace ngtemplate with ng-cache-loader : https://github.com/teux/ng-cache-loader 我尝试用ng-cache-loader替换ngtemplate： https : //github.com/teux/ng-cache-loader

I don't have any more ideas... 我没有其他想法了...

Answer 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"
}

With this import : 通过此导入：

Seems to work. 似乎可以工作。

First, my template pass into the html loader, to get images and other dependencies, second, pass into the ngtemplate loader to be putted into the $templateCache... and after pass into the imports loader to got a reference to the global angular variable 首先，将模板传递到html加载器中，以获取图像和其他依赖项，其次，传递到ngtemplate加载器中，将其放入$ templateCache ...中，然后传递到imports加载器中，以获取对全局角度变量的引用

如何使用Angular 1.x和Typescript设置Webpack以使用Angular模板（包括ng）？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-17 15:28:50

如何使用Angular 1.x和Typescript设置Webpack以使用Angular模板（包括ng）？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-17 15:28:50

解决方案1
1 已采纳 2016-06-17 15:28:50