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?