问题标签 [angular-router-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
674 浏览

angular - 如何使用 angular-router-loader 异步加载儿童

我的文件夹结构如下:

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

我是这样做的:

我收到一个错误:

无法解决 '..\vacancy'

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

任何想法我做错了什么?

0 投票
1 回答
207 浏览

angular - Angular 无法导航到子路径

我无法直接前往子路线。我的网址是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"}

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

0 投票
1 回答
645 浏览

angularjs - Angular ui-router 是否支持嵌套视图中的不同主布局页面(新 Html 页面)

今天我创建了一个 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:

0 投票
1 回答
3217 浏览

angular - 角4。如何为延迟加载的子模块声明组件/导入模块?

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

如果我声明以下组件:HeaderComponent, MenuComponent, FooterComponentapp.module.ts这样:

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

但!

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

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

我该如何解决我的问题?

谢谢

0 投票
1 回答
494 浏览

angular - 登录组件最初以 Angular 4 加载需要很长时间

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

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

> app.routes.ts

> 仪表板-routing.module.ts

0 投票
1 回答
143 浏览

angular - 使用自己的路由延迟加载 ngModules

我有这种情况。

我有两个 Angular 模块:AuthModuleDashModule. 这些模块中的每一个都有自己的.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样子是这样的:

现在,我可以同时进行加载DashModuleAuthModule延迟加载吗?如何?

0 投票
1 回答
1642 浏览

angular - 出口的角度默认路径

给定以下模块,我如何创建路由,以便当应用程序加载此模块时,它将路由到CComponentAComponent加载到命名的路由器出口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-outletAComponent命名的search-results路由器插座中?

Plunkr

0 投票
8 回答
20461 浏览

angular - Angular 5延迟加载错误:找不到模块

我想使用延迟加载,但我不明白为什么它不起作用,它给我错误“找不到模块”。
这是我的环境:
- 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 进行测试

0 投票
2 回答
12990 浏览

angular - 在 Angular 4 延迟加载中用模块名称替换块名称

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

0 投票
0 回答
460 浏览

angular - 延迟加载具有 angular-router-loader 错误的模块,找不到模块“。”

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

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