https://github.com/micro-lc/angular14-template
Template project to create a micro-lc plugin using Angular 14
https://github.com/micro-lc/angular14-template
angular micro-lc microfrontend
Last synced: over 1 year ago
JSON representation
Template project to create a micro-lc plugin using Angular 14
- Host: GitHub
- URL: https://github.com/micro-lc/angular14-template
- Owner: micro-lc
- License: mit
- Created: 2023-05-08T09:14:34.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-14T11:52:40.000Z (about 3 years ago)
- Last Synced: 2025-01-24T17:45:15.676Z (over 1 year ago)
- Topics: angular, micro-lc, microfrontend
- Language: TypeScript
- Homepage: https://micro-lc.io
- Size: 114 KB
- Stars: 0
- 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 14 Template
Boilerplate for an Angular 14 [micro-lc parcel](https://micro-lc.io/docs/guides/applications/parcels). It implements the
necessary features to work both standalone and in micro-lc.
## 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
```
### Build
To make the internal routing work in micro-lc, a custom script that removes the `` tag from the generated HTML has
to be executed at the end of the build process.
If you don't whish to execute this step, simply change the build script in the `package.json`:
```diff
- 8 "build": "ng build && node plugins/post-html.js",
+ 8 "build": "ng build",
```
> **Warning**
>
> If you change the output directory, remember to change line 4 of the script (located in `plugins/post-html.js`) accordingly.
## 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": {
"angular14-parcel": {
"integrationMode": "parcel",
"route": "./angular14-parcel/", // <-- must have the ending "/", should have the starting "."
"entry": "/my-micro-lc-angular14-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">
[...]