MoonsetFertilizer

Library of common UI components and other useful bits.

Add the library to a project

Add dependency:

npm i moonset-fertilizer

Include assets from library

In angular.json, add the following to the list of assets:

{
  "glob": "**/*",
  "input": "./node_modules/moonset-fertilizer/src/assets",
  "output": "assets"
}

app.module.ts

import { MoonsetFertilizerModule, loadBrandSpecific } from 'moonset-fertilizer';
import { environment } from 'src/environments/environment';

loadBrandSpecific(environment);

@NgModule({
    declarations: [...],
    imports: [MoonsetFertilizerModule],
})

app.component.html

<fert-dialogs></fert-dialogs>
<fert-toasts></fert-toasts>
<fert-router></fert-router>

app.component.ts

Add brand to the global Window variable so you can access the brand variable.

declare global {
  interface Window {
    brand: string;
  }
}

Add the LanguageService as a dependency here so that it is instantiated and active from the very beginning. Otherwise, the language might not be detected correctly during the initial page load.

constructor(private lang: LanguageService) {}

styles.scss

In styles.scss in your project, add the styles you want, e.g.:

@import 'moonset-fertilizer/src/styles/variables.scss';
@import 'moonset-fertilizer/src/styles/buttons.scss';

or just add @import 'moonset-fertilizer/src/styles.scss'; to add all style files.

tsconfig.base.json

Include the following, this helps VSCode recognize tags from the library.

"paths": {
  "moonset-fertilizer/*": [
    "./node_modules/moonset-fertilizer/*"
  ]
}

Language handling

The moonset-fertilizer library offers two classes to support common language use-case. For this it requires @ngx-translate/core to be installed as well.

`LanguageService`

detects initial language or uses browser default
keeps track of current language
offers method switchLanguage which updates the URL to have the new language

export class SomeService  {
  constructor(private languageService: LanguageService) {}

  foo() {
    let currentLang = this.languageService.current;
  }

`LanguageGuard`

A CanActivate guard which checks if the URL contains the language (currently only handles URLs with only one parameter, i.e. :lang), and if not adds it

const routes: Routes = [
  {
    path: ':lang',
    component: AppComponent,
    canActivate: [LanguageGuard],
  },
]

Library development

For documentation regarding developing & releasing the library, check the README.md in the root of the workspace.

Common issues

VSCode doesn't recognize imports / tags from the library

Include the path to the library in tsconfig.base.json compiler options (see installation instructions for details)
Make sure the component you are trying to use is exported in the MoonsetFertilizerModule, and also in public-api.ts, and that there are no build issues
VSCode's language resolver struggles with Ivy, so if you use a local build, use the --prod flag
Restarting the Angular Language server in VSCode sometimes helps as well: Ctrl + Shift + P > Angular: Restart Angular Language server
When installing a local version of the library, instead of pointing to it directly (e.g. npm i ../dist/library), go to the library's dist folder, use npm pack to create a tar ball, and install that (npm i ../dist/librar/library-0.1.0.tgz)
Note: (14.August) VSCode recognizes the tags fine in the demo app in the same workspace, but complains when I use it in another app. Currently I installed the library pointing to the local build. Maybe the issue will resolve itself once it's a published library?