I've created a package with a module outside of folder with an appication that should contain the module to test it. Then I've added package with npm link #scope/module-name. After that I've added paths to root tsconfig.json.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"#scope/module-name": [
"node_modules/#scope/module-name"
],
"#scope/module-name/*": [
"node_modules/#scope/module-name/*"
]
}
}
}
I've also added package to include in tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"include": [
"**/*.ts",
"../node_modules/#scope/**/*.ts",
],
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
And yes, I've added "preserveSymlinks": true in angular.json as it's said in similar questions on SO.
In app.module.ts I'm doing
import { DispRegistryModule } from "#scope/module-name/public_api.d.ts";
But still I'm gettig an error
ERROR in ./node_modules/#scope/module-name/public_api.d.ts Module
build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error:
D:\internal\test-app\node_modules#scope\module-name\public_api.d.ts
is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property.
How can I fix the error?
Related
I am using Angular with Eslint and Prettier configured for the entire project. All the files are checked correctly according to rules. Unfortunately, the files that have .mock in name are completely ignored. The file is called for example test.mock.ts and is ignored by Eslint/Prettier. If I rename it to test.mocks.ts or anything else without the mock keyword, it starts to work.
Does anyone know why it behave like this?
Eslint config file:
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:#angular-eslint/recommended",
"plugin:#angular-eslint/template/process-inline-templates"
],
"rules": {
...some rules...
}
}
]
}
Tsconfig file:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"experimentalDecorators": true,
"importHelpers": true,
"typeRoots": [
"node_modules/#types"
],
"target": "es2020",
"lib": [
"es2020",
"dom"
],
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"paths": {
"#generated/*": [
"libs/shared/*"
],
}
}
}
Turned out I had in .eslintignore file rule to ignore all .mock files.
I have this project structure:
How to configure tsconfig.json for using paths like #app/, #server/.
I try this:
{
"compilerOptions": {
"module": "CommonJS",
"target": "es5",
"lib": [
"esnext",
"dom"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"baseUrl": "..",
"paths": {
"#app/*": [
"app/*"
],
"#server/*": [
"server/*"
]
}
},
"include": [
"."
]
}
Same config works with webpack and ts-loader, but when i run npx ts-node server/index.ts i got error:
npx ts-node server/index.ts
Error: Cannot find module '#server/a'
server/index.ts :
import a from '#server/a'
console.log('This is index.ts')
a()
Your config works for webpack because you run webpack from the project root. It does not work for server.ts because the path is relative to its directory. Try:
"paths": {
"#app/*": [
"../app/*"
],
"#server/*": [
"../server/*"
]
}
If you need to do it for both, you need two different tsconfig.json - one in the root and one in app or server.
Take a look at my project: https://github.com/mmomtchev/rlayers
It uses this feature a lot.
I am trying to install moment in node js.But getting the below error :--
error TS2307: Cannot find module 'moment'.
import * as moment from 'moment';
Below is my tsconfig
{
"compilerOptions": {
"module": "commonjs",
"strict": true,
"baseUrl": "./",
"outDir": "build",
"removeComments": true,
"noImplicitAny": false,
"experimentalDecorators": true,
"target": "es6",
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"importHelpers": true,
"types": [
"node",
"jest"
],
"typeRoots": [
"node_modules/#types"
]
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./src/public/"
]
}
Below is the command I have executed so far --
npm install moment
npm install --save -dev #types/moment
Please let me know if I need to add some more information
I was using Typescript 1.8 with typings, but i decided to upgrade to typescript 2.8 with #types. I downloaded #types/node, but console show errors:
error TS2304: Cannot find name 'require'.
The structure of my project is the following:
node_modules
src >
client
server >
tsconfig.ts
tsconfig.ts:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"typeRoots": [
"../node_modules/#types"
],
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "server",
"baseUrl": "."
},
"include": [
"src/**/*"
]
}
Adding "types": ["node"] not help
Based on your directory structure, it looks like the path for the typeRoots option is incorrect - it should be a relative path from your tsconfig file. Your node_modules directory is 2 levels higher than the location of your tsconfig, so your type roots should be:
"../../node_modules/#types"
Full tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"typeRoots": [
"../../node_modules/#types"
],
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "server",
"baseUrl": "."
},
"include": [
"src/**/*"
]
}
I've spent more time than I care to admit on this so I'm throwing my hands up.
I have a module that I'm trying to include in my angular 2 project:
import * as d3ScaleChromatic from 'd3-scale-chromatic';
This gives an error:
Cannot find module 'd3-scale-chromatic'.
I have installed via npm npm install --save #types/d3-scale-chromatic. I can tell that it lives in node_modules/#types/d3-scale-chromatic.
My tsconfig.json looks like this:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types" <-- should look here, right?
],
"lib": [
"es2016",
"dom"
]
}
}
So I can see that it will look in node_modules/#types.
It seems similar to this issue but as far as I can tell I already followed the suggestions in the thread: https://github.com/Microsoft/TypeScript/issues/9725.
Can anyone tell me what I'm missing to correctly reference this package in my module?
EDIT: Upon closer inspection, there are actually 4 tsconfig.* files in my app. I suspect this is the source of the problem. The question now is, which of them to I need to keep?
tsconfig.app.json :
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": ["#types/d3-scale-chromatic"]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
tsconfig.spec.json :
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
tsconfig.e2e.json :
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
You also need to install:
npm install --save d3-scale-chromatic
along with:
npm install --save #types/d3-scale-chromatic