如何使用 webpack2 解决 module.id 应该是字符串错误答案

【问题标题】：How to solve module.id should be a string error using webpack2如何使用 webpack2 解决 module.id 应该是字符串错误
【发布时间】：2017-01-15 05:59:46
【问题描述】：

所以我在一个有几个外部依赖项的 Angular2 项目上使用 webpack2。其中一些依赖项使用了 commonjs，并声明了如下组件：

@Component({
    moduleId: module.id,
    templateUrl: 'mycomponent.html'
    ...
})

这会导致以下错误：

Error: moduleId should be a string in "MyComponent"

经过一番研究，我发现这是因为 Webpack 期望组件将 id 作为数字，而 Angular 将其声明为字符串。我无法更改依赖代码。我该怎么做才能忍受这种依赖？

谢谢！

【问题讨论】：

标签： angular webpack-2

【解决方案1】：

所以这就是我现在要忍受这种依赖的方法。使用字符串替换加载器为我删除该行：

{
    test: /.*node_modules\/my-dependency-folder\/.*\.js/,
    loader: 'string-replace-loader',
    query: {
        search: 'moduleId: module.id,',
        replace: ''
    }
}

希望这可以帮助遇到同样问题的人。

【讨论】：

【解决方案2】：

我不知道这是否会有所帮助，但也许有人会需要它（我确实需要！）。

所以在最坏的情况下可以在.js文件中搜索module.id并添加.toString()方法(module.id.toString())，就可以解决问题了。

【讨论】：

【解决方案3】：

删除线

moduleId: module.id,

有效。

【讨论】：

做 webpack solve relative paths 没有模块 id？
正如我所说，我不能只从所有 3rd 方库中删除所有 module.id 引用。每次都通过 npm 拉取它们。每个需要从事该项目的人都需要这样做。 @pavel，是的，Webpack 不需要它来解析相对路径。
必须有更好的方法来解决这个问题。我尝试添加规则以通过 string-replace-loader 替换所有 module.id 声明。但是，它仍然不起作用，因为模板没有引用像“./mytemplate.html”这样的目录，而只是声明了“mytemplate.htnl”。后者不适用于 Webpack
@Juliano，看起来这些组件不支持包含模板的 webpack 方式。非常有趣的问题，使用 moduleId 是 Angular 中默认的官方引用模板的方式，但看起来 webpack 不支持它。我认为，您应该向 webpack 报告问题。添加：看起来像you are not first。