https://github.com/ranile/ng-component-lazy-load-test

https://github.com/ranile/ng-component-lazy-load-test

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/ranile/ng-component-lazy-load-test
• Owner: ranile
• Created: 2021-12-21T15:06:20.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-21T15:06:37.000Z (almost 3 years ago)
• Last Synced: 2024-06-03T22:20:44.849Z (5 months ago)
• Language: TypeScript
• Size: 201 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Lazy Loading Angular Modules

This project serves as a proof-of-concept to demostrate how lazy loading works in Angular 13 with Ivy.

## Project Structure

There are two Angular applications

- `angular-components`

- `component-lazy-load-test`

### `angular-components`

This is an Angular workspace, created by passing `--no-create-application` to `ng new`. It houses components, which are Angular library projects placed inside `projects` directory. Each project contains one component which is lazy-loaded by the main application. In order to create a new component project, run the following command:

```shell

$ ng generate library 

```

Then edit the `.module.ts` file to import `BrowserModule` and `CommonModule`. This allows Angular features, like directives, to be used.

### `component-lazy-load-test`

This is the Angular application which imports and displays components from `angular-components`. The components are lazy-loaded.

Currently, the `app.component` imports the only available component, `angular-component-library`. See the `loadComponent` method to see how it is imported.

## Building

Building this project is a multi-step process.

First, build the components induvidually:

```bash

$ cd angular-components

$ ng build 

```

This will place the built package under `dist/` directory.

Now, run the main application:

```bash

$ cd component-lazy-load-test

$ ng serve

```

> Note: right now, the only available component, `angular-component-library` is imported and displayed by the main application. Any other component can be imported by running `npm install ../angular-components/dist/` once the Angular library project has been built.