Background Video not loading after implementing Lazy Loading in Angular

Question

So, I have been practicing Angular during these days, and I encountered this issue while implementing lazy loading. My video doesn't load; if it does, it is not muted, and after refreshing the webpage, it won't load again.

This is how it is setup in HTML:

<video class="background-video" autoplay loop muted>
  <source src="assets/main-page-pc.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Now, when I created the project, I did not use ng new web-name --no-standalone, so I had to manually create app-routing.module.ts. I have a home component that contains a home.module.ts file and, of course, the contents of the website. I don't use the default app.component for anything.

My app-routing.module.ts looks like this:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule) // Lazy loading the home module
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

and home.module.ts like this:

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([{ path: '', component: HomeComponent }])
  ]
})

I truly don't have any idea what is going on. The video is in the right location, and it was loading perfectly before adding lazy loading. Also, after implementing that, every time I use ng serve, I get this message:

"Watch mode is enabled. Watching for file changes... NOTE: Raw file sizes do not reflect development server per-request transformations."

Miguel G. · Accepted Answer · 2025-01-13 03:21:03Z

Answer: As far as I know, when you are implementing lazy loading or routing, it seems that it causes a small delay to render the components. So, there's really no solution to this.

Make sure that you use <router-outlet> in your app.component.html and that all routing is setup properly. Then, using a <button> or <a>, create a small menu that takes you to components A and B. You will see that your video will load successfully when your webpage loads.

For example, if the video is in component A, then setting up A as your "default" page will load the video, and if you go from component B to A, it will do the same thing.

As for the part where I stated that the video is unmuted, instead of using the muted tag, I used [muted] = "'muted'". It worked like a champ! (Of course, make sure your video exists and you are using the right location)

This is my first time developing in Angular, so please don't judge the explanation lol!

Collectives™ on Stack Overflow

Background Video not loading after implementing Lazy Loading in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related