为什么 Webpack 不复制我的 ng2 模板文件？答案

【问题标题】：Why Webpack doesn't copy over my ng2 template files?为什么 Webpack 不复制我的 ng2 模板文件？
【发布时间】：2016-12-06 05:10:59
【问题描述】：

这是我的（简化的）Angular 2 应用程序文件夹结构：

这是我的 webpack.config.js：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './polyfills.ts',
        'vendor': './vendor.ts',        
        'app': './app/main.ts'},
    output: {
        path: './dist',
        filename: '[name].js',
        chunkFilename: "[id].bundle.js",
        sourcemapFilename: '[name].map'
    },
    module: {
        loaders: [
            {test: /\.ts$/, loaders: ['ts', 'angular2-template-loader']},
            {
            test: /\.html$/,
            loader: 'html'
            },
            {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
            },
            ,{ test: /\.css$/, loaders: 'style!css' }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
            }),       
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ]
}

当我执行 webpack 构建时，dist 文件夹只获取 index.html、app.js、polyfills.js 和 vendor.js。 app.component.html、css 和 users 组件 html 文件不会被复制（在各自的文件夹、app、app/users...中）到 dist 文件夹。

我错过了什么？

编辑：

这是从开发工具中看到的样子：

【问题讨论】：

您的 templateUrl 似乎没有被遵守。你能分享你的组件的代码吗
@Component({ selector: 'my-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], 这就是它的定义方式。它与 System.js 一起工作，在 webpack 中失败。
你在github上有代码吗？在你的 webpack 中 ['ts', 'angular2-template-loader'] 不应该是 ['ts-loader', 'angular2-template-loader']
你解决了吗？
@Govan 就像下面的答案一样，我使用 Angular Docs 中的 Webpack 示例重新创建了我的应用程序。还要仔细检查模板 URL，因为在更新 typescript（或者是 Webpack，我不记得了）之后，相对路径不再是问题。从那时起，我的项目就没有问题了。但当时我无法按原样解决。

标签： typescript angular webpack

【解决方案1】：

我无法转换我的应用程序并使其以这种方式工作，因此我按照 Angular Docs Webpack: an introduction 中描述的步骤创建了一个干净的项目，然后将我的组件一一复制，检查错误我得到的时候，大多是错误的路径位置，然后更正它们。到目前为止它似乎有效。

【讨论】：

@JorawarSingh 在我提出这个问题之后一天过去了，在那段时间里，我解决了我的问题，无论你是否喜欢我的方法，我已经分享了它。我还观察了可能的错误原因，也分享了这些信息，所有这些都写在上面。
是的，我知道一天过去了，但仍然会有其他人查看您的帖子以找到相同的答案，因此最好提供详细和解释性的答案。正如您在问题中所问的那样“app.component.html、css 和用户组件 html 文件不会被复制”。我只是想做出贡献，以便其他人能够理解发生了什么谢谢！

【解决方案2】：

这是它的工作原理。插件 angular2-template-loader 在组件中查找 templateUrl 并转换路径

来自

templateUrl; 'path'

到

 `require("templatePath")`

webpack 理解什么并将其与组件一起构建在 bundle.js 中。你可以看到你的构建并找到类似的东西

 template: __webpack_require__(id).

它不会为您创建单独的 html 文件，而是将所有文件捆绑在一起并作为请求提供给您。作为您的 webpack，将只有 app.js、pollyfills.js、vendor.js 和 index.html

这是完整组件外观的示例

@Component({
    templateUrl: "./home.template.html",
})

在你的 webpack 中

{test: /\.ts$/, loaders: ["ts-loader","angular2-template-loader"]},

【讨论】：

检查上面我最初的问题添加的屏幕截图。 angular2-template-loader 可能按照您所说的方式工作，但我遇到的问题可能隐藏在我的 webpack.config.js 中的其他地方，因为我在完整 URL 上得到 404，而不是 ID。
查看你的包是否已经编译，它应该是require("templatePath")