Angular 15 è stato rilasciato con un sacco di nuove succose funzionalità

ma una cosa di cui ho scoperto che le persone si lamentano, che mancano alcuni file ora quando lo usi ng newo npm init @angular@latestmentre è per una buona ragione - per rendere semplice il nuovo progetto - alcune persone hanno bisogno di alcuni o tutti indietro, in questo articolo lo farò aiutarti a ripristinare ciascuno di essi, ma ti preghiamo di farlo solo se necessario

1. file ambienti

questo è probabilmente il cambiamento più evidente, perché tutti li usano per l'URL API, la domanda qui prima di entrare in come ripristinarli, hai un URL API sia per la produzione che per locale (o più, locale, dev, stg , prodotto…)

se la tua risposta è no e usi sempre un solo link, allora non preoccuparti, basta creare un semplice environment.tsfile ed esportare tutte le variabili che stavi usando, ma ignora quelle production: false | trueche c'erano

se la risposta è sì allora avrai bisogno di un po' più di impegno, ma comunque molto facile

crea il tuo environment.tse environment.prod.tscome prima e ancora ignoraproduction: false | true

quindi nel angular.jsonfile all'interno project/projects/project-nam/architect/build/configurations/productionaggiungi queste righe

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

per saperne di più visita la documentazione di Angular

2. file karma

karma.conf.jsanche il file non c'è - le persone di solito lo cambiano per aggiungere la copertura del codice - quindi di nuovo dopo averlo aggiunto dovrai cambiare angular.jsonil file all'interno /projects/learn-ngrx/architect/test/optionse aggiungere

"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. File di prova

il test.tsfile è meno raramente da modificare, e in alcuni casi è meglio aggiungere uno script invece di modificarlo, nel caso ad esempio si voglia che fallisca se ci sono degli errori si dovrebbe aggiungere un file (es. fail-on-error.js) con

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);

viene anche rimosso, credo fosse il polyfills.tsfile meno modificato, ma il team di Angular ci ha fornito un'alternativa migliore per aggiungere il percorso polyfill direttamente al angular.jsonfile

per esempio se vuoi core-js/actual/array/frompuoi semplicemente modificare /projects/nutritionApp/architect/build/options/polyfillsper essere

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

5. browserslistrc

In realtà questo è semplice, basta crearlo .browserslistrcfile nella radice del progetto e questo è tutto, leggi la documentazione di Angular per maggiori informazioni

Altri contenuti su PlainEnglish.io . Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord . Interessato al Growth Hacking? Scopri Circuito .