Angular 15 został wydany z mnóstwem soczystych nowych funkcji

ale znalazłem jedną rzecz, na którą ludzie narzekają, że brakuje niektórych plików teraz, gdy używasz ng newlub npm init @angular@latestjest to dobry powód — aby uprościć nowy projekt — niektórzy ludzie potrzebują niektórych lub wszystkich z powrotem, w tym artykule pomóc ci przywrócić każdy z nich, ale proszę, rób to tylko wtedy, gdy jest to konieczne

1. pliki środowisk

jest to prawdopodobnie najbardziej zauważalna zmiana, ponieważ wszyscy używają ich do adresu URL interfejsu API, pytanie tutaj, zanim przejdziemy do sposobu ich przywrócenia, czy masz jeden adres URL interfejsu API zarówno dla produkcji, jak i lokalnego (lub więcej, local, dev, stg , prod…)

jeśli twoja odpowiedź brzmi „nie” i zawsze używasz tylko jednego łącza, nie martw się o to, po prostu utwórz prosty environment.tsplik i wyeksportuj wszystkie używane zmienne, ale zignoruj ​​te production: false | true, które tam były

jeśli odpowiedź brzmi „tak”, będziesz potrzebować nieco więcej wysiłku, ale nadal będzie to bardzo łatwe

stwórz swój environment.tsi environment.prod.tsjak poprzednio i ponownie zignorujproduction: false | true

następnie w angular.jsonpliku wewnątrz project/projects/project-nam/architect/build/configurations/productiondodaj te linie

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

aby dowiedzieć się więcej na ten temat, odwiedź dokumentację Angular

2. plik karmy

karma.conf.jspliku też tam nie ma — ludzie zwykle go zmieniają, aby dodać pokrycie kodu — więc ponownie po dodaniu będziesz musiał zmienić angular.jsonplik w środku /projects/learn-ngrx/architect/test/optionsi dodać

"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. Plik testowy

plik test.tsjest rzadziej modyfikowany, aw niektórych przypadkach lepiej jest dodać skrypt zamiast go modyfikować, na przykład w przypadku, gdy chcesz, aby się nie powiódł, jeśli są jakieś błędy, powinieneś dodać plik (np. fail-on-error.js) z

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

jest również polyfills.tsusuwany, uważam, że był to najmniej zmodyfikowany plik, ale zespół Angular dał nam lepszą alternatywę, aby dodać ścieżkę polyfill bezpośrednio do angular.jsonpliku

na przykład, jeśli chcesz core-js/actual/array/from, możesz po prostu zmodyfikować /projects/nutritionApp/architect/build/options/polyfills, aby być

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

5. lista przeglądarek

Właściwie jest to proste, po prostu utwórz .browserslistrcplik w katalogu głównym projektu i to wszystko, przeczytaj Angular Documentation , aby uzyskać więcej informacji

Więcej treści na PlainEnglish.io . Zapisz się do naszego bezpłatnego cotygodniowego biuletynu . Śledź nas na Twitterze , LinkedIn , YouTube i Discordzie . Zainteresowany Growth Hackingiem? Sprawdź obwód .