MoonsetFertilizer

Library of common UI components and other useful bits.

Add the library to a project

Add dependency:

npm i moonset-fertilizer

$3

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

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

$3

`javascript

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

loadBrandSpecific(environment);

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

$3

`html



`

$3

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

`javascript
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.

`javascript
constructor(private lang: LanguageService) {}
`

$3

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

`javascript
@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.

$3

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

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

$3

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

`javascript
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

`javascript
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

$3

- 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?