I have a project with Angular 8 i try use in my
src/app/helpers/auth.guard.ts
import { AuthenticationService } from '#app/services';
My AuthenticationService ts file have a path in
src/app/services/authentication.service.ts
when i run ng serve i get the error
ERROR in src/app/helpers/auth.guard.ts(4,39): error TS2307: Cannot find module '#app/services'.
this is my tsconfig.js
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"#app/*": ["src/app/*"],
"#environments/*": ["src/environments/*"]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
This my tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
I try to run the project with --aot and this doesn't work
Here's what could be going wrong:
Your Authentication service resides at following path:
src/app/services/authentication.service.ts
But when you try to import it using: import { AuthenticationService } from '#app/services', it tries to import the service from services directory. Your service directory doesn't export authentication service, therefore you get this error.
Here's how you can fix it:
Create a file called index.ts in services directory so it's located at path: src/app/services/index.ts.
In this index.ts file, add following export statement:
export * from './authentication.service.ts';
This will export your service from services folder so your import statement will be able to locate Authentication service at src/app/services/.
As you already have an path alias in your tsconfig "#app/*": ["src/app/*"], your import statement should resolve correctly.
Let me know if it doesn't work.
Related
I created a package with CRA, Typescript and Storybook.
There is some configs from my package.json:
"name": "#my-name/my-package",
"version": "0.0.7",
"main": "./dist/index.js",
"exports": {
".": "./dist/index.js",
"./interfaces": "./dist/interfaces",
"./contexts": "./dist/contexts"
},
"types": "./dist/index.d.ts",
"typesVersions": {
"*": {
"interfaces": [
"./dist/interfaces/index.d.ts"
],
"contexts": [
"./dist/contexts/index.d.ts"
]
}
},
When I import like this, it's works fines:
import { Button } from '#my-name/my-package';
import { ButtonInterface } from '#my-name/my-package/interfaces';
But when I try to import like this:
import { ButtonContext } from '#my-name/my-package/contexts';
I get this error:
Module not found: Can't resolve '#my-name/my-package/contexts' in '/home/my-pc/Documents/my-project/src/pages/Home'
I really don't know why I can import interfaces, but can't import contexts.
I tried import the ButtonContext from my main entry point, and it's worked. But then I try to import it from "./contexts" entry, I get the module not found error.
Here is my tsconfig.json that I use to create the dist folder:
{
"compilerOptions": {
"declaration": true,
"strictNullChecks": true,
"outDir": "dist",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"lib": ["es2015", "dom"],
"rootDir": "src",
"jsx": "react-jsx",
"esModuleInterop": true,
"resolveJsonModule": true,
"allowJs": true
},
"include": ["src"],
"exclude": [
"node_modules",
"dist",
"./src/stories",
"./src/**/*.stories.**",
"./src/mock",
"./src/**/*.test.*",
"./src/setupTests.ts"
]
}
Trying to run src/index.js I get the following error:
Error: Cannot find module './utils/spinner'
index.js import looks like this:
const { startSpinner, stopSpinner } = require('./utils/spinner')
Folder structure:
tsconfig.json looks like this:
{
"extends": "#tsconfig/node12/tsconfig.json",
"compilerOptions": {
"outDir": "lib",
"rootDir": "src",
"sourceMap": true,
"allowJs": true
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/__tests__/*",
"src/**/*.test.ts"
]
}
#tsconfig/node12/tsconfig.json looks like this:
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Node 12",
"compilerOptions": {
"lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string"],
"module": "commonjs",
"target": "es2019",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
I have tried adding baseUrl to tsconfig.json and set it to .src , src, /src and tried to the same with every variation for rootDir.
You can solve this by renaming index.js to index.ts and running the whole thing with ts-node: https://npmjs.com/package/ts-node.
I have just converted my React project from javascript to typescript, and I have many instances where I'll have an index file in a directory and export all the functions/components from the respective directory. For example, the directory might look like this:
components
|--index.js
|--ComponentA
|--ComponentB
|--ComponentC
|...
And index.js would contain:
export ComponentA from './ComponentA'
export ComponentB from './ComponentB'
export ComponentC from './ComponentC'
...
Which I believe babel converts to:
export { default as ComponentA } from './ComponentA'
...
I've converted all .js/.jsx files to .ts/.tsx and I'm using webpack with babel-loader to compile these files. Everyting runs just fine, but I get eslint errors in my editor because typescript doesn't understand these exports. Here's my tsconfig.json file:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "es6",
"target": "es6",
"jsx": "preserve",
"lib": ["es5", "es6", "dom"],
"esModuleInterop": true,
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": [
"./src/**/*"
],
"types": [
"#reachify/graphql-schema"
],
"awesomeTypescriptLoaderOptions": {
"reportFiles": [
"./src/**/*"
]
}
}
And .eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"browser": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
},
"plugins": [
"#typescript-eslint/eslint-plugin"
]
}
How can I get typescript to understand export Component from './Component?
As mentioned in the comments, it looks like this is still a stage 1 feature and not yet implemented in Typescript.
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.
I'm using a compiled ES6 library in my Typescript application. The testing fails with an error
TypeError: Cannot read property 'PropTypes' of undefined
The module it is complaining about is importing react as
import React from 'react';
If I change this to
import * as React from 'react';
then it will compile and run fine. Here is my package.json's jest config:
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json"
],
"verbose": true,
}
And here is my tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"preserveConstEnums": true,
"removeComments": true,
"noImplicitAny": false,
"moduleResolution": "node",
"noUnusedParameters": true
},
"include": [
"./src/**/*"
],
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/index.d.ts"
]
}
What configuration have I messed up here?
then it will compile and run fine.
That is the way to go for TypeScript. import * as React from "react".