错误：找不到模块'app/MyComponent/MyComponent.module' 错误：找不到模块

Question

这与此处提到的问题非常相似，但是在评论或回答中提供的所有解决方案都没有解决我的问题。想知道是否还有其他需要注意的地方。我尝试了不同的路径，例如：

• ./app/mycomponent/mycomponent.module#MyComponentModule,
• .mycomponent//mycomponent.module#MyComponentModule

但是都没有效果。我的问题与原始问题之间最大的区别是，我们最近添加了webpack，应用程序也因此出现了问题。当我们没有使用任何捆绑服务（webpack）并且一切都是单独的文件时，一切都正常工作。同时，我的主页home.module没有这个问题。其他每个页面或模块都会抛出完全相同的问题。在实现方面，主页和其他模块之间几乎没有什么区别。

我的路由模块如下：

{
    path: 'mycomponent',
    loadChildren: 'app/mycomponent/mycomponent.module#MyComponentModule'
}

完整的异常信息如下

bootstrap:51 ERROR Error: 在Promise中未捕获错误: Error: 找不到模块'app/mycomponent/mycomponent.module' Error: 找不到模块'app/mycomponent/mycomponent.module' at browser.es5.js:91 at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (animations.es5.js:7) at ZoneDelegate.invoke (zone.js:391) at Zone.run (zone.js:142) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at browser.es5.js:91 at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (animations.es5.js:7) at ZoneDelegate.invoke (zone.js:391) at Zone.run (zone.js:142) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at resolvePromise (zone.js:824) at resolvePromise (zone.js:795) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602)

以下是我的webpack配置

const path = require('path');

module.exports = {   entry: './src/main.ts',  
devtool: 'source-map',  
module: {
    rules: [
      {
        test: /\.tsx?$/,
        loaders: ['ts-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      },
      {
        test: /\.(html|css)$/, 
        loader: 'raw-loader',
        exclude: /\.async\.(html|css)$/
      }
    ]   },   
 resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]   },   
 output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')    } };

• angular : 4.3.6
• typescript: 2.9.2

- Night Monger

---

你能试一下这个吗? loadChildren: 'src/app/mycomponent/mycomponent.module#MyComponentModule' - Muhammed Albarmavi

@MuhammedAlbarmawi 是的，我试过了，但没有起作用。我尝试了各种不同的变化 :( - Night Monger

你能确认 WebPack 是否按预期创建了捆绑包吗？我认为它会为每个惰性模块创建带有编号的捆绑包，因此请在你的 dist 文件夹中查找类似于 1.bundle.js 的内容。 - Reactgular

我们的打包确实创建了捆绑包，但只是bundles.js而不是单独的块。在bundles.js中，我可以看到我的组件及其标记。 - Night Monger

Answer 1

对于其他需要帮助的人，我无法弄清楚我的路径出了什么问题。我的队友解决了这个问题，在路由模块中进行了更改：

import { MyComponentModule } from './myComponentModule/MyComponent.module';

然后在加载中调用该类名。

{
    path: 'myComponent',
    loadChildren: ()=> MyComponentModule
},

尽管这样做起作用了，但我不知道为什么旧的那个没有起作用，尽管我给出了完全相同的路径。

- Night Monger

---

谢谢你的解决方案，这样看起来更好了... 你找出导致错误的原因了吗？ - Martin

Answer 2

您可以使用相对路径，从路由模块所在的位置开始：

{
    path: 'mycomponent',
    loadChildren: '../mycomponent/mycomponent.module#MyComponentModule'
}

似乎Angular 6已更改了要求，使得loadChildren必须始终是相对路径。我在将应用迁移到新版本时遇到了这个问题。

请参见此处的更改：

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

更新的文件现在说“亲戚”。

- Reactgular

---

尝试过，但没有成功。我正在使用Angular 4。请更新我的问题并附上版本堆栈。 - Night Monger