Angular 15 เปิดตัวพร้อมคุณสมบัติใหม่มากมาย

แต่สิ่งหนึ่งที่ฉันพบว่าผู้คนบ่นคือมีไฟล์บางไฟล์หายไปเมื่อคุณใช้งานng newหรือnpm init @angular@latestในขณะที่ใช้งานด้วยเหตุผลที่ดี — เพื่อทำให้โปรเจ็กต์ใหม่ง่ายขึ้น — บางคนต้องการคืนบางส่วนหรือทั้งหมด ในบทความนี้ฉันจะ ช่วยคุณกู้คืนแต่ละรายการ แต่โปรดทำในกรณีที่จำเป็นเท่านั้น

1. ไฟล์สภาพแวดล้อม

นี่อาจเป็นการเปลี่ยนแปลงที่เห็นได้ชัดเจนที่สุด เพราะทุกคนใช้ API URL นั้น คำถามก่อนที่เราจะอธิบายวิธีกู้คืน คุณมี API URL เดียวสำหรับทั้งเวอร์ชันที่ใช้งานจริงและในเครื่องหรือไม่ (หรือมากกว่านั้น ในเครื่อง, พัฒนา, 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"
  }
]

หากต้องการอ่านเพิ่มเติม โปรดไปที่เอกสารเชิงมุม

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

the polyfills.tsถูกลบด้วย ฉันเชื่อว่ามันเป็นไฟล์ที่แก้ไขน้อยที่สุด แต่ทีม Angular ได้ให้ทางเลือกที่ดีกว่าแก่เราในการเพิ่มเส้นทาง polyfill โดยตรงไปยังangular.jsonไฟล์

เช่น ถ้าคุณต้องการcore-js/actual/array/fromคุณก็แค่แก้ไข/projects/nutritionApp/architect/build/options/polyfillsให้เป็น

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

5. browserslistrc

ที่จริงแล้วสิ่งนี้ตรงไปตรงมา เพียงแค่สร้าง.browserslistrcไฟล์ในรูทของโปรเจ็กต์ แค่นั้น อ่านเอกสารประกอบเชิงมุมสำหรับข้อมูลเพิ่มเติม

เนื้อหาเพิ่มเติมที่PlainEnglish.io สมัครรับจดหมายข่าวรายสัปดาห์ฟรีของ เรา ติดตามเราได้ที่Twitter , LinkedIn , YouTubeและDiscord สนใจในการแฮ็คการเติบโตหรือไม่? ตรวจสอบวงจร