How to make angular find imports automatically in vs code - javascript

I have a angular project generated with nrwl/nx, I generated an model folder manually, but if I try to import something from it I have to do it manually. Is there anyway to make a file where I can put the path to my models and it will automatically be found?
I looked a bit and found this in my tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["es2017", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"#moniesta-admin/auth-lib": ["libs/auth-lib/src/index.ts"],
}
},
"exclude": ["node_modules", "tmp"]
}
I tried to add it like my auth-lib folder but that does not work either. This is how the index.ts of auth-lib looks:
export * from './lib/auth-lib.module';
EDIT:
I tried to add my model like this:
"#moniesta-admin/model": ["model/index.ts"],
this is how the index.ts looks:
export * from '../models/*'
but this gives me the following error:
the typedeclaration or module was not found
EDIT v2:
Command is the following:
ng g #nrwl/angular:lib

Related

Importing types from outside the root dir

I have a problem with using a shared folder between app and server which are in a single repository. My project structure is like below:
- project
-- app
--- src
--- package.json
--- tsconfig.json
-- shared //this folder should be accessible in backend and app
-- lib //backend
-- package.json //backend
-- tsconfig.json //backend
Can someone tell me why I can't use inside app components my types placed in shared? Right now when I try to import like this:
import { Test } from "../../shared/test.interface";
compiler throw me this error:
File '.../shared/test.interface.ts' is not under 'rootDir' '.../app'. 'rootDir' is expected to contain all source files.
When i try to import this file inside lib (backend) then everything is ok. How can i properly configure app to have availability to import types from shared inside app?
here is my tsconfig.json for app
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"composite": true,
"declaration": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"baseUrl": "src/",
"outDir": "src/dist",
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": false,
"strictNullChecks": false,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"dom",
"dom.iterable"
],
"isolatedModules": true,
"incremental": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*"
]
}
Thanks for any help!

tsconfig paths not importing css modules, only js/ts files

I used Vite to scaffold a typescript-react project, and i wanted to use the given tsconfig.json file to create shortcuts for my directories, so i wont have to deal with long relative paths when importing stuff in my components.
This is tsconfig.json :
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"#styles/*": ["styles/*"],
"#routes/*": ["routes/*"],
"#components/*": ["components/*"],
"#assets/*": ["assets/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
I get an error when trying to import LandingPage.module.css into my component LandingPage.tsx using this line : import styles from "#styles/LandingPage.module.css";
here's the relevant folder structure :
The Intellisense in VS Code when i type import styles from "#styles/" shows only the js file in styles folder, and doesn't pick up on the css module.
Attempted solution :
A comment about restarting the Typescript server, didn't work.
Ref : This SO question

Compiling js files over to another directory isn't working as intended

This is my tsconfig.json file
{
"compilerOptions": {
"watch": false,
"target": "ES2020",
"allowJs": true,
"module": "ES2020",
"resolveJsonModule": true,
"lib": [
"ES2020"
],
"esModuleInterop": true,
"moduleResolution": "Node",
"outDir": "./dist/",
"sourceMap": false,
},
"include": [
"src/**/*.*",
"src/json/.env"
]
}
Basically I want that the js files end up in dist/index.js and not in dist/src/index.js
This is how it ends up
This is how I want it to be
What should I change and why?
Update tsconfig.json as below
{
"compilerOptions": {
"watch": false,
"target": "ES2020",
"allowJs": true,
"module": "ES2020",
"resolveJsonModule": true,
"lib": [
"ES2020"
],
"esModuleInterop": true,
"moduleResolution": "Node",
"outDir": "./dist/",
"sourceMap": false,
"rootDir": "./src", /** Specifies the root directory of input files */
}
}
The compiler looks at your tsconfig.json and finds all the files it needs to build by looking at "files"/"includes"/"excludes" then following all ///<reference .. /> and import statements.. now it has a transitive closure of all files it needs to build. you can use tsc --listFiles to see the list.
The next step is generating the output. for every input file (i.e. a .ts/.tsx file) it needs to generate an matching output (a .js.jsx file). To figure out the file path of the generated output file it will chop off the "rootDir" from the input, then prepend the "outDir" to it.
https://github.com/Microsoft/TypeScript/issues/25646

Building angular package results in: Cannot find module "jquery/index"

I am developing an Angular module and after compiling and bundling it with ngc and rollup I am getting the following error in my Angular project:
Cannot find module "jquery/index"
In one of the module files I have the following import:
import * as jQuery from 'jquery';
In the module's UMD file the jquery import is declared as jquery/index. When I change it to jquery everything works as it should. However each time I rebuild and bundle the package I have to fix the problem again as rollup (or ngc) somehow changes the import from jquery to jquery/index.
So the main question is why the jquery import statement is changed after compiling and bundling?
My tsconfig:
{
"compilerOptions": {
"declaration": true,
"module": "es2015",
"target": "es5",
"baseUrl": ".",
"stripInternal": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"outDir": "../build",
"rootDir": ".",
"lib": [
"es2016",
"dom"
],
"skipLibCheck": true,
"types": []
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"flatModuleOutFile": "chassis-core.js",
"flatModuleId": "chassis-core"
},
"files": [
"./index.ts"
]
}

Ionic3 Highcharts-More import Error --JsAllow Not Set

I try to import Highcharts-more like this:
import Highmore from '../../node_modules/highcharts/highcharts-more';
then im getting the following Error:
Module '../../node_modules/highcharts/highcharts-more' was resolved to 'C:/Users/.../node_modules/highcharts/highcharts-more.js', but '--allowJs' is not set.
So I go into my tsconfig.json and add allowJs to my settings:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
After that Im getting a new Error:
Cannot write file 'C:/Users/../node_modules/highcharts/highcharts-more.js' because it would overwrite input file.
I need highcharts-more in my whole Project and I couldnt find another way to import it. Please help
Use the same syntax as it's shown in this doc (Typescript section): https://www.npmjs.com/package/highcharts
The example is done for the exporting module - highcharts-more module should be imported analogically.

Categories