Angular 11 boilerplate with Spectre.css, i18n, static prerendering and some common resources.
Install everything with npm install
, then:
npm start
to start the project locally on http://localhost:4200 (accessible through local network)npm run start:fr
does the same using the French localenpm lint
to lint (the default configuration has not been modified)npm run extract
to extract the source language file in src/localenpm run build
to build for production, files are generated in dist/angular-boilerplate/browsernpm run prerender
does the same but it also prerenders routes defined in the prerender configuration in angular.json
Spectre.css, a lightweight CSS framework, is included with its set of pure CSS icons Icons.css.
i18n is done with the native package. It is currently configured to be in English in the source code and to have a French translation. The exact configuration is detailed below.
AutofocusDirective
: dynamically focuses an element
ConcatPipe
ForObjectPipe
: iterates through the keys of an objectJoinPipe
LastElementPipe
: returns the last element of an arraySplitPipe
ToFixedPipe
CoreModule
is supposed to contain global services and models. There are a few other useful files:
- core.constants.ts to store application constants (not to be confused with environment.ts)
- core.utils.ts to store simple functions you want to be able to use everywhere
ThemeModule
is supposed to contain global resources which can be used in templates (components, directives, pipes, etc.). You can also find a folder named styles containing the following files:
- custom-spectre.css.scss imports and configures Spectre.css
- main.scss defines global styles
- variables.scss stores global SCSS variables
This is supposed to contain modules which are likely to be imported in various places in the application.
The project has been initialized with Angular CLI and then modified.
.vscode/launch.json allows to attach the debugger to Chrome.
i18n has been configured like this:
- the source code is in English and there is a French translation
- language files are stored in src/locale
- the build command builds all the locales configured
- the base HREF is empty for the source code language and set as the language code for the translations
- a missing translation throws an error and stops the build
Nonexistent routes are redirected to home and scroll position restoration is enabled.