angular - 错误 : Cannot find module 'app/MyComponent/MyComponent.module' Error: Cannot find module

Question

这与提到的非常相似 here但是评论或回答中提供的每个解决方案都没有解决我的问题。想看看是否还有其他我应该看的东西。我尝试了不同的路径，比如

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

但没有任何作用。我的和原来的问题最大的区别是，我们最近添加了 webpack，那是应用程序崩溃的时候。当我们不使用任何捆绑服务(webpack)并且一切都是单独的文件时，一切都很好。我的主页 home.module 也没有这个问题。其他所有页面或模块都会引发完全相同的问题。在实现方面，home 和其他模块之间并没有太大区别。

我的路由模块有这个

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

下面是完整的异常

bootstrap:51 ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/mycomponent/mycomponent.module' Error: Cannot find module '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

Answer 1

对于任何其他来到这里的人..我无法弄清楚我的路径有什么问题..我的队友让它工作..在路由模块中..我们改为

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

然后在load中调用这个类名

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

虽然这行得通，但我不知道为什么即使我给出了完全相同的路径，旧的也行不通。