How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?

Question

I try to create a dummy project to test Webpack + Angular + TypeScript, but i don't find anyway to get ng-include works.

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 :

<!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)

My App.ts (entry point of my app) :

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 :

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

I try to replace ngtemplate with ng-cache-loader : https://github.com/teux/ng-cache-loader

I don't have any more ideas...

score 1 · Accepted Answer · answered Jun 17 '16 at 15:28

{
    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

How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?

1 Answers1