Add Angular 15 Missing Files
Angular 15 has been released with a ton of juicy new features
but one thing I found people are complaining about, that there are some files are missing now when you use ng new or npm init @angular@latest while it’s for a good reason — to make new project simple — some people needs some or all of them back, in this article I will help you to restore each of them but please only do if you need to
1. environments files
note: start with Angular 15.1 you can use ng g environments to it automatically
this is probably the most noticeable change, because everyone is using them for the API URL, the question here before we go into how to restore them, do you have one API URL for both production and local (or more, local, dev, stg, prod …)
if your answer is no and you always use only one link, then don’t worry about it, just create a simple environment.ts file and export all variables you were using, but ignore the production: false | true that were there
if the answer is yes then you will need a bit more effort, but still very easy
create your environment.ts and environment.prod.ts as before and again ignore production: false | true
then in the angular.json file inside project/projects/project-name/architect/build/configurations/production add these lines
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]this was always the magic behind how the environmentbeing replace by its prod version on build
to read more about it please visit the Angular Documentation
2. karma file
note: start with Angular 15.1 you can use ng g config then choose karma to it automatically
karma.conf.js file is not there too — people usually change it to add code coverage — so again after adding it you will need to change angular.json file inside /projects/project-name/architect/test/options and add
"options": {
...
"karmaConfig": "karma.conf.js"
}here is a sample file for code coverage 80%
// 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
});
};to get up-to-date configuration version please visit the Angular Documentation
3. Test file
the test.ts file is less rarely to be modified, and in some cases it’s better to add a script instead of modifying it, in case for example you want it to fail if there are any errors you should add a file (eg. fail-on-error.js ) with
console.error = function(message?: any): void {
fail(`Test contained console error:\n${message}`);
};then inside /projects/project-name/architect/test/options
"options": {
...
"scripts": ["fail-on-error.js"]
}but if you want to replace the test.ts and not to add to it then instead of scripts add mainto be
"options": {
"main": "src/test.ts",
...
}one more change needed for this to work is to add the new test.ts inside the tsconfig.spec.json to look like
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts" <-----
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}sample test.tsto enable the errorOnUnknownElements and errorOnUnknownProperties
// 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';
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
errorOnUnknownElements: true,
errorOnUnknownProperties: true
}
);4. polyfills
the polyfills.ts is also removed, I believe it was the least modified file, but Angular team has given us a better alterative to add the polyfill path directly to the angular.json file
for example if you want core-js/actual/array/from you can just modify /projects/project-name/architect/build/options/polyfills to be
"polyfills": [
"zone.js",
"core-js/actual/array/from"
],and that’s all, read the Angular Documentation for more info
5. browserslistrc
note: start with Angular 15.1 you can use ng g config then choose browserslist to it automatically
Actually this is is straightforward, just create it .browserslistrc file in the root of the project and that’s all, read the Angular Documentation for more info
you can see example repo at this GitHub repo
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.
