moonset-fertilizer v0.0.40
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?
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago