All notable changes to this project will be documented in this file.
This project adheres to Semantic Versioning.
If you project is generated from schematics v2.0.0 onward, you can always update to the latest version of schematics by running:
npm run updateIf this migration process fails for some reason, you will need to follow all the manual steps outlined below to update your project to the latest schematic.
pattern, but also the other kind like paths. [NVCTS-779]updateEslintOverridesRules to be more precise in replacement logic, and added selector for overrides on both *.ts and *.html [NVCTS-779]default imports (MAINT-12820).@ngrx/store@~11.0.0@ngrx/effects@~11.0.0karma.conf.js file.karma.conf.js to handle a single configuration file (WF-416).tsconfig.json to handle paths only from public_api (WF-400).animation integration.@bb-cli/bb-ang@bb-cli/bb-ang--inline-template option to widget schematic (WF-78)Add an "main" entry point to the package configuration (MAINT-11389)
Since the release of Angular 11.1.3, ng update fails to load the @bb-cli/schematics migrations because it doesn't recognize it as a valid package.
Even if the project isn't using Angular 11, the newest version of the CLI is automatically installed to perform the update (unless the NG_DISABLE_VERSION_CHECK=1 environment variable is set).
to apply this changes apply the following steps:
tslint.json to include the following configrationinside rules remove the following rules:
- 'use-input-property-decorator'
- 'use-output-property-decorator'
- 'use-host-property-decorator'
- 'use-life-cycle-interface'and add the following rules:
+ "component-class-suffix": true,
+ "contextual-lifecycle": true,
+ "directive-class-suffix": true,
+ "no-conflicting-lifecycle": true,
+ "no-host-metadata-property": true,
+ "no-input-rename": true,
+ "no-inputs-metadata-property": true,
+ "no-output-native": true,
+ "no-output-on-prefix": true,
+ "no-output-rename": true,
+ "no-outputs-metadata-property": true,
+ "template-banana-in-box": true,
+ "template-no-negated-async": true,
+ "use-lifecycle-interface": true,
+ "use-pipe-transform-interface": trueto apply this changes apply the following steps:
tsconfig.json to include the following configrationinside compilerOptions add:
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "downlevelIteration": true,inside angularCompilerOptions add:
+ "strictTemplates": true,tsconfig.app.json module to ES2020 instead of esNextprotractor.conf.js inside e2e applications- chromeOptions: { args: [ '--headless', '--disable-gpu', '--window-size=800,600' ] }
- jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ jasmine.getEnv().addReporter(new SpecReporter({
+ spec: {
+ displayStacktrace: StacktraceOption.PRETTY
+ }
+ }));- "@angular/core": "10.2.2",
+ "@angular/core": "~10.1.0",to apply this changes apply the following steps:
...
"scripts": {
"api:check": "../../node_modules/.bin/api-extractor run -c ./api-extractor.json",
"api:extract": "npm run api:check -- --local"
},
...Add an api-extractor.json file under each library folder. The content of the file should look like this.
Replace LIBRARY_NAME with the correct path name for the library.
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"extends": "../../api-extractor.json",
"mainEntryPointFilePath": "../../dist/libs/LIBRARY_NAME/public_api.d.ts",
"projectFolder": "."
} {
...
"scripts": {
"api:check": "npm run api:check:example-widget && npm run api:check:example-data-http",
"api:check:example-data-http": "cd libs/example-data-http && npm run api:check",
"api:check:example-widget": "cd libs/example-widget && npm run api:check",
"api:extract": "npm run api:extract:example-widget && npm run api:extract:example-data-http",
"api:extract:example-data-http": "cd libs/example-data-http && npm run api:extract",
"api:extract:example-widget": "cd libs/example-widget && npm run api:extract",
...
}
...
}{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"bundledPackages": [],
"compiler": {
"overrideTsconfig": {
"extends": "../../tsconfig.json",
"compilerOptions": {
"typeRoots": [
"./node_modules/@types"
]
}
}
},
"apiReport": {
"enabled": true,
"reportFolder": "<projectFolder>",
"reportTempFolder": "dist"
},
"docModel": {
"enabled": false
},
"dtsRollup": {
"enabled": false
},
"tsdocMetadata": {
"enabled": false
},
"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "warning"
}
},
"extractorMessageReporting": {
"default": {
"logLevel": "warning",
"addToApiReportFile": true
},
"ae-missing-release-tag": {
"logLevel": "none",
"addToApiReportFile": false
},
"ae-forgotten-export": {
"logLevel": "warning",
"addToApiReportFile": true
},
"ae-incompatible-release-tags": {
"logLevel": "none",
"addToApiReportFile": false
},
"ae-internal-missing-underscore": {
"logLevel": "none",
"addToApiReportFile": false
},
"ae-unresolved-inheritdoc-reference": {
"logLevel": "none",
"addToApiReportFile": false
},
"ae-unresolved-inheritdoc-base": {
"logLevel": "none",
"addToApiReportFile": false
},
"ae-missing-getter": {
"logLevel": "warning",
"addToApiReportFile": true
},
"ae-setter-with-docs": {
"logLevel": "none",
"addToApiReportFile": false
}
},
"tsdocMessageReporting": {
"default": {
"logLevel": "none"
}
}
}
}angular.json contains a i18n project option then build
with a single ng build command, instead of building each locale separately using the deprecated --i18n-file options.This allows you to use more of the standard i18n configuration.
node-sass version to ^4.0.0 to match peerDependencies of sass-loader.So your file should look like this:
{
...
"dependencies": {
...
"tslib": "^2.0.0"
}
...
}So your file should look like this:
{
...
"rules": {
...,
"no-implicit-dependencies": {
"severity": "warning",
"options": true
}
...
},
...
"linterOptions": {"exclude": ["test.ts"]}
}@bb-cli/bb-ang@4.3.0rxjs@~6.6.2@angular/localize for patch releases only (to align with the other @angular/* packages)Update Angular dependencies using ng update. This will allow these packages to
perform any migrations that they deem necessary.
ng update @angular/cli@10.1.0 @angular/core@10.1.0 --forceSet @angular/localize version to ~10.1.0 and rxjs version to ~6.6.2:
The peerDependencies of all libs in a project should be aligned with the package versions actually installed in the project. This means that development and tests can be performed against compatible versions of the target dependencies.
Any peerDependencies in package.json files inside libs packages should be updated to be compatible with the following versions:
@angular/animations: 10.1.0,
@angular/common: 10.1.0,
@angular/compiler: 10.1.0,
@angular/core: 10.1.0,
@angular/forms: 10.1.0,
@angular/platform-browser: 10.1.0,
@angular/platform-browser-dynamic: 10.1.0,
@angular/router: 10.1.0,
@ngrx/effects: 10.0.0,
@ngrx/store: 10.0.0,
rxjs: 6.6.2Note: This does not mean that the version must be locked - the semver range should reflect the most liberal version(s) the library supports.
So your file should look like this:
{
...
"compilerOptions": {
...,
"module": "ES2020"
},
...
}@bb-cli/bb-angUpdate to @bb-cli/bb-ang@~4.2.2:
npm install @bb-cli/bb-ang@~4.2.2 --save-dev^10.0.0@bb-cli/schematics@3.2.x to succeed without pre-installing ngrx (SDK-2258)@angular/localize as a dependency for appsAs of Angular 9 there is a new localization package that must be included to support translations. Install the package:
ng add @angular/localizeThe functionality is initialized by importing it in the polyfills.ts files:
import '@angular/localize/init';Note: running npm run update won't automatically update to this major version. To update to the new major version run:
npm run ng -- update "@bb-cli/schematics@^4.0.0"
ngrx as peerDependencies of widgets and libraries by default.Update all important dependencies using ng update. This will allow any these packages to
perform any migrations that they deem necessary.
ng update @angular/cli@10 @angular/core@10 @bb-cli/bb-ang@4Change the update script from version ^3 to ^4 for @bb-cli/schematics:
"scripts": {
"update": "ng update @bb-cli/schematics@^4",
}$ npm install --save-dev @bb-cli/bb-ang@~4.0.0Previously the supported language level for ngPackager was configured using the "ngPackage.lib" key in the package.json. This information is now part of the Typescript configuration and must be removed from the package.json of any libs in the project.
The peerDependencies of all libs in a project should be aligned with the package versions actually installed in the project. This means that development and tests can be performed against compatible versions of the target dependencies.
Any peerDependencies in package.json files inside libs packages should be updated to be compatible with the following versions:
@angular/animations: 10.0.0,
@angular/common: 10.0.0,
@angular/compiler: 10.0.0,
@angular/core: 10.0.0,
@angular/forms: 10.0.0,
@angular/platform-browser: 10.0.0,
@angular/platform-browser-dynamic: 10.0.0,
@angular/router: 10.0.0,
@backbase/foundation-ang: 6.0.0,
@ngrx/effects: 10.0.0-beta.0,
@ngrx/store: 10.0.0-beta.0,
core-js: 2.6.5,
rxjs: 6.5.5,
zone.js: 0.10.3Note: This does not mean that the version must be locked - the semver range should reflect the most liberal version(s) the library supports.
The engines specification in the project package.json should be updated to reflect the currently supported node and npm versions:
"engines": {
"node": "^10.13.0 || ^12.16.1",
"npm": "^6.11.0"
}@bb-cli/schematics@3.2.x to succeed without pre-installing ngrx (SDK-2258)tslib@1.9.0.@angular-devkit/schematics, @schematics/angular and tsickleFix the dependencies in the project's package:
npm install --save-exact @ngrx/store@8.1.0 @ngrx/effects@8.1.0
npm install --save-dev tslib@^1.9.0
npm uninstall @angular-devkit/schematics @schematics/angular tsickle@ngrx/store and @ngrx/effects modules by default@ngrx/store and @ngrx/effects as peerDependencies by default@bb-cli/bb-ang which have the following effectpackage:libs script to remove some properties from built libs which might exposes internal information, it will automatically remove any property starting with underscore or the property name one of the following author,publishConfig,rightsUpdate to @bb-cli/bb-ang@~3.14.0:
npm install @bb-cli/bb-ang@~3.14.0 --save-devNote: running npm run update won't automatically update to this major version. To update to the new major version run:
npm run ng -- update "@bb-cli/schematics@^3.0.0"
@backbase/foundation-ang@5.x@backbase/ui-ang.update script to latest version of schematics.Change the update script to:
{
...
scripts: {
...
"update": "ng update @bb-cli/schematics@^3"
}
}Install @backbase/ui-ang version 4.152.0 as a dependency using the following command:
npm install --save @backbase/ui-ang@4.152.0 @ng-select/ng-select@^2.19.0 @angular/cdk@8.0.0 bignumber.js@^9.0.0All import from the @backbase/foundation-ang/ui entry point should be changed to import directly from @backbase/ui-ang.
For example, an import declaration such as this:
import { AccountCardModule } from '@backbase/foundation-ang/ui'should become:
import { AccountCardModule } from '@backbase/ui-ang'bundle generate.@bb-cli/bb-ang which have the following effectUpdate to @bb-cli/bb-ang@~3.13.1:
npm install @bb-cli/bb-ang@~3.13.1 --save-devMake sure the version of @backbase/foundation-ang is 4.34.0:
npm install --save @backbase/foundation-ang@4.34.0externalSchematics throws (MAINT-9660)HttpClientModule is included in the app moduleHttpClientModule from data-module schematic (MAINT-9551)EXTRA_ENCODE_URI_PARAMS (fixes SDK-2132).
This is fixing a known bug in angular.Note: This fix won't automatically be available in @backbase/data-ang. Please review the release notes
from @backbase/data-ang to see when the DBS data modules are regenerated to receive this fix.
@backbase/foundation-ang is used.Note: Your project's version of @backbase/foundation-ang will not be upgraded automatically with npm run update.
To update to the minimum version of @backbase/foundation-ang for this fix, use 4.33.0:
npm install @backbase/foundation-ang@4.33.0As always, consult your other dependencies peerDependencies for required versions of @backbase/foundation-ang.
For that install it as a dev dependency using the following command:
$ npm install --save-dev @bb-cli/bb-ang@3.11.4HttpClientModule is included in the app moduleAs the data modules can no longer provide the HttpClientModule it must be
imported by the app module.
--configuration option to package:apps script does not work (MAINT-9449)create-provisioning-package command is moved to postpackage:apps script.Existing projects will only be updated if the package:apps script is defined as expected and postpackage:apps script does not exist.
In that case, the following changes will be made:
package:apps script in package.json updated to:{
...
scripts: {
...
"package:apps": "bb-ang build-apps --output-hashing --build-memory=4096"
}
}postpackage:apps script added to the package.json:{
...
scripts: {
...
"postpackage:apps": "bb-ang create-provisioning-package"
}
}If you have custom scripts and want to pass custom build parameters to the package:apps script, move bb-ang create-provisioning-package command to the postpackage:apps script.
angular.json (allows trailing commas, comments).vendorChunk option in angular.json.model.xml (MAINT-9341)Update to @bb-cli/bb-ang@~3.11.0:
npm install @bb-cli/bb-ang@~3.11.0--spec option (SDK-2088)@bb-cli/bb-ang which have the following effectThis won't be enabled automatically. It's technically a breaking change as it will cause items to be removed from the bundle which would have otherwise been included.
To enable this new functionality update @bb-cli/bb-ang to latest version and update npm run package:apps command in your package.json with "bb-ang build-apps --output-hashing --build-memory=4096 && bb-ang create-provisioning-package"
esNext in apps typescript config to make them compatible with auto generated lazy loading definitions.depth parameter which defines the level from which all items needs to be places in the same bundle.Warning: Bundling process cannot be reverted. Module imports will be extracted from AppModule and placed into bundle modules and LazyConfig will be passed to BackbaseCoreModule. This will change your app.module.ts file.
Please set the module in compilerOptions of your apps tsconfig.app.json to esNext:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": [],
"module": "esNext"
},
"include": ["src/**/*.ts"],
"exclude": ["src/test.ts", "src/**/*.spec.ts"]
}Warning: This is a beta version to get testing and early feedback for bundling automation. The API is not yet finalised, so it may break in future versions, and likely contains bugs.
Warning: This is a beta version to get testing and early feedback for bundling automation. The API is not yet finalised, so it may break in future versions, and likely contains bugs.
Warning: This is a beta version to get testing and early feedback for bundling automation. The API is not yet finalised, so it may break in future versions, and likely contains bugs.
{
...
"projects": {
"example-app": {
...
"architect": {
...
"build": {
builder: '@bb-cli/bb-ang:browser'
...
...Install it as a dev dependency using the following command:
$ npm i --save-dev @bb-cli/bb-ang@~3.8.0application/json endpoints (MAINT-8543)update script always updates to latest version of schematics.Important: If you generated your project on version @bb-cli/schematics@2.10.0 then your npm run update process will be broken. Please follow the manual steps below to ensure future upgrades.
Change the update script to:
{
...
scripts: {
...
"update": "ng update @bb-cli/schematics@^2"
}
}Remove the semver caret ^ from the @bb-cli/schematics devDependency. After the update it should be:
{
...
devDependencies: {
...
"@bb-cli/schematics": "2.10.1"
}
}--skipInstall flag to the generate project command.environment.shared.ts (see http://wa3.backbase.com/foundation/latest/howto/environments)Update each application's "environments/type.ts" file to make the "mockProviders" key optional and add an extra "shared" environment configuration.
export interface Environment {
readonly production: boolean;
readonly mockProviders?: Array<Provider>;
readonly bootstrap?: {
readonly pageModel: Item;
readonly services: ExternalServices;
};
}This will require an update to the apps "AppModule" to handle the case where "mockProviders" is undefined. In the apps "app/app.module.ts" file, add a default value (an empty array) where "mockProviders" is spread into the module providers.
@NgModule({
...
providers: [...environment.mockProviders || []],
...
})import { createMocksInterceptor } from '@backbase/foundation-ang/data-http';
import { Environment } from './type';
export const environment: Environment = {
production: false,
mockProviders: [createMocksInterceptor()],
};Add the new configuration to the "angular.json"
{
...
"projects": {
"example-app": {
...
"architect": {
...
"build": {
...
"configurations": {
...
"shared": {
"fileReplacements": [
{
"replace": "apps/tutorial-app/src/environments/environment.ts",
"with": "apps/tutorial-app/src/environments/environment.shared.ts"
}
],
}
}
...
}Install it as a dev dependency using the following command:
npm i --save-dev @bb-cli/bb-ang@3.6.0Item and ExternalServices in environments/type.ts.Update import statements in each application's environments/type.ts file.
ItemChange import of Item to
import { Item } from '@backbase/foundation-ang/core';ExternalServicesChange import of ExternalServices to
import { ExternalServices } from '@backbase/foundation-ang/start';We have added the ability to create your Application Container from your Angular
App's index.html file.
This won't be enabled automatically as it could cause unwanted code to end up in your
Application Container if you have standalone specific code in your index.html.
To enable this new functionality you can add the --extend-container flag to your
npm run package:apps command in your package.json.
Make sure the version of @bb-cli/bb-ang is ~3.5.0
For that install it as a dev dependency using the following command:
$ npm i --save-dev @bb-cli/bb-ang@~3.5.0@ng-bootstrap/ng-bootstrap to version 5.1.1.Make sure the version of @backbase/foundation-ang is ^4.12.0 and version of
@ng-bootstrap/ng-bootstrap is 5.1.1.
For that install it as a dependency using the following command:
$ npm i --save @backbase/foundation-ang@^4.12.0 @ng-bootstrap/ng-bootstrap@5.1.12.4.1 and 2.5.0 update schematics.BrowserModule, BrowserAnimationsModule and HttpClientModule modules. (SDK-1833).In each library folder add tslint.json file next to public_api.ts file with the following content:
{
"extends": "../../tslint.json",
"rules": {
"import-blacklist": [
true,
"rxjs/Rx",
{ "@angular/platform-browser": ["BrowserModule"] },
{ "@angular/platform-browser/animations": ["BrowserAnimationsModule"] },
{ "@angular/common/http": ["HttpClientModule"] }
]
}
}Please add "module": "es2015" to the compilerOptions of your apps tsconfig.app.json:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": [],
"module": "es2015"
},
"include": ["src/**/*.ts"],
"exclude": ["src/test.ts", "src/**/*.spec.ts"]
}npm run api:check and npm run api:extract to support packages that have multiple entry points.public_api.ts (SDK-1601).Make sure the version of @bb-cli/bb-ang is ~3.4.0
For that install it as a dev dependency using the following command:
$ npm i --save-dev @bb-cli/bb-ang@~3.4.02.1.0 and 2.1.1 update schematics.In package.json file, define new scripts for the api check:
{
"name": "my-project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"build": "ng build",
"e2e": "ng e2e",
...
"api:check": "bb-ang check-api",
"api:extract": "bb-ang extract-api",
},
...
}For that install it as a dev dependency using the following command:
$ npm i --save-dev @bb-cli/bb-ang@$~3.2.0In apps/*/environments/type.ts file, define a new type Environment that a will be used to add strong typing to the declaration of the environment configuration.
// apps/my-example-app/environments/type.ts
import { Provider } from '@angular/core';
import { Item } from '@backbase/core-ang';
import { ExternalServices } from '@backbase/web-sdk-api-ang';
export interface Environment {
readonly production: boolean;
readonly mockProviders: Array<Provider>;
readonly bootstrap?: {
readonly pageModel: Item;
readonly services: ExternalServices;
};
}To make use of this type, the environment files should be updated to declare the "environment" variable to be of ths new "Environment" type. This should be done for all environment files in the Apps (usually "environment.ts" and "environment.prod.ts").
// apps/my-example-app/environments/environment.ts
import { Environment } from './type';
// ...
export const environment: Environment = // ...Having made these changes, the bootstrap process in main.ts will fail to compile as TypeScript is unable to narrow the type within the closure. We fix this by extracting the type outside of the closure:
if (environment.bootstrap) {
const { services, pageModel } = environment.bootstrap;
start(services).then((app) => {
app.bootstrap(pageModel, { parentName: '', index: 0 });
});
}pageModel and services from dev-mock.js to environment.ts (SDK-1763)The page model and external services used for standalone development was previously defined in apps/*/assets/dev-mock.js. This definition should now be in the apps/*/environments/environment.ts file. The page model and external services should be a exported as the pageModel
and services properties (respectively) on the environment object.
For example:
// apps/my-example-app/environments/environment.ts
import { Item } from '@backbase/foundation-ang/core';
import { ExternalServices } from '@backbase/foundation-ang/start';
const services: ExternalServices = {};
const pageModel: Item = {
name: 'app-container',
properties: {},
children: [],
};
export const environment = {
production: false,
mockProviders: [],
bootstrap: {
pageModel,
services,
},
};To make use of this, the bootstrapping of the application for standalone development has also been moved from apps/*/assets/dev-mock.js into the /apps/*/src/main.ts.
// apps/my-example-app/src/main.ts
import { environment } from './environments/environment';
// ...
const start = registerSingleApp((extraProviders: Array<StaticProvider>) =>
platformBrowserDynamic(extraProviders).bootstrapModule(AppModule),
);
if (environment.bootstrap) {
start(environment.bootstrap.services).then((app) => {
app.bootstrap(environment.bootstrap.pageModel, { parentName: '', index: 0 });
});
}Having made these changes, the apps/*/assets/dev-mock.js file(s) should be redundant. The script tag can be removed from the apps/*/src/index.html and the file deleted from the project.
itemNamenpm run package:apps -- --cx-version 5.8.0.0to create a CX5 provision package.
index.hbs and model.xml from the apps.update schematic was added. This will enable to consume changes made to the project structure via npm run update command starting from 2.0 version.npm i -D @bb-cli/bb-ang^2.0.1-pr.52package:apps command in package.json to:"package:apps": "bb-ang package-apps --output-hashing --build-memory=4096",protractor-accessibility-plugin is removed from the project schematic.--prefix option and just inherit prefix from the project (reads from tslint).package.json from 2.0.0 to 2.2.2 then run npm install to update your node_modules--npmScope property has been removed from the following schematics:data-modulelibrarywidget--routing property has been removed from app schematic--path and --flat properties have been removed from library and widget schematics (SDK-1530)angular.json now, so that libraries and widgets
will inherit the npmScope from the project.angular.json (replacing "backbase" with your scope):{
...
"schematics": {
"@bb-cli/schematics:widget": {
"npmScope": "backbase"
},
"@bb-cli/schematics:library": {
"npmScope": "backbase"
},
"@bb-cli/schematics:data-module": {
"npmScope": "backbase"
}
},
...
}project: Don't run tests from a single entry point anymore. Each app and library should have
it's own test entry point (test.ts), and it's own "test" architect in the angular.json. This
also means that a coverage directory will be created for each app/library that has a "test"
architect in the angular.json.
**Warning**. This means that there will no longer be a combinedcoverage report in the root of the project. If you still want it see this github issue for a workaround. Or, if you are using sonar (or something similar), just pass it all the coverage files and it should be able to aggregate them for you. See instructions below:
This also means that you can now run tests for a single library by specifying it via
npm run test -- example-library (SDK-1332).
app: Create an entry point for testing instead of using a test.ts from the project root.
library: Create an entry point for testing instead of using a test.ts from the project
root. This test.ts also includes the public_api.ts to ensure the coverage is now reported
for all files, even if they don't have .spec.ts files (SDK-1497).
Update @angular-devkit/build-angular, if it isn't already:
npm install -D @angular-devkit/build-angular@~0.11.4Replace "npm test" script in your package.json: Before:
"test": "ng test --environment=dev --code-coverage=true",After:
"test": "ng test",Remove the test.js file from the root of the project
Add the following test.ts file to any apps (not libs) in your project
(that you have unit test spec files for):
Eg: example-project/apps/my-example-app/src/test.ts:
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);Add the following test.ts file to any libs in your project (that you have
unit test spec files for):
Eg: libs/example-library:
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Add public_api for coverage
const publicApiContext = require.context('./', true, /public_api\.ts$/);
publicApiContext.keys().map(publicApiContext);Update the angular.json for the default app. Set the "test": { "options" as below:
Note: If you don't have tests in your app, just remove the "test section entirely
Before:
"options": {
"main": "apps/my-example-app/src/../../../test.js",
"karmaConfig": "./karma.conf.js",
"tsConfig": "apps/my-example-app/src/../../../tsconfig.spec.json",
"codeCoverageExclude": [
"test.js",
"**/polyfills.ts"
]
}After:
"options": {
"main": "apps/my-example-app/src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "apps/my-example-app/src/polyfills.ts",
"tsConfig": "apps/my-example-app/src/../../../tsconfig.spec.json",
"environment": "dev",
"codeCoverage": true,
"codeCoverageExclude": [
"test.ts",
"**/polyfills.ts"
]
}Update the angular.json, adding this section for each library "architect",
replacing %library-name%:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "libs/%library-name%/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "libs/%library-name%/polyfills.ts",
"tsConfig": "./tsconfig.spec.json",
"environment": "dev",
"codeCoverage": true,
"codeCoverageExclude": [
"test.ts",
"**/polyfills.ts"
]
}
},Change the karma.conf.js in the root of the project, ensuring that the
generated reports include json:
Before:
…
coverageIstanbulReporter: {
…
reports: ['html', 'lcovonly', 'text-summary'],After:
coverageIstanbulReporter: {
…
reports: ['html', 'lcovonly', 'text-summary', 'json'],And the coverage directory is moved from the root to be within the library: Before:
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
…After:
…
coverageIstanbulReporter: {
dir: require('path').join(config.buildWebpack.projectRoot, 'coverage'),
…Add the following to your .gitignore:
apps/*/coverage
libs/*/coverage(optional) Update sonar.properties to pass all coverage reports: Before:
sonar.typescript.lcov.reportPaths=coverage/lcov.infoAfter:
sonar.typescript.lcov.reportPaths=libs/library-a/coverage/lcov.info,libs/library-b/coverage/lcov.info**/polyfills.ts from the coverage output--prefixWarning: This fix causes a breaking changes in generated APIs
For example, the method signature for this raml:
/resource
/{id}
delete:
queryParameters:
deleteParam:
displayName: 'Delete it'
type: boolean
description: 'Param for a delete request'
required: true
responses:
204:has been changed from this:
deleteResourceRecordById(
todoId: string,
body: any,
headers: HttpHeaders
): Observable<HttpResponse<any>>to this:
deleteResourceRecordById(
todoId: string,
params: {
deleteParam: string;
},
headers: HttpHeaders
): Observable<HttpResponse<any>>.forRoot configuration to work when AOT compiled (SDK-1360)