Angular 15 est sorti avec une tonne de nouvelles fonctionnalités juteuses

mais une chose dont j'ai trouvé que les gens se plaignent, c'est qu'il manque des fichiers maintenant lorsque vous utilisez ng newou npm init @angular@latestpendant que c'est pour une bonne raison - pour simplifier un nouveau projet - certaines personnes ont besoin de tout ou partie d'entre eux, dans cet article je vais vous aider à restaurer chacun d'eux, mais ne le faites que si vous en avez besoin

1. fichiers d'environnements

c'est probablement le changement le plus notable, car tout le monde les utilise pour l'URL de l'API, la question ici avant d'entrer dans la façon de les restaurer, avez-vous une URL d'API pour la production et le local (ou plus, local, dev, stg , production …)

si votre réponse est non et que vous n'utilisez toujours qu'un seul lien, alors ne vous inquiétez pas, créez simplement un environment.tsfichier simple et exportez toutes les variables que vous utilisiez, mais ignorez production: false | truecelles qui s'y trouvaient

si la réponse est oui, alors vous aurez besoin d'un peu plus d'effort, mais toujours très facile

créer votre environment.tset environment.prod.tscomme avant et encore ignorerproduction: false | true

puis dans le angular.jsonfichier à l'intérieur project/projects/project-nam/architect/build/configurations/productionajouter ces lignes

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

pour en savoir plus à ce sujet, veuillez visiter la documentation angulaire

2. fichier karma

karma.conf.jsle fichier n'est pas là aussi - les gens le modifient généralement pour ajouter une couverture de code - donc encore une fois après l'avoir ajouté, vous devrez modifier angular.jsonle fichier à l'intérieur /projects/learn-ngrx/architect/test/optionset ajouter

"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. Fichier d'essai

le test.tsfichier est moins rarement à modifier, et dans certains cas il vaut mieux ajouter un script au lieu de le modifier, au cas où par exemple vous voudriez qu'il échoue s'il y a des erreurs il faut ajouter un fichier (ex. fail-on-error.js) avec

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

le polyfills.tsest également supprimé, je crois que c'était le fichier le moins modifié, mais l'équipe angulaire nous a donné une meilleure alternative pour ajouter le chemin polyfill directement au angular.jsonfichier

par exemple, si vous voulez core-js/actual/array/from, vous pouvez simplement modifier /projects/nutritionApp/architect/build/options/polyfillspour être

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

5. navigateurslistrc

En fait, c'est simple, créez simplement le .browserslistrcfichier à la racine du projet et c'est tout, lisez la documentation angulaire pour plus d'informations

Plus de contenu sur PlainEnglish.io . Inscrivez-vous à notre newsletter hebdomadaire gratuite . Suivez-nous sur Twitter , LinkedIn , YouTube et Discord . Intéressé par le Growth Hacking ? Découvrez Circuit .