0.0.40 • Published 3 years ago

moonset-fertilizer v0.0.40

Weekly downloads
141
License
-
Repository
-
Last release
3 years ago

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

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.36

4 years ago

0.0.34

4 years ago

0.0.35

4 years ago

0.0.33

4 years ago

0.0.31

4 years ago

0.0.32

4 years ago

0.0.30

4 years ago

0.0.28

4 years ago

0.0.29

4 years ago

0.0.27

4 years ago

0.0.25

4 years ago

0.0.26

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.19

4 years ago

0.0.16

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.8

4 years ago

0.0.5

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.1

4 years ago