个人中心
gpt4 book ai didi

javascript - 如何使用 Angular 1.x 和 Typescript 设置 Webpack 以使用 Angular 模板(ng-include)？

转载 作者：行者123 更新时间：2023-12-03 06:43:06 27 4
gpt4 key购买 nike

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

27 4 0
文章推荐： javascript - JqueryUI droppable 'out' 事件不会触发
文章推荐： perforce - p4 提交不在客户端 View 中的文件
文章推荐： .net - 从字符串中删除回车符
文章推荐： javascript - 使用 AJAX 结果更新 DisplayFor Date
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com