Angular 15 telah dirilis dengan banyak fitur baru yang menarik

tetapi satu hal yang saya temukan orang-orang mengeluh, bahwa ada beberapa file yang hilang sekarang ketika Anda menggunakan ng newatau npm init @angular@latestsementara itu untuk alasan yang baik — untuk membuat proyek baru menjadi sederhana — beberapa orang memerlukan beberapa atau semuanya kembali, dalam artikel ini saya akan membantu Anda memulihkan masing-masing, tetapi harap lakukan hanya jika perlu

1. file lingkungan

ini mungkin perubahan yang paling mencolok, karena semua orang menggunakannya untuk URL API, pertanyaannya di sini sebelum kita membahas cara memulihkannya, apakah Anda memiliki satu URL API untuk produksi dan lokal (atau lebih, lokal, dev, stg , produk…)

jika jawaban Anda adalah tidak dan Anda selalu menggunakan hanya satu tautan, maka jangan khawatir, buat saja environment.tsfile sederhana dan ekspor semua variabel yang Anda gunakan, tetapi abaikan production: false | trueyang ada di sana

jika jawabannya ya maka Anda akan membutuhkan sedikit usaha, tetapi tetap sangat mudah

buat Anda environment.tsdan environment.prod.tsseperti sebelumnya dan abaikan lagiproduction: false | true

lalu di angular.jsonfile di dalamnya project/projects/project-nam/architect/build/configurations/productiontambahkan baris-baris ini

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

untuk membaca lebih lanjut tentang itu, silakan kunjungi Dokumentasi Angular

2. berkas karma

karma.conf.jsfile juga tidak ada - orang biasanya mengubahnya untuk menambahkan cakupan kode - jadi sekali lagi setelah menambahkannya Anda perlu mengubah angular.jsonfile di dalamnya /projects/learn-ngrx/architect/test/optionsdan menambahkan

"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. Berkas percobaan

file test.tstersebut lebih jarang untuk dimodifikasi, dan dalam beberapa kasus lebih baik menambahkan skrip daripada memodifikasinya, jika misalnya Anda ingin gagal jika ada kesalahan, Anda harus menambahkan file (mis. fail-on-error.js) dengan

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

itu polyfills.tsjuga dihapus, saya percaya itu adalah file yang paling tidak dimodifikasi, tetapi tim Angular telah memberi kami alternatif yang lebih baik untuk menambahkan jalur polyfill langsung ke angular.jsonfile

misalnya jika mau core-js/actual/array/from, Anda bisa memodifikasi /projects/nutritionApp/architect/build/options/polyfillsmenjadi

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

5.browserlistrc

Sebenarnya ini mudah, buat saja .browserslistrcfile itu di root proyek dan itu saja, baca Dokumentasi Angular untuk info lebih lanjut

Lebih banyak konten di PlainEnglish.io . Mendaftar untuk buletin mingguan gratis kami . Ikuti kami di Twitter , LinkedIn , YouTube , dan Discord . Tertarik dengan Peretasan Pertumbuhan? Lihat Sirkuit .