Angular 15 wurde mit einer Menge saftiger neuer Funktionen veröffentlicht

Aber ich habe festgestellt, dass sich die Leute über eine Sache beschweren, dass einige Dateien jetzt fehlen, wenn Sie sie verwenden, ng newoder npm init @angular@latestobwohl es einen guten Grund gibt - um ein neues Projekt zu vereinfachen -, brauchen einige Leute einige oder alle zurück, in diesem Artikel werde ich es tun helfen Ihnen, jeden von ihnen wiederherzustellen, aber tun Sie dies bitte nur, wenn Sie es brauchen

1. Umgebungsdateien

Dies ist wahrscheinlich die auffälligste Änderung, da sie jeder für die API-URL verwendet. Die Frage hier, bevor wir uns mit der Wiederherstellung befassen, haben Sie eine API-URL sowohl für die Produktion als auch für lokal (oder mehr, lokal, dev, stg , prod …)

Wenn Ihre Antwort nein ist und Sie immer nur einen Link verwenden, dann machen Sie sich keine Sorgen, erstellen Sie einfach eine einfache environment.tsDatei und exportieren Sie alle Variablen, die Sie verwendet haben, aber ignorieren Sie die production: false | truevorhandenen

Wenn die Antwort ja ist, brauchen Sie etwas mehr Aufwand, aber immer noch sehr einfach

Erstellen Sie Ihr environment.tsund environment.prod.tswie zuvor und wieder ignorierenproduction: false | true

fügen Sie dann in der angular.jsonDatei darin project/projects/project-nam/architect/build/configurations/productiondiese Zeilen hinzu

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

Um mehr darüber zu erfahren, besuchen Sie bitte die Angular-Dokumentation

2. Karma-Datei

karma.conf.jsDatei ist auch nicht da – die Leute ändern sie normalerweise, um Codeabdeckung hinzuzufügen – also müssen Sie nach dem Hinzufügen wieder die angular.jsonDatei darin ändern /projects/learn-ngrx/architect/test/optionsund hinzufügen

"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. Testdatei

Die test.tsDatei muss seltener geändert werden, und in einigen Fällen ist es besser, ein Skript hinzuzufügen, anstatt sie zu ändern, falls Sie beispielsweise möchten, dass sie fehlschlägt, wenn Fehler auftreten, sollten Sie eine Datei (z. B. fail-on-error.js) mit hinzufügen

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

Das polyfills.tswird auch entfernt, ich glaube, es war die am wenigsten modifizierte Datei, aber das Angular-Team hat uns eine bessere Alternative gegeben, um den Polyfill-Pfad direkt zur angular.jsonDatei hinzuzufügen

Zum Beispiel, wenn Sie möchten core-js/actual/array/from, können Sie einfach ändern , um /projects/nutritionApp/architect/build/options/polyfillszu sein

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

5. browserlistrc

Eigentlich ist das ganz einfach, erstellen Sie einfach die .browserslistrcDatei im Stammverzeichnis des Projekts und das ist alles, lesen Sie die Angular-Dokumentation für weitere Informationen

Weitere Inhalte auf PlainEnglish.io . Melden Sie sich für unseren kostenlosen wöchentlichen Newsletter an . Folgen Sie uns auf Twitter , LinkedIn , YouTube und Discord . Interessiert an Growth Hacking? Schauen Sie sich die Schaltung an .