Angular 15 ha sido lanzado con un montón de características nuevas y jugosas

pero una cosa de la que encontré que la gente se queja, que faltan algunos archivos ahora cuando usa ng newo npm init @angular@latestmientras es por una buena razón, para simplificar el nuevo proyecto, algunas personas necesitan recuperar algunos o todos, en este artículo lo haré. ayudarlo a restaurar cada uno de ellos, pero solo hágalo si es necesario

1. archivos de entornos

este es probablemente el cambio más notable, porque todos los están usando para la URL de la API, la pregunta aquí antes de entrar en cómo restaurarlos, ¿tiene una URL de API para producción y local (o más, local, dev, stg , prod…)

si su respuesta es no y siempre usa solo un enlace, entonces no se preocupe, simplemente cree un environment.tsarchivo simple y exporte todas las variables que estaba usando, pero ignore las production: false | trueque estaban allí

si la respuesta es sí, necesitará un poco más de esfuerzo, pero aún así es muy fácil

crea tu environment.tsy environment.prod.tscomo antes y otra vez ignoraproduction: false | true

luego en el angular.jsonarchivo dentro project/projects/project-nam/architect/build/configurations/productionagrega estas líneas

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

para leer más al respecto, visite la documentación de Angular

2. archivo karma

karma.conf.jsEl archivo tampoco está allí, la gente generalmente lo cambia para agregar cobertura de código, por lo que nuevamente, después de agregarlo, deberá cambiar angular.jsonel archivo dentro /projects/learn-ngrx/architect/test/optionsy agregar

"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. Archivo de prueba

el test.tsarchivo se modifica con menos frecuencia y, en algunos casos, es mejor agregar un script en lugar de modificarlo, en caso de que, por ejemplo, desee que falle si hay algún error, debe agregar un archivo (por ejemplo, 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);

the polyfills.tstambién se eliminó, creo que fue el archivo menos modificado, pero el equipo de Angular nos ha brindado una mejor alternativa para agregar la ruta de polyfill directamente al angular.jsonarchivo

por ejemplo, si lo desea core-js/actual/array/from, puede modificarlo /projects/nutritionApp/architect/build/options/polyfillspara que sea

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

5. browserslistrc

En realidad, esto es sencillo, solo .browserslistrccréelo en la raíz del proyecto y eso es todo, lea la documentación de Angular para obtener más información .

Más contenido en PlainEnglish.io . Regístrese para recibir nuestro boletín semanal gratuito . Síganos en Twitter , LinkedIn , YouTube y Discord . ¿Interesado en el Growth Hacking? Visita Circuito .