When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package @ngx-translate/core. The app config isn't essential but very practical if you want to change some values without rebuilding and deploying your app. Very inspired by this MS DevBlog!
After multiple app creations and copying the same files over and over again I put the main logic inside a submodule utils folder. Now I can import the submodule in every new project I start and use it like an npm package. If you want to learn more about submodules:
I will reference to this source code:
To have a better overview which files we will create and how it should look like in the end:
Setting File Setup
First we have to define where the config file lives - normally i put it under assets/customization.
Create a new json file and add some content - mine looks like the following:
Now we have to define a constant (or use the environment file) to set the settings file's path. I created this object in the app.module.ts:
Create a new service for your app ng g s app-config. This should be the middleware service between the app and the generic submodule:
You may have recognised the HttpBackend in the constructor - this is important if you have active http interceptors! Creating a HttpClient with HttpBackend, the interceptors getting ignored!
Beside the service, create a new file with the app specific config interface:
Let's create the generic service inside your submodule library:
And add a file to define the default config interface:
The service just makes an http call to the defined assets file and loads the content. If everything works as expected it will get set the result to a static property to be available from the entire application!
Put everything together
The last thing we have to do is actually calling it - switch back to your app.module.ts and add the following provider and the app init factory! (if you don't need the translation part, remove it!)
You can use your app config properties like this:
Language Files Setup
Add to properties your environment file or object which we created in the app config section:
Don't forget to change the path to your translation files! Mine look like the following:
I'm using ngx-translate for my i18n - it's a great!
npm i @ngx-translate/core @ngx-translate/http-loader
Add this to your imports to load your translation files per http:
Same story as above - add a service to your shared folder which is specific for this app and add this to it: (the middleware isn't necessary - but maybe a needed abstraction)
The getCookie and setCookie are just util functions - you will find them here if you need them:
My translation service adds some automatic detecting logic - you can delete it if you don't need it. The important part is the init function!
npm i -D @nx/storybook
npm i -D @storybook/angular
nx g @nx/storybook:configuration <project-name>
I created the config inside the main app to share some configs/modules. My stories are located at libs/shared/ui. That's why I had to
Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.
Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple!
iOS - Native
To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the