base on A base functional Angular project was generated with Angular CLI version 17.0.7. # Boilerplate: Angular 17 Web client application A base functional Angular project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7. _Change `PromoBoilerplateAngular` to your project name._ ## Development server Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. ## Features Summary: - Base ctructure for starting project on Angular 17 - Configured environment - Authorization module with base auth forms, service, guards and state - State management by [NGXS](https://www.ngxs.io/) - Internalization by [ngx-translate](https://github.com/ngx-translate/core) - Testing by Karma ## Angular 17 The new Angular 17 version was released on November 8, 2023. And the [Valletta Software](https://www.vallettasoftware.com/) team is already ready to develop and implement solutions for your business based on this modern stack. ## Base ctructure We prepared base structure for new project. It has components and services what used in every real project. This boilerplate will help you get start new project faster. ## Authorization module Auth module has base logic and structure - AuthModule defines all auth entities - AuthService provides data from store, methods for components and dispathes auth actions - AuthApiServices makes requests to Auth endpoint - AuthState store data about user's authorization - AuthGuard provides CanActivate functions for security implementation - SignIn and SignUp components have forms for login and registration ## State management Included state managment by NGXS package. NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators. Also we configured following really useful plugins: - [Logger](https://www.ngxs.io/plugins/logger) outputs state and it's changes - [Storage](https://www.ngxs.io/plugins/storage) saves selected parts of store between app reloading. It uses localStorage and restores previous state - [Router](https://www.ngxs.io/plugins/router) allows to navigate by actions AuthState can be used as example (State, Actions, Selectors) for your new states. ## Internalization Native internalization in Angular very cumbersome and difficult. Internalization with [ngx-translate](https://github.com/ngx-translate/core) is so easy. Just create JSON dictionary `/assets/i18n/[lang].json` for each language and output it with translation pipe: `{{ 'MULTI-LEVEL.KEY' | translate }}`. ## Testing Karma is available in the boilerplate ", Assign "at most 3 tags" to the expected json: {"id":"7456","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"