Angular 15 đã được phát hành với rất nhiều tính năng mới hấp dẫn

nhưng có một điều tôi thấy mọi người đang phàn nàn, rằng hiện tại có một số tệp bị thiếu khi bạn sử dụng ng newhoặc npm init @angular@latesttrong khi đó là vì lý do chính đáng — để làm cho dự án mới trở nên đơn giản — một số người cần lấy lại một số hoặc tất cả chúng, trong bài viết này tôi sẽ giúp bạn khôi phục lại từng cái nhưng vui lòng chỉ làm nếu bạn cần

1. tập tin môi trường

đây có lẽ là thay đổi đáng chú ý nhất, bởi vì mọi người đang sử dụng chúng cho URL API, câu hỏi đặt ra ở đây trước khi chúng tôi đi vào cách khôi phục chúng, bạn có một URL API cho cả sản xuất và cục bộ (hoặc nhiều hơn nữa, local, dev, stg , sản phẩm…)

nếu câu trả lời của bạn là không và bạn luôn chỉ sử dụng một liên kết, thì đừng lo lắng về điều đó, chỉ cần tạo một environment.tstệp đơn giản và xuất tất cả các biến bạn đang sử dụng, nhưng bỏ qua các production: false | truebiến ở đó

nếu câu trả lời là có thì bạn sẽ cần nỗ lực hơn một chút, nhưng vẫn rất dễ dàng

tạo của bạn environment.tsvà environment.prod.tsnhư trước đây và một lần nữa bỏ quaproduction: false | true

sau đó trong angular.jsontệp bên trong project/projects/project-nam/architect/build/configurations/productionthêm những dòng này

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

để đọc thêm về nó, vui lòng truy cập Tài liệu góc

2. tệp nghiệp chướng

karma.conf.jstệp cũng không có ở đó — mọi người thường thay đổi tệp để thêm phạm vi mã — vì vậy, sau khi thêm tệp, bạn sẽ cần thay đổi angular.jsontệp bên trong /projects/learn-ngrx/architect/test/optionsvà thêm

"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. Hồ sơ kiểm tra

tệp test.tshiếm khi bị sửa đổi hơn và trong một số trường hợp, tốt hơn là thêm tập lệnh thay vì sửa đổi nó, ví dụ: trong trường hợp bạn muốn nó bị lỗi nếu có bất kỳ lỗi nào, bạn nên thêm tệp (ví dụ: fail-on-error.js) với

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

tệp polyfills.tscũng bị xóa, tôi tin rằng đó là tệp ít bị sửa đổi nhất, nhưng nhóm Angular đã cung cấp cho chúng tôi một giải pháp thay thế tốt hơn để thêm trực tiếp đường dẫn polyfill vào angular.jsontệp

ví dụ nếu bạn muốn core-js/actual/array/from, bạn chỉ có thể sửa đổi /projects/nutritionApp/architect/build/options/polyfillsthành

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

5. danh sách trình duyệt

Trên thực tế, điều này rất đơn giản, chỉ cần tạo .browserslistrctệp trong thư mục gốc của dự án và đó là tất cả, hãy đọc Tài liệu góc để biết thêm thông tin

Thêm nội dung tại PlainEnglish.io . Đăng ký nhận bản tin miễn phí hàng tuần của chúng tôi . Theo dõi chúng tôi trên Twitter , LinkedIn , YouTube và Discord . Quan tâm đến hacking tăng trưởng? Kiểm tra Mạch .