问题标签 [angular-router-loader]

我的文件夹结构如下：

在我想异步添加空缺路线的core文件夹中。app.routing.ts

我是这样做的：

我收到一个错误：

无法解决 '..\vacancy'

尽管文件夹中有文件夹空缺，app而在空缺内部有一个文件vacancy.module.ts，看起来像：

任何想法我做错了什么？

我无法直接前往子路线。我的网址是http://localhost:4201/home/profile但路由器跟踪以 url: '/home' 而不是 url: '/home/profile' 开头

路由器事件：NavigationStart platform-b​​rowser.es5.js:1028 NavigationStart(id: 1, url: '/home') platform-b​​rowser.es5.js:1028 NavigationStart {id: 1, url: "/home"}

这是由于将子路由加载为模块吗？

今天我创建了一个 ThemeForest，就像一个带有 angular 和 mvc 的网站，所以我有一个登录页面，它会加载仪表板页面，在仪表板页面中有很多图标，所以我点击图标，它将加载完全不同的布局每个模板的页面。

这是我的问题。

**

1. 我需要从当前嵌套视图中加载每个新布局。不想在嵌套视图下加载？

2) 并且该视图不是局部视图类型，它是一个新的 HTML 页面，其中包含来自当前文件的新 css 和 Js 文件引用。

3) 我不想在新的 Html 文件中加载当前的 Js 文件。

**

Angular js ui-Routing 技术是否通过使用页面中提到的 ui-view 来工作。所以在页面中我点击了图标，需要加载不同的母版页，所以现在发生的是母版页在仪表板页面下加载. 角度路由是否支持它。

所以我创建了一个示例演示：

$stateProvider

这是启动页面：

在这里，我正在加载仪表板页面：

这是在上面的 html 中加载的根路由器模板视图。

另一个母版页：

这是 plunker 演示： http ://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview：

现在，对于我的应用程序的每一次溃败，我正在加载确切的模块。这是我的做法：

如果我声明以下组件：HeaderComponent, MenuComponent, FooterComponent像app.module.ts这样：

• 我SiteIndexComponent和其他延迟加载的组件哭着说他们不知道HeaderComponent, FooterComponent, MenuComponent并要求声明它们。

但！

如果我HeaderComponent, FooterComponent, MenuComponent在SiteIndexModule和中声明SiteAccountModule- 这些哭泣HeaderComponent, FooterComponent, MenuComponent在两个地方声明并要求在上面包含SiteIndexModule和的任何模块中声明SiteAccountModule

PS如果我HeaderComponent, FooterComponent, MenuComponent只声明SiteIndexModule并且不使用这些SiteAccountModule- 一切都很好。问题只是当我想HeaderComponent, FooterComponent, MenuComponent在几个延迟加载的模块中使用时。

我该如何解决我的问题？

谢谢

如您所见，主模块中有 5 个。尝试加载登录时需要 14 秒才能加载。我认为登录组件正在等待完整布局组件。

任何人都可以请教，如果我已经正确处理了延迟加载。如果不是在这里怎么做？

> app.routes.ts

> 仪表板-routing.module.ts

我有这种情况。

我有两个 Angular 模块：AuthModule和DashModule. 这些模块中的每一个都有自己的.routing.ts文件。

然后，将每个模块导入到AppModule应用程序级别。

在代码中，这里：

auth.module.ts位于src/app/auth/auth.module.ts

auth.module.ts

src/app/auth/auth-module.routing.ts

DashModule也遵循与AuthModule

我的src/app/app.routing.ts样子是这样的：

我的src/app/app.module.ts样子是这样的：

现在，我可以同时进行加载DashModule和AuthModule延迟加载吗？如何？

给定以下模块，我如何创建路由，以便当应用程序加载此模块时，它将路由到CComponent并AComponent加载到命名的路由器出口search-results

app.module.ts

a.component.ts

我在路线上尝试了许多不同的东西：

使用上述配置，页面会加载，但AComponent不会加载到屏幕上。

如果我更新CComponent为具有以下内容：

然后一切似乎都正常，但是必须在父元素的构造函数中触发该导航似乎是错误的。

如果我更新子路由并替换{ path: 'a', component: AComponent, outlet: 'search-results' }为{ path: '', component: AComponent, outlet: 'search-results' }，路由器似乎在插座中正确加载了该组件，但该routerLinkActive指令似乎没有生效，因为active该类未添加到第一个 h3 并且更新routerLinktooutlets: { 'search-results': ['a'] }没有导航到AComponent后允许导航回BComponent。

我在上面尝试了许多变体，但都没有成功。

有没有办法配置路由，以便默认路由将加载CComponent到主要的未命名router-outlet和AComponent命名的search-results路由器插座中？

Plunkr

我想使用延迟加载，但我不明白为什么它不起作用，它给我错误“找不到模块”。
这是我的环境：
- Angular 5.2.1
- .NET Core 2
- Webpack 3.10.0
- angular-router-loader 0.8.2
- @angular/cli 1.6.5
我在 loadChildren 中尝试了不同的路径，但总是没有成功，我也是暂时的禁用所有警卫和儿童路由。我做错什么了？

文件夹

应用程序路由.module.ts

用户路由.module.ts

users.module.ts

webpack.config.js

tsconfig.json

错误信息

未处理的承诺拒绝：找不到模块“./ClientApp/app/components/users/users.module”。; 区域：角度；任务：Promise.then；值：错误：找不到模块“./ClientApp/app/components/users/users.module”。at vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:34015 at ZoneDelegate.invoke (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117428) at Object.onInvoke (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:5604) at ZoneDelegate.invoke (vendor.js?v =AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117427) at Zone.run (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117178) at vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117898 at ZoneDelegate.invokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117461) at Object. onInvokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:5595) at ZoneDelegate.invokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117460) at Zone.runTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117228) Error: Cannot find module './ ClientApp/app/components/users/users.module'。在http://localhost:5000/dist/vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:34015:9 ... [截断]

编辑

链接到 stackblitz 进行测试

我正在使用 angular-cli-1.6.3 来捆绑我的项目。我尝试将延迟加载的块名称重命名为有效的模块名称。但它不起作用。下面给出的代码片段，

Webpack 无法找到我尝试使用angular-router-loader延迟加载的模块。

我正在使用以下内容：
Webpack 2.2.1
Angular 5.2
angular-router-loader 0.8.2

通过 npm安装了angular-router-loader，并将加载器添加到我的webpack 配置::

项目布局如下所示：

在app.routing.ts 中：

属性.module.ts：

当我启动 webpack 开发服务器时，我可以在控制台中看到angular-router-loader正在替换app.routing.ts的loadChildren部分中定义的字符串：

但是我从 webpack 收到以下警告：

然后，当我尝试在浏览器中访问路径（http://localhost:3000/#/property/setup）时，我从浏览器控制台收到以下堆栈跟踪错误：

我也尝试用绝对路径替换loadChildren中的模块路径。例如

但是我从 webpack 得到了完全相同的警告，并且在浏览器控制台中出现了与上面一样的错误。
我想我已经从这里正确地遵循了安装/使用说明：https ://github.com/brandonroberts/angular-router-loader

非常感谢任何建议/帮助。