Angular 15 comes with exciting new features. However, some users have reported missing files when using ng new or npm init @angular@latest. This was done to simplify new project creation, but if you need these files back, follow the steps below:
1. Restoring environments files
Starting from Angular 15.1, you can use ng g environments to automatically create environment files. If you only have one API URL for both production and local environments, create a simple environment.ts file and export the variables you need, ignoring the production: false | true property.
If you have multiple URLs and need more effort, create environment.ts and environment.prod.ts files. Ignore the production: false | true property, then modify the angular.json file under project/projects/project-name/architect/build/configurations/production by adding:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
2. Restoring karma file
Starting from Angular 15.1, use ng g config and choose karma to generate the karma.conf.js file. People typically modify this file to add code coverage. After adding the file, update the angular.json file under /projects/project-name/architect/test/options with:
"options": {
// ...
"karmaConfig": "karma.conf.js"
}
For a sample code coverage configuration of 80%, use the provided karma.conf.js.
3. Restoring test file
The test.ts file is rarely modified, but you can add a script instead of modifying it. For example, if you want tests to fail on any errors, create a file (e.g., fail-on-error.js) with the following content:
console.error = function (message?: any): void {
fail(`Test contained console error:\n${message}`);
};
Then, inside /projects/project-name/architect/test/options, add:
"options": {
// ...
"scripts": ["fail-on-error.js"]
}
Alternatively, to replace the test.ts file instead of adding to it, use:
"options": {
"main": "src/test.ts",
// ...
}
Don't forget to update the tsconfig.spec.json file to include the new test.ts.
4. Restoring polyfills
The polyfills.ts file is also removed in Angular 15. You can directly add the polyfill path to the angular.json file. For example, to include core-js/actual/array/from, modify /projects/project-name/architect/build/options/polyfills:
"polyfills": [
"zone.js",
"core-js/actual/array/from"
],
5. Creating browserslistrc
Simply create a .browserslistrc file in the root of the project to configure browser compatibility.
Remember, these steps are only necessary if you require the specific functionalities. Make sure to consult the Angular Documentation for more information.