Angular 15 был выпущен с кучей сочных новых функций

но я обнаружил одну вещь, на которую люди жалуются, что некоторые файлы отсутствуют сейчас, когда вы используете ng newили npm init @angular@latestпо уважительной причине — чтобы упростить новый проект — некоторым людям нужно вернуть некоторые или все из них, в этой статье я расскажу помочь вам восстановить каждый из них, но, пожалуйста, делайте это только в том случае, если вам нужно

1. файлы окружения

это, вероятно, самое заметное изменение, потому что все используют их для URL-адреса API, вопрос здесь, прежде чем мы перейдем к тому, как их восстановить, есть ли у вас один URL-адрес API как для производства, так и для локального (или более, локального, dev, stg , прод…)

если ваш ответ «нет» и вы всегда используете только одну ссылку, то не беспокойтесь об этом, просто создайте простой environment.tsфайл и экспортируйте все переменные, которые вы использовали, но игнорируйте те production: false | true, которые там были .

если ответ да, то вам потребуется немного больше усилий, но все равно очень легко

создай свой environment.tsи environment.prod.tsкак раньше и снова игнорируйproduction: false | true

затем в angular.jsonфайле внутри project/projects/project-nam/architect/build/configurations/productionдобавьте эти строки

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

чтобы узнать больше об этом, посетите документацию Angular

2. файл кармы

karma.conf.jsфайла тоже нет — люди обычно меняют его, чтобы добавить покрытие кода — поэтому снова после его добавления вам нужно будет изменить angular.jsonфайл внутри /projects/learn-ngrx/architect/test/optionsи добавить

"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. Тестовый файл

test.tsфайл реже модифицируется, и в некоторых случаях лучше добавить скрипт вместо его изменения, например, если вы хотите, чтобы он не работал, если есть какие-либо ошибки, вы должны добавить файл (например. ) fail-on-error.jsс

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

также polyfills.tsудален, я считаю, что это был наименее измененный файл, но команда Angular дала нам лучшую альтернативу, чтобы добавить путь полифилла непосредственно в angular.jsonфайл .

например, если вы хотите core-js/actual/array/from, вы можете просто изменить /projects/nutritionApp/architect/build/options/polyfills, чтобы быть

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

5. список браузеров

На самом деле это просто, просто создайте .browserslistrcфайл в корне проекта и все, прочитайте документацию Angular для получения дополнительной информации .

Больше контента на PlainEnglish.io . Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter , LinkedIn , YouTube и Discord . Заинтересованы в хакинге роста? Проверьте Цепь .