Angular determines which types to import based on the settings in the TypeScript configuration file, specifically compilerOptions.types and compilerOptions.typeRoots.
TS compilerOptions documentation reference
When creating Angular projects using Angular CLI, two TypeScript configuration files are generated by default.
tsconfig.json at the project roottsconfig.app.json in the /src directory
If both types and typeRoots are not defined, Angular will import all typings from node_modules/@types/*.
If either of them has a value specified, only those types or the ones from the designated location will be imported. For example:
types: ['stripe-v3'] or typeRoots: ['/someDir']
.
This means that other installed types in
node_modules/@types/* will not be imported.
An empty array indicates that no types will be automatically imported from node_modules/@types. (e.g. types: [] or typeRoots: []).
By default, the value of compilerOptions.types in tsconfig.app.json is an empty array. This explains why Angular does not fetch the installed typings from node_modules/@types/* automatically.
To resolve this: Install the typings using npm install @types/stripe-v3 and update tsconfig.app.json as follows:
- Add
stripe-v3 to the types array.
...
"compilerOptions": {
...
"types": ['stripe-v3']
}
- Alternatively, remove 'types' from 'compilerOptions'
If you opt to add types manually, remember to include any future typings in this array.
Removing types from compilerOptions will result in automatic importing of all future typings by Angular.
Ensure to also check the types and typeRoots settings in tsconfig.js. The same logic applies to relative paths specified in the typeRoots array.