【问题标题】:Angular v6 - Lazy Loaded Routes Not LoadingAngular v6 - 延迟加载的路由未加载
【发布时间】:2018-05-26 21:25:49
【问题描述】:

更新

这似乎不应该在 Angular 5 中工作 - 但由于某种原因它是。 loadChildren 值必须是纯字符串或 LoadChildrenCallback。我已经尝试过回调 - 使用 Observable - 但许多问题指出这总是会破坏延迟加载。只需使用纯字符串选项


更新到 Angular 6 后,使用 CLI v6. 我有一个延迟加载的路由设置如下

import { BLOG_CONFIG } from './BLOG_CONFIG';

const blogPath = BLOG_CONFIG.blogPath;
const categoriesPath = BLOG_CONFIG.categoriesPath;
const categoriesModulePath = BLOG_CONFIG.categoriesModulePath;

const routes: Routes = [
   { path: `${blogPath}/${categoriesPath}`, loadChildren: categoriesModulePath }
];

博客配置为:

export const BLOG_CONFIG = {
  blogPath: 'blog',
  postsPath: 'post',
  categoriesPath: 'categories',
  categoriesModulePath: './modules/categories/categories.module#CategoriesModule',
}

当我导航到blog/categories 路由时,出现控制台错误:

ERROR Error: Uncaught (in promise): Error: Cannot find module "./modules/categories/categories.module.ngfactory".
Error: Cannot find module "./modules/categories/categories.module.ngfactory".

如果我改变路线,loadChildren 直接使用字符串就可以了!

const routes: Routes = [
  { path: `${blogPath}/${categoriesPath}`, loadChildren: './modules/categories/categories.module#CategoriesModule' }
];

这在 Angular 5 中没有发生。我在这里遗漏了一些简单的东西吗!?

注意:当它与字符串一起使用时,我会得到 ng serve --aot 的 CLI 输出

chunk {modules-categories-categories-module-ngfactory} modules-categories-categories-module-ngfactory.js, modules-categories-categories-module-ngfactory.js.map (modules-categories-categories-module-ngfactory) 70.5 kB  [rendered]

我认为这是 webpack 读取 BlogConfig 对象的问题,但不确定

【问题讨论】:

  • 您声明了一个名为 categoriesModulePath 的 const,但您没有在 routes 数组中使用它。我认为这不会解决问题,但有一点需要注意。如果它确实修复它会很有趣。
  • ` './modules/categories/categories.module#CategoriesModule',` 看起来这条路径是错误的。故事结束;)
  • @R.Richards 实际上它可以解决问题。
  • 你总是可以创建一个 plunker 或 stackblitz(我更喜欢第二个选项)
  • @R.Richards 我已经直接使用了 const 和 config - 两者都不起作用。路线是正确的,就好像我直接将它用作字符串然后构建块一样。否则在构建过程中没有错误,但没有创建块

标签: angular angular-cli angular-cli-v6


【解决方案1】:

试试

loadChildren: BLOG_CONFIG.categoriesModulePath 

【讨论】:

  • 我尝试过并使用该值作为常量。奇怪的是它在 v5 中有效。该块根本没有生成 - 必须看看我是否可以在 StackBlitz 上重现。顺便说一句,我没有反对
  • 这是可能的,但这是一个错误,也许你必须将它归档到 angular/webpack github ;)
猜你喜欢
  • 1970-01-01
  • 2017-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-13
  • 1970-01-01
  • 2017-04-08
  • 2015-03-28
相关资源
最近更新 更多