https://github.com/micro-lc/angular12-template
Template project to create a micro-lc plugin using Angular 12
https://github.com/micro-lc/angular12-template
angular micro-lc microfrontend
Last synced: over 1 year ago
JSON representation
Template project to create a micro-lc plugin using Angular 12
- Host: GitHub
- URL: https://github.com/micro-lc/angular12-template
- Owner: micro-lc
- License: mit
- Created: 2022-01-08T10:21:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-16T16:02:07.000Z (over 1 year ago)
- Last Synced: 2025-01-24T17:45:16.289Z (over 1 year ago)
- Topics: angular, micro-lc, microfrontend
- Language: TypeScript
- Homepage: https://micro-lc.io
- Size: 524 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Angular 12 Template
Boilerplate for an Angular 12 [micro-lc parcel](https://micro-lc.io/docs/guides/applications/parcels). It implements the
necessary features to work both standalone and in micro-lc.
> ⚠️ Warning: This repository is no longer maintained.
## Local development
First thing you need to do is install the dependencies running
```sh
npm install
```
Once you have the dependencies in place, run
```sh
npm run start
```
to spin up the application.
Tests can be run with
```sh
npm run coverage
```
## Use in micro-lc
Applications build with this template can be used as-is in micro-lc as [parcels](https://micro-lc.io/docs/guides/applications/parcels).
An example configuration may be:
```json5
{
"applications": {
"angular12-parcel": {
"integrationMode": "parcel",
"route": "./angular12-parcel/", // <-- must have the ending "/", should have the starting "."
"entry": "/my-micro-lc-angular12-parcel/", // <-- must have the ending "/"
"injectBase": true // <-- must be "true" if hash routing is not used
}
}
}
```
### Internal routing
The internal routing of the application is already set up to work in micro-lc, meaning that the base url of the internal
routes is dynamically computed on the bases of micro-lc ``, as explained in the
[official documentation](https://micro-lc.io/docs/guides/applications/parcels/#injectbase).
> **Note**
>
> If you whish to use a hash router in your application, change `app-routing.module.ts` file as such:
>
> ```diff
> - 17 imports: [RouterModule.forRoot(routes)],
> + 17 imports: [RouterModule.forRoot(routes, { useHash: true })],
>
> - 19 providers: [{ provide: APP_BASE_HREF, useValue: baseUrl() }]
> + 19
> ```
### Assets
To correctly load assets in micro-lc, they should be put in `src/assets/` folder, and referenced using the `assetUrl`
[pipe](https://angular.io/guide/glossary#pipe).
A running example can be found in the `Home` component:
```html
![logo]()
```
### `zone.js`
Angular applications need [`zone.js`](https://github.com/angular/angular/tree/main/packages/zone.js) library to run, which
is not bundled in micro-lc. Therefore, you need to import it as a `` in you micro-lc entrypoint **before** any
micro-lc related module.
```html
<!DOCTYPE html>
<html lang="en">
<head>
[...]
<script type="module" src="https://cdn.jsdelivr.net/npm/zone.js@0.13.0/dist/zone.min.js">
[...]