Angular2 RC5 延迟加载路由找不到模块答案

【问题标题】：Angular2 RC5 lazy load routing can´t find moduleAngular2 RC5 延迟加载路由找不到模块
【发布时间】：2016-08-12 13:18:28
【问题描述】：

我正在尝试在我的应用中实现 RC5 更改，但在我的路由中延迟加载模块时遇到了一些问题。

这是我的应用中受影响文件的结构：

/app
   /components/meda/meda.module.ts
   /components/meda/meda.routing.ts
   app.routing.ts

这是我的 app.routing.ts

const routes: Routes = [
  { 
    path: '', 
    redirectTo: 'init', 
    pathMatch: 'full'
  },
  { 
    path: 'init', 
    loadChildren: './components/init/init.module#InitModule' 
  },
  { 
    path: 'meda', 
    loadChildren: './components/meda/meda.module#MedaModule' 
  }
];

还有我的 meda.module.ts

@NgModule({
  imports: [ routing ],
})
export class MedaModule { }

我的应用程序可以很好地加载到 init 路由中，因为引导程序会加载 InitModule，但是一旦我尝试导航到 meda，就会得到以下信息

GET http://localhost/web/components/meda/meda.module 404 (Not Found)

似乎找不到模块位置。我也尝试过

loadChildren: 'app/components/meda/meda.module#MedaModule'

但没有运气；知道我做错了什么吗？

谢谢

【问题讨论】：

如果您使用工作流在不同的目录中为您的分发创建 js 文件（例如使用 gulp）。您必须引用该路径，而不是在打字稿中导入时用来引用的路径。所以它实际上是服务器上 .js 文件的路径，而不是应用程序结构中的 ts 文件，因此是 404。
但是服务器中的文件实际上是在一个bundle.app.js中，那么这将如何工作？
延迟加载是关于加载您并不总是需要的实现文件，因此最初不想加载。如果你有 bundle.app.js 中的代码并在你的应用程序启动时加载这个文件，你希望什么是延迟加载的，因为东西已经通过网络传输了（只有 html 文件要延迟加载？）。跨度>
如果您的意思是处理解释/编译，您应该查看angularjs.blogspot.de/2016/08/… 的 AoT 部分，这将在构建期间编译并创建您可以服务的工厂文件，因此您可以节省时间/性能客户
恕我直言，在那篇帖子vsavkin.com/… 中有一个很好的解释，可能适合您的需求，围绕“loadChildren 正确地告诉路由器何时且仅当用户获取 'contacts.bundle.js'导航到“联系人”，然后合并两个路由器配置，最后激活所需的组件”

标签： angular angular2-routing

【解决方案1】：

我有同样的问题，我根据 Thorsten Viel 的评论改变了我的路径。这是我的文件夹结构来说明；

/wwwroot
     /app
     /scripts

我的 .ts 文件位于“wwwroot/app”文件夹下。我使用“gulp-typescript”将 .ts 文件转换为“wwwroot/scripts”文件夹下的 .js。例如，如果您的 init.module.ts 路径为：wwwroot/app/components/init/init.module，而您的 .js 文件被转译为：wwwroot/scripts/components/init/init.module，您应该这样指定：

loadChildren: 'wwwroot/scripts/components/init/init.module#InitModule'

它应该工作，我希望它有所帮助。

【讨论】：

【解决方案2】：

写出不带前导的路径。或 ./ 或 /

loadChildren: 'components/init/init.module#InitModule'

地址的起点是你的html文件的位置。

【讨论】：