Angular 15가 수많은 새로운 기능과 함께 출시되었습니다.

하지만 사람들이 불평하는 한 가지는 지금 사용할 때 ng new또는 npm init @angular@latest새 프로젝트를 간단하게 만들기 위한 합당한 이유가 있는 동안 일부 파일이 누락되어 있다는 것입니다. 어떤 사람들은 파일의 일부 또는 전부를 다시 필요로 합니다. 각각을 복원하는 데 도움이 되지만 필요한 경우에만 수행하십시오.

1. 환경 파일

이것은 아마도 가장 눈에 띄는 변화일 것입니다. 모두가 API URL에 사용하고 있기 때문입니다. 복원 방법에 대해 알아보기 전에 프로덕션 및 로컬(또는 그 이상, local, dev, stg)에 대해 하나의 API URL이 있습니까? , 제품 ...)

귀하의 대답이 아니오이고 항상 하나의 링크만 사용하는 경우 걱정하지 마십시오. 간단한 파일을 만들고 사용하고 있던 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.jsfile 도 거기에 없습니다. 사람들은 일반적으로 코드 적용 범위를 추가하기 위해 변경합니다. 따라서 파일을 추가한 후에 다시 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. 브라우저리스트rc

실제로 이것은 간단 .browserslistrc합니다. 프로젝트의 루트에 파일을 생성하기만 하면 됩니다. 자세한 내용 은 Angular 문서 를 참조하세요.

PlainEnglish.io 에서 더 많은 내용을 확인하세요 . 무료 주간 뉴스레터 를 신청 하십시오. Twitter , LinkedIn , YouTube 및 Discord 에서 팔로우 하세요 . 그로스 해킹에 관심이 있으십니까? 회로 를 확인하십시오 .