My angular project is a non-standalone component and modules. In order to reduce the initial bundle size, @defer is one if the options.

I have been wondering if it is possible to use in non-standalone project. If it only works on standalone components, can you provide me the steps?

Steps I tried to do:

1. Create a sample standalone project
2. Imported CommonModule package
3. Used @defer in template component(html)
4. Run npm run build
5. Found no lazy chunk files after build.

My angular project is a non-standalone component and modules. In order to reduce the initial bundle size, @defer is one if the options.

I have been wondering if it is possible to use in non-standalone project. If it only works on standalone components, can you provide me the steps?

Steps I tried to do:

1. Create a sample standalone project
2. Imported CommonModule package
3. Used @defer in template component(html)
4. Run npm run build
5. Found no lazy chunk files after build.

• angular

1 Answer 1

Only standalone components can lazy-loaded with a @defer block.

https://angular.dev/guide/templates/defer#which-dependencies-are-deferred

In order for the dependencies within a @defer block to be deferred, they need to meet two conditions:

1. They must be standalone. Non-standalone dependencies cannot be deferred and are still eagerly loaded, even if they are inside of @defer blocks.
2. They cannot be referenced outside of @defer blocks within the same file. If they are referenced outside the @defer block or referenced within ViewChild queries, the dependencies will be eagerly loaded.