Angular 15 foi lançado com uma tonelada de novos recursos suculentos

mas descobri uma coisa sobre a qual as pessoas estão reclamando, que alguns arquivos estão faltando agora quando você usa ng newou npm init @angular@latestpor um bom motivo - para simplificar o novo projeto - algumas pessoas precisam de alguns ou todos eles de volta, neste artigo irei ajudá-lo a restaurar cada um deles, mas só o faça se precisar

1. arquivos de ambientes

esta é provavelmente a mudança mais perceptível, porque todos os estão usando para o URL da API, a pergunta aqui antes de entrarmos em como restaurá-los, você tem um URL de API para produção e local (ou mais, local, dev, stg , produto …)

se sua resposta for não e você sempre usa apenas um link, então não se preocupe, apenas crie um environment.tsarquivo simples e exporte todas as variáveis ​​que você estava usando, mas ignore as production: false | trueque estavam lá

se a resposta for sim, você precisará de um pouco mais de esforço, mas ainda assim muito fácil

crie o seu environment.tse environment.prod.tscomo antes e novamente ignoreproduction: false | true

em seguida, no angular.jsonarquivo dentro project/projects/project-nam/architect/build/configurations/production, adicione estas linhas

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

para ler mais sobre isso, visite a documentação do Angular

2. arquivo karma

karma.conf.jsarquivo também não está lá - as pessoas geralmente o alteram para adicionar cobertura de código - então, novamente, depois de adicioná-lo, você precisará alterar angular.jsono arquivo interno /projects/learn-ngrx/architect/test/optionse adicionar

"options": {
  ...
  "karmaConfig": "karma.conf.js"
}

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/learn-ngrx'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ],
      check: {
        global: {
          statements: 80,
          branches: 80,
          functions: 80,
          lines: 80
        }
      }
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

3. Arquivo de teste

o test.tsarquivo é menos raramente modificado e, em alguns casos, é melhor adicionar um script em vez de modificá-lo, caso, por exemplo, você queira que ele falhe se houver algum erro, você deve adicionar um arquivo (por exemplo. fail-on-error.js) com

console.error = function(message?: any): void {
    fail(`Test contained console error:\n${message}`);
};

"options": {
  ...
  "scripts": ["fail-on-error.js"]
}

"options": {
  "main": "src/test.ts",
  ...
}

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    <T>(id: string): T;
    keys(): string[];
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { 
    errorOnUnknownElements: true,
    errorOnUnknownProperties: true
  }
);

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);

o polyfills.tstambém foi removido, acredito que foi o arquivo menos modificado, mas a equipe Angular nos deu uma alternativa melhor para adicionar o caminho do polyfill diretamente ao angular.jsonarquivo

por exemplo, se você quiser core-js/actual/array/from, pode apenas modificar /projects/nutritionApp/architect/build/options/polyfillspara ser

"polyfills": [
  "zone.js",
  "core-js/actual/array/from"
],

5. browserslistrc

Na verdade, isso é direto, basta criar o .browserslistrcarquivo na raiz do projeto e pronto, leia a documentação do Angular para obter mais informações

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord . Interessado em Growth Hacking? Conheça o Circuito .