94 questions
0
votes
1
answer
58
views
Lazy load a module that loads component using LayoutDialogConfig
I have a module that I want to lazy load and it's required only after user click a specific button. I have used Spartacus featuresModule to lazily load the module along with the LayoutConfig. However, ...
- 1
3
votes
0
answers
63
views
Persistent NG04002 ("No matching route found") navigating from lazy-loaded to eager route (Angular 15.2.9)
I'm facing a persistent routing issue in my Angular application (version 15.2.9) after refactoring some features into lazy-loaded feature modules. The error NG04002 ("Error: NG04002 Error: ...
- 33
1
vote
2
answers
698
views
Angular Router - how to destroy old component immediately when routerLink changes
In Angular, after a routerLink triggers a route change, the old component is only destroyed basically at the same time as the new component's initialization:
This is being a problem for me because I ...
- 475
1
vote
1
answer
58
views
Migration from Angular version 13 to 14 LoadChildrenCallback issue
loadChildren: () =>
import(/* webpackChunkName: "apc" */ 'advanced-payments-control')
.then((m) => m.AdvancedPaymentsControlModule)
.catch((e) => {
...
- 1,001
1
vote
2
answers
679
views
Child Router is not receiving second path - ignoring child path
This is hour 10, I've tried 20 differnet configurations. the first set works fine. the children under company only evaluates
localhost:4200/Employee-pub/1 -\> localhost:4200/Employee-pub/1
...
- 13
1
vote
0
answers
271
views
How to get Chunk names for child components in a lazy loaded angular standalone v17 app without associating them with any routes?
I have a standalone components angular application running on v17.0.9 and using lazy loading to load all the components via loadChildren and loadComponent for the main layout component and other ...
- 11
0
votes
2
answers
3k
views
Angular - dynamically importing module fails to load
I am trying to create an plugin-based architecture with Angular where I want to load a module dynamically based on my need and access its component.
Inside my service I have the following code.
...
- 3,047
1
vote
1
answer
1k
views
Preload all components when lazy loading standalone components for routing
With the usage of standalone components in angular 17, instead of using modules we can directly lazyLoad components. But the issue is how to preload in this case? Earlier when lazy loading modules we ...
1
vote
1
answer
291
views
Angular15 lazy loading not working if its not explicitly imported
Working with Angular15.
Create a lazy loading modules
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', patchMatch: 'full' },
{ path: 'dashboard', ...
- 7,508
2
votes
2
answers
7k
views
How to load routing module in angular 17 for RouterModule.forChild
I need to covert my Angular 16 project into Angular 17
And I used the routing module for lazy loading in Angular 16
my Angular 16 code was like this
@NgModule({
declarations: [DashboardComponent],
...
- 23
0
votes
0
answers
519
views
Angular module lazy load cache issue
I have used Angular 11 in my single page application (SPA). I have used lazy load module in app-routing.module.ts. The issue is when I redirect to that module/component, it get the results from ...
- 3,485
1
vote
1
answer
1k
views
Angular - lazy loading standalone component for multiple path's
Is it possible to lazy load standalone component for multiple path's? Is this a proper way to do it?
{ path: 'path1', loadComponent: () => import('./someComponent.component').then(c => c....
- 115
3
votes
1
answer
1k
views
How to show a loading status for Angular lazy-loaded routes?
I have an Angular 17 application which uses standalone components, the initial routes are set up like so in app.routes.ts
export const appRoutes: Array<Route> = [
{ path: '', redirectTo: '/...
- 34.6k
1
vote
1
answer
3k
views
How can i use @defer for Lazy loading in Angular
I saw recently that in Angular 17 you can simplify lazy loading by using the @defer directive. I'm wondering how to use it exactly to refactor my old code. Today I need to use the router for that but ...
- 1,008
1
vote
0
answers
412
views
Getting translate pipe(ngx-translate) not found error in lazy loaded remote module with module federation framewok in angular
I have a shell application on angular 13 version and a remote application on angular 16 version.I I am doing lazy loading of the remote app using Module Federation Framework.
In the remote app ...
- 21
0
votes
0
answers
474
views
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵmod') in Angular
I'm trying to create a micro service frontend in angular
Using this code for route :
import { loadRemoteModule } from './federation-utils';
import { Routes } from '@angular/router';
import { ...
- 3,872
0
votes
2
answers
319
views
Not able to serve my angular app after upgrading from Angular 8 to 9
My angular project is currently running in Angular 8 and I use HeroDevs\Hero-Loader (https://www.npmjs.com/package/@herodevs/hero-loader/v/2.0.1) for lazy loading of modules for a page containing tabs....
- 313
0
votes
0
answers
43
views
Angular Routing issue: Route parameter redirects to incorrect path
I'm facing an issue with Angular routing where I'm trying to navigate to a specific route that includes a route parameter, but it redirects me to a different path instead. I have a ToursComponent that ...
- 23
1
vote
1
answer
342
views
Angular - Why Lazy Load return an empty path?
I am having an issues with the Lazy Loading. I can navigate between the pages, to paths are correct, but the lazy loaded pages are empty: http://localhost:4200/contact and http://localhost:4200/tours
...
- 23
0
votes
0
answers
66
views
Angular Directive Type check for @Input property
I create a lazyLoad Directive to handle lazy load component.
@Directive({
selector: '[lazyComponent]',
})
export class LazyCompDirective<I, T extends LazyLoadedComponent<I>> implements ...
- 515
2
votes
0
answers
258
views
Angular lazy loading of components in dynamic routes
Problem
I have an Content Management System Angular application where all components are present in main component. Routes are created dynamically for this components (at runtime).
E.g. a page is ...
1
vote
1
answer
212
views
Can't bind 'ngIf' it isn't a known property of 'button'
I am trying to open the component in MatDialog in angular 13 & ionic 6. Here is the sample code of how I open the component in MatDialog.
Here my app.module.ts file
import { NgModule } from '@...
2
votes
1
answer
2k
views
Angular dynamic lazy loading of components
Problem
I have an Angular application where components are registered under a certain name to a global map using decorators. This name can then be used to dynamically create a route for this component ...
- 403
0
votes
0
answers
307
views
NG 13 update to NG 14/15: Throttling navigation to prevent the browser from hanging
Started this app 5 years ago with Angular 2, till Angular 13 the dynamic routes lazy loaded works fine (with canActivate DynamicPathGuard), after a upgrade/update to NG 14/15 the browsers keeps ...
1
vote
2
answers
3k
views
Using single component from library causes lazy-loaded modules to end up in main bundle
I've created a Bootstrap component library for angular along with a demo application. However when building the application, the main bundle size is massive. More remarkably, adding components to the ...
- 3,709
1
vote
1
answer
924
views
How to compile the dynamic modules using AOT Compiler in Angular 8
I am using Angular 8 with AOT compiler. I need to compile the modules dynamically when I click the button.
In that module file, the component is declared.
Testingmodule.ts
import { NgModule } from '@...
- 336
2
votes
2
answers
1k
views
Angular routing: Conditional route with library import
TL;DR
How can I have a conditional route with conditional import of the corresponding Angular library during build time, depending on a feature flag in the environment file?
Background
I'm having a ...
- 6,126
1
vote
0
answers
417
views
lazy loading with CanActive
I implemented lazy loading in my project and it works well: the components load only if the http route is requested.
but when I implement canActive to prevent some users from accessing: the user can ...
- 11
1
vote
0
answers
255
views
How to get the scroll position when navigating from one page to another, using lazy loading in angular 12
I have the list page. when i scroll down and click on one of the entry, it redirects to the detail page which opens up from the top. Now when i go back to the list page it should open up at the same ...
- 11
0
votes
1
answer
473
views
Angular 13 - Lazy load multiple components matching the same URL structure
I'm creating an Angular 13 app that has multiple components that can match the same URL although they would render different content (as in different components) based on the URL value. Thus I can ...
- 5,856
0
votes
1
answer
781
views
Angular: reactive module import does not find `formGroup` directive
I have already taken a look at this question which had a lot of answers (all the same) but it could not fix my problem.
Let me quickly lay out my project structure
@NgModule({
declarations: [...
2
votes
0
answers
767
views
Cannot guard lazy loaded module in Angular
I'm trying to have an auth guard on every page of my Angular app. I can't get this to work for lazily loaded modules using the import() syntax.
My lazy feature module:
const routes: Routes = [
{path:...
- 100
1
vote
0
answers
797
views
How to share components through lazy loaded module and app.module.ts?
The whole replication of my problem you can find on stackblitz
https://stackblitz.com/edit/angular-x7omka?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.module....
0
votes
0
answers
916
views
How to get page when I refresh angular route in browser
I have this router setup in my angular app (non-essential parts cut out for brevity):
#AppRoutingModule
const routes: Routes = [
{
path: '',
redirectTo: 'apprent',
pathMatch: 'full'
},
...
- 66
0
votes
1
answer
884
views
Angular lazy loading external styles and scripts on specific component causes layout glitch for brief second
as I already described in the title, I have some styles and script that I only want to load on one specific component but this causes a glitch in the view, looks like the page is displayed before the ...
- 11
0
votes
1
answer
873
views
Angular Lazy Loaded Component Re-renders on navigation
Our application is setup so users navigating to a certain set of routes are lazy loaded like below:
{
path: path1,
component: Cmp1,
loadChildren: () => LazyLoadedModule,
}
We use a router ...
- 805
2
votes
1
answer
53
views
My app's RouterModule isn't lazy loading posts
I am learning Angular and as a practice project, I am developing a front-end interface (with angular 13) for a Wordpress API served from a Docker container.
The angular app has to display the list of ...
- 69
0
votes
1
answer
4k
views
How to lazy load Angular Components of the home page?
I have my code as given below in app.component.html i.e. as soon as the user lands on the home screen; I want to lazy load the app-image-gallery & app-users-list and want to load them with some ...
- 105
2
votes
0
answers
427
views
Angular Router - Data missing within lazy loaded modules
I have a module with the routes defined something like below.
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: RoleListViewComponent
},
{
path: RolesRoutes....
- 149
1
vote
1
answer
879
views
I want to lazy load my third party libraries?
I am trying to lazy load the third-party libraries but I couldn't find any solution if anyone have any idea please share.
- 11
1
vote
2
answers
3k
views
Trying to lazy load custom themes dynamically based on angular material
I'm writing an angular 12 website with angular material.
This project supports several domains and on different domains it supposed to show different theme.
so what I'm trying to resolve here is to be ...
- 32.4k
0
votes
1
answer
552
views
runtime compiler is not loaded angular 8 when lazy loading modules are accessed over browser
I have an angular application where i use lazy loading for one of its module named 'security', i mentioned in routes array of app.routing.module.ts
const routes: Routes = [
{path:'path1',component:...
- 675
4
votes
1
answer
2k
views
Angular 12 - Lazy loading path module does'nt work
I have a jobs module which contains various components of my application. I want to do a lazy load of said module, however, it does not work when I try to access through the full path, that is, if I ...
- 453
3
votes
2
answers
2k
views
how to share same service instance between 2 lazy loaded modules - not at root
Is it possible to share the same instance for a service, between two lazy loaded modules, where that service is not provided at the root injector? Or at least, not provided until called upon?
E.g. I ...
- 3,220
2
votes
1
answer
2k
views
Does importing a component from a lazy loaded module elsewhere in the app circumvent lazy loading of this module in Angular 12?
We have some modules that come with their own navigation bars. These nav bars are actual components and they activated in the global HeaderComponent of the app as soon as the corresponding route is ...
- 2,924
1
vote
1
answer
2k
views
use browser animations module in my library
I have to used browser animations module in my angular library because of my date picker and I am using lazy loading so I got several modules in my project when I want import my library in my modules
...
0
votes
1
answer
781
views
Angular 11: Components and Directives not regognized inside Lazy Loaded Module
I want to split my angular project to load Website part in main module and application part in lazy loaded module.
While everything worked before, now I am getting plenty of errors about compoentns ...
- 1,005
0
votes
1
answer
399
views
Angular 11 - Lazy load routing issue
Trying to create CRUD opration with MEAN stack. Currently using Angular 11 cli, I've created lazy module.
the lazy module has add/edit/list components. To list the data, I'm using Angular materials. ...
- 1,028
1
vote
1
answer
2k
views
Angular Material with Lazy Loading Module
i already found that which looks similar but does not help me. Lazy loading Angular modules with latest Angular material design gives error
My problem is, that i have lazy loading modules. app-routing....
- 1,269
0
votes
0
answers
254
views
angular lazyload pages with same start path
I have a pretty big project and in order to reduce bundle size i decided to divide it into multiple modules with lazy load. and here is my app-routing
const routes: Routes = [
{
path: 'profile',
...
- 625