{"id":24548133,"url":"https://github.com/wizsolucoes/angular-starter-schematic","last_synced_at":"2025-04-15T18:42:01.604Z","repository":{"id":42773905,"uuid":"289368393","full_name":"wizsolucoes/angular-starter-schematic","owner":"wizsolucoes","description":"Schematic para gerar código bolierplate com a arquitetura de referência para aplicações Angular","archived":false,"fork":false,"pushed_at":"2023-01-30T12:33:28.000Z","size":564,"stargazers_count":8,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T23:44:04.875Z","etag":null,"topics":["angular","schematics","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@wizsolucoes/angular-starter","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wizsolucoes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-21T21:29:30.000Z","updated_at":"2024-03-21T11:03:42.000Z","dependencies_parsed_at":"2023-02-16T07:30:24.836Z","dependency_job_id":null,"html_url":"https://github.com/wizsolucoes/angular-starter-schematic","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizsolucoes%2Fangular-starter-schematic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizsolucoes%2Fangular-starter-schematic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizsolucoes%2Fangular-starter-schematic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizsolucoes%2Fangular-starter-schematic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wizsolucoes","download_url":"https://codeload.github.com/wizsolucoes/angular-starter-schematic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249131011,"owners_count":21217655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","schematics","typescript"],"created_at":"2025-01-22T23:16:08.686Z","updated_at":"2025-04-15T18:42:01.581Z","avatar_url":"https://github.com/wizsolucoes.png","language":"TypeScript","readme":"\u003c!-- omit in toc --\u003e\n# Wiz Angular Starter Schematic\n\n- [Sobre](#sobre)\n- [Uso](#uso)\n  - [Opções](#opções)\n    - [White-label](#white-label)\n- [Sobre a aplicação gerada](#sobre-a-aplicação-gerada)\n  - [Estrutura](#estrutura)\n  - [Recursos](#recursos)\n    - [Integração NGX Wiz SSO](#integração-ngx-wiz-sso)\n    - [Monitoramento com Application Insights](#monitoramento-com-application-insights)\n    - [Commit lint](#commit-lint)\n    - [Configuração Prettier](#configuração-prettier)\n    - [ReCAPTCHA](#recaptcha)\n    - [CI/CD](#cicd)\n- [Desenvolvimento do schematic](#desenvolvimento-do-schematic)\n  - [Por onde começar](#por-onde-começar)\n  - [Testando o schematic localmente](#testando-o-schematic-localmente)\n  - [1. Gerando um distribuível do schematic](#1-gerando-um-distribuível-do-schematic)\n    - [1a. Gere um distribuível do schematic](#1a-gere-um-distribuível-do-schematic)\n    - [1b. Gere uma nova aplicação e instale e execute o schematic](#1b-gere-uma-nova-aplicação-e-instale-e-execute-o-schematic)\n  - [2. Executando o schematic referenciando o código fonte](#2-executando-o-schematic-referenciando-o-código-fonte)\n    - [2a. Faça o build do schematic](#2a-faça-o-build-do-schematic)\n    - [2b. Execute com a CLI @angular-devkit/schematics-cli](#2b-execute-com-a-cli-angular-devkitschematics-cli)\n  - [Aprenda mais sobre schematics](#aprenda-mais-sobre-schematics)\n\n## Sobre\n\nSchematic para gerar código boilerplate com a arquitetura de referência corporativa para aplicações Angular. **Compatível somente com aplicações Angular 14.**\n\n## Uso\n\n**IMPORTANTE: Este schematic supõe que a aplicação usa SASS e deve ser executado em projetos novos, pois faz a sobrescrita de arquivos.**\n\n```bash\n# Gerar uma nova aplicação Angular\nng new my-app --style=scss\n\n# Entrar na pasta da nova aplicação\ncd my-app\n\n# Adicionar arquitetura\nng add @wizsolucoes/angular-starter\n\n# Executar testes\nnpm run test:ci\n\n# Executar lint\nng lint\n\n# Rodar aplicação\nng serve\n```\n\n**Obs:** Se você estiver usando o Git Bash e encontrar um erro ao executar `ng add @wizsolucoes/angular-starter`, execute o comando no Terminal do VSCode ou em PowerShell.\n\n**Obs:** É necessário fazer [a configuração da biblioteca NGX Wiz SSO](##configuração-sso) para explorar as funcionalidades do Starter.\n\n### Opções\n\n#### White-label\n\nAo executar o schematic, você deve escolher se a aplicação é 'White-label' ou não, respondendo este prompt na linha de comando:\n\n```bash\n? Essa aplicação é 'White-Label'? (Y/n)\n```\n\nPara entender mais sobre a arquitetura 'White-label', consulte [a documentação neste repositório.](./docs/white-label.md)\n\n## Sobre a aplicação gerada\n\n### Estrutura\n\nA aplicação tem 2 partes principais:\n\n- A parte \"eager\" que será carregada na inicialização na aplicação (o `main.js` bundle).\n- A parte \"lazy\" composta por funcionalidades da aplicação e que será carregada sob demanda como resultado da navegação do usuário.\n\n![\"arquitetura da aplicação\"](docs/arquitecture.jpeg \"arquitetura da aplicação\")\n\nEsta é a estrutura de pastas proposta:\n\n```bash\n|-- core\n    |-- [+] authentication\n    |-- [+] guards\n    |-- [+] http\n    |-- [+] interceptors\n    |-- [+] mocks\n    |-- [+] services\n    |-- [+] layout\n\n|-- features\n    |-- feature1\n        |-- feature1-routing.module.ts\n        |-- feature1.component.html\n        |-- feature1.component.scss\n        |-- feature1.component.ts\n        |-- feature1.component.spec.ts\n        |-- feature1.service.ts\n        |-- feature1.module.ts\n\n    |-- feature2 \n        |-- [+] components\n        |-- feature2-routing.module.ts\n        |-- feature2.service.ts\n        |-- feature2.module.ts\n\n|-- shared\n    |-- [+] components\n    |-- [+] models\n    |-- [+] directives\n    |-- [+] pipes\n\n|-- app-routing.module.ts\n|-- app.component.html\n|-- app.component.scss\n|-- app.component.ts\n|-- app.component.spec.ts\n|-- app.module.ts\n```\n\n\u003c!-- omit in toc --\u003e\n#### Core\n\nO core module deve conter serviços singleton, componentes universais e outros recursos em que há uma instância única. Autenticação, header, interceptors são exemplos de componentes que terá apenas uma instância ativa para a aplicação e será utilizado praticamente por todos os modules.\n\n\u003c!-- omit in toc --\u003e\n#### Features - Módulos Lazy Loaded\n\nMódulos lazy loaded ajudam a diminuir o tempo de inicialização da aplicação. Com o lazy load, o aplicativo não precisa carregar tudo de uma só vez. Ele só vai carregar o que o usuário espera ver. O módulo só irá carregar quando o usuário navegar para sua rota.\n\nObserve que se o módulo de _feature_ tiver mais de um componente, criamos sub-pastas para a cada componente (Ex. `feature2`) para que nenhuma pasta tenha mais de 6 arquivos conforme a [recomendação](https://angular.io/guide/styleguide#flat) do style guide do Angular.\n\n\u003e Para gerar um novo módulo *lazy loaded* use a o schematic `ng generate module` com a flag `--route`. Por exemplo, para gerar uma nova rota `/privacy`:\n\n```bash\n\nng g m features/privacy --route privacy --module app.module.ts\n```\n\n\u003c!-- omit in toc --\u003e\n#### Shared\n\nO shared é onde todos os componentes compartilhados, pipes, filters e services devem ir. O shared pode ser importado em qualquer module. Assim esses itens serão reutilizados. O shared module deve ser independente do restante do aplicativo. Portanto, não deve ter referências de outro módulo.\n\n\u003c!-- omit in toc --\u003e\n#### Referências\n\nA estrutura é inspirada nas seguintes fontes:\n\n- [Como estruturar componentes em grandes projetos - Bruno Brito](https://www.brunobrito.net.br/estruturando-components-angular/)\n- [How to architect epic Angular app in less than 10 minutes! - Tomas Trajan](https://medium.com/@tomastrajan/how-to-build-epic-angular-app-with-clean-architecture-91640ed1656)\n- [Application structure and NgModules - Angular coding style guide](https://angular.io/guide/styleguide#application-structure-and-ngmodules)\n\n### Recursos\n\nO seguintes recursos já estão implementados na aplicação starter. Para alguns dos recursos é necessário fazer uma configuração antes de utilizá-los.\n\n#### Integração NGX Wiz SSO\n\nIntegração com [NGX Wiz SSO](https://github.com/wizsolucoes/ngx-wiz-sso). Um módulo Angular feito para facilitar processo de autenticação e renovação de token no SSO da Wiz.\n\n\u003c!-- omit in toc --\u003e\n##### Configuração SSO\n\nAdicione as configurações de SSO do seu projeto aos arquivos da pasta [src/environments](./src/starter/files/src/environments).\n\n```typescript\nssoConfig: {\n    apiPath: '\u003c\u003curldo servico\u003e\u003e',\n    clientID: '\u003c\u003cCliente ID\u003e\u003e',\n    clientSecret: '\u003c\u003cCliente Secret\u003e\u003e',\n    grantType: '\u003c\u003cGrant Type\u003e\u003e',\n    authedPaths: ['\u003c\u003cdns a ser autenticado\u003e\u003e'],\n    scope: '\u003c\u003cscope do projeto\u003e\u003e',\n    options: {\n      // parâmetro opcional\n      ssoTimeOut: 60000, // parâmetro opcional, determina o timeout para o SSO\n      tokenAutoRefresh: true, // parâmetro opcional, determina se o token deve ser renovado\n      loginRoute: 'login', // url que aponta para onde redirecionar no caso de não haver token\n    },\n```\n\nO módulo do NGX Wiz SSO está importado no `CoreModule`.\n\n```typescript\n@NgModule({\n  declarations: [MainLayoutComponent, NavComponent],\n  imports: [\n    BrowserModule,\n    RouterModule,\n    HttpClientModule,\n    NgxWizSSOModule.forRoot(environment.ssoConfig), // \u003c--- import do NGX Wiz SSO\n  ],\n  exports: [MainLayoutComponent, NgxWizSSOModule],\n})\nexport class CoreModule {}\n```\n\nO componente `login` tem um botão de \"Entrar\" que exemplifica como usar o plugin. Para entender melhor as configurações consulte a documentação do projeto [NGX Wiz SSO](https://github.com/wizsolucoes/ngx-wiz-sso).\n\n#### Monitoramento com Application Insights\n\nMonitoramento de erros e de performance da aplicação Angular usando o [Azure Application Insights](https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript).\n\n\u003c!-- omit in toc --\u003e\n##### Configuração Application Insights\n\nAdicione sua chave de instrumentação ao [arquivo de variáveis por ambiente](./src/environments/environment.prod.ts):\n\n```typescript\nexport const environment = {\n  production: true,\n  appInsights: {\n    instrumentationKey: 'YOUR-APPLICATION-INSIGHTS-INSTRUMENTATION-KEY',\n  },\n};\n```\n\n#### Commit lint\n\nAs mensagens de commit devem seguir a convenção de [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) que é o padrão para todos os projetos da Wiz. Este projeto já tem commit lint configurado com [husky](https://github.com/typicode/husky) para te ajudar. [Consulte a convenção Angular se tiver dúvidas sobre o tipo correto para seu commit.](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type)\n\n#### Configuração Prettier\n\nO código gerado contem arquivos de configuração da ferramenta de formatação [Prettier](https://prettier.io/) e cria dois scripts npm:\n\n```json\n  \"scripts\": {\n    \"//\": \"...\",\n    \"format:check\": \"prettier **/*.{html,ts,js,json,scss} --check\",\n    \"format:write\": \"prettier **/*.{html,ts,js,json,scss} --write\"\n  },\n```\n\n#### ReCAPTCHA\n\nImplementação de Google ReCAPTCHA na tela de login. Adicione a chave pública do seu projeto aos arquivos da pasta [src/environments](./src/starter/files/src/environments).\n\n```typescript\nexport const environment = {\n  ...\n  reCaptcha: {\n    siteKey: 'YOUR-RECAPTCHA-KEY',\n  },\n};\n```\n\n#### CI/CD\n\nO código gerado irá conter um arquivo `azure-pipelines.yml` com a configuração de integração contínua de de deploy da aplicação.\n\n## Desenvolvimento do schematic\n\n### Por onde começar\n\n```bash\n# Clonar o repositório\ngit clone git@github.com:wizsolucoes/angular-starter-schematic.git\n\n# Entrar na pasta do schematic\ncd angular-starter-schematic\n\n# Instalar as dependências\nnpm install\n\n# Buildar schematic\nnpm run build\n\n# Executar os testes\nnpm test\n```\n\n### Testando o schematic localmente\n\nPara testar o schematic localmente, você pode gerar um distribuível do schematic, instalar como pacote em uma aplicação angular ou você pode executar o schematic referenciando o código fonte diretamente. \n\n### 1. Gerando um distribuível do schematic\n\n#### 1a. Gere um distribuível do schematic\n\n```bash\n# Instalar as dependências\nnpm install\n\n# Buildar schematic\nnpm run build\n\n# Gerar tarball eg. wizsolucoes-angular-starter-1.0.1.tgz\nnpm pack\n```\n\n#### 1b. Gere uma nova aplicação e instale e execute o schematic\n\n```bash\n# Gerar uma nova aplicação Angular em outra pasta para testar o schematic\nng new my-app --style=scss\n\n# Entrar na pasta da nova aplicação\ncd my-app\n\n# Instalar o distribuível do schematic\nnpm i --no-save ../\u003cpath-to\u003e/angular-starter-schematic/wizsolucoes-angular-starter-x.x.x.tgz\n\n# Executar schematic\nng g @wizsolucoes/angular-starter:ng-add\n```\n\n### 2. Executando o schematic referenciando o código fonte\n\n#### 2a. Faça o build do schematic\n\n```bash\n# Instalar as dependências\nnpm install\n\n# Buildar schematic\nnpm run build\n```\n\n#### 2b. Execute com a CLI @angular-devkit/schematics-cli\n(É preciso ter instalado a CLI com `ng i -g @angular-devkit/schematics-cli`)\n\n```bash\n# Gerar uma nova aplicação Angular em outra pasta para testar o schematic\nng new my-app --style=scss\n\n# Entrar na pasta da nova aplicação\ncd my-app\n\n# Exeucutar o schematic com @angular-devkit/schematics-cli\nschematics ../\u003cpath-to\u003e/angular-starter-schematic/src/collection.json:starter\n```\n\n### Aprenda mais sobre schematics\n\n- [Generating code using schematics](https://angular.io/guide/schematics)\n- [Total Guide To Custom Angular Schematics](https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwizsolucoes%2Fangular-starter-schematic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwizsolucoes%2Fangular-starter-schematic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwizsolucoes%2Fangular-starter-schematic/lists"}