I used a visual studio asp core angular 2 starter template form here .
The template uses webpack as module loader.
https://visualstudiogallery.msdn.microsoft.com/31a3eab5-e62b-4030-9226-b5e4c9e1ffb5
Now I created a project with this template (can be found here).
In VS Code everything is fine. but when i open the typescript files i can see that some TypeScript are not understood. For example in the code below module cannot be resolved
import 'angular2-universal-polyfills/browser';
import { enableProdMode } from '#angular/core';
import { platformUniversalDynamic } from 'angular2-universal';
import { AppModule } from './app/app.module';
import 'bootstrap';
// Enable either Hot Module Reloading or production mode
if (module['hot']) { //=>Cannot Resolve Moodule
module['hot'].accept();
module['hot'].dispose(() => { platform.destroy(); });
} else {
enableProdMode();
}
I also tried installing typings with this command
npm install --save #types/node
npm install --save #types/lodash
The tsconfig (placed in the javascript app folder) looks like this:
{
"compilerOptions": {
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"lib": [ "es6", "dom" ],
"types": [ "node" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
What am I missing?
Related
I have a hello world local typescript project. Im able to build it using npx tsc and the outDir (dist), as defined in tsconfig.json, contains my index.d.ts declaration file.
I then install it in a local vue project by listing it as dependency in its package.json using
{
...,
"my-module": "file:<relative-path>";
}
So far so good. The problem is that i can use the import statement in my vue project to import anything and i dont get compile time errors about importing foo from 'my-module' where the only export from there is {hello}.
index.ts (in ts project)
const world = 'world';
export function hello(world: string = 'world'): string {
return `Hello ${world}! `;
}
tsconfig.json (in ts project)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
tslint.json (in ts project)
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-config-airbnb"
],
"jsRules": {},
"rules": {
"eofline": false
},
"rulesDirectory": []
}
I would very much like the ts compiler to complain about missing imports in my vue project from my ts project as well, like it does if i try to import foo from 'vue'
I created a default nestjs project using
nest new my-nestjs-01
command from this tutorial. I configured Webstorm to run typescript files like this:
So now when I open a .ts file in editor and click
at the top, the current opened file gets executed.
However when I execute main.ts I get this error:
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
This is the default project code that has been generated for me with the above nest command. I tried adding additional options to tsconfig.json to fix the error, but it didn't help:
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"js/ts.implicitProjectConfig.experimentalDecorators":true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"src/main.ts",
"src/app.service.ts"
],
"include": [
"src/**/*.d.ts"
]
}
main.ts:
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
}
bootstrap();
app.module.ts:
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
#Module({
imports: [],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {} // <-- error here
How do I fix it? Any help is appreciated.
EDIT:
Solution from suggested answer:
Pasting my configuration from tsconfig.json into the tsconfig.spec.json file fixed the issue.
did not solve my problem.
My catch with WebStorm x NestJs RUN CONFIGURATION, was simply that I was not point to the correct JavaScript file (needs to point to the main.js file transcripted).
For the default installation of NestJs, this main.js file is located in the ~/dist folder; In my case, image below shows a working config:
What is the right syntax to import nano-memoize in a React Typescript project? This library doesn't have type declaration file.
I am using the following in the project:
typescript + react
webpack
babel + babel-loader + #babel/preset-typescript ^7.7.0
These are my tsc options
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"lib": [ "es7", "dom" ],
"removeComments": true,
"sourceMap": true,
"jsx": "react",
"noEmit" : true
},
Here are the list of errors:
This code builds (npm run build) but throws error in browser Uncaught ReferenceError: nanomemoize is not defined.
import "nano-memoize/browser/nano-memoize";
// #ts-ignore
const myFunc = nanomemoize(...);
Code compiles. Error in Browser Uncaught TypeError: n.n(...)(...) is not a function
import nanomemoize from "nano-memoize/browser/nano-memoize";
const myFunc = nanomemoize(...);
If you're just looking to import it directly and use the nanomemoize() function in a file, install the node_module and then try:
import * as nanomemoize from 'nano-memoize'
I'm creating an Angular library and within tsconfig.lib.json I've added the following paths configuration:
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
],
"paths": {
"#fs/*": ["src/lib/*"]
}
}
However attempting to import things like:
import { Test } from '#fs/Test'
Does not work. Anyone know if Angular libraries support hte paths configuration option within tsconfig.lib.json?
Generally I use typescript-transform-paths to perform path transformation on the compiled result, and I was hoping Angular had baked something like this in for libraries?
Try using the following pattern in your tsconfig.json file :
"paths": {
"#services/*": ["app/path/to/services/*"],
"#components/*": ["app/path/to/some/deeply/nested/component/*"],
"#environments/*": ["environments/*"]
},
Then when importing:
import { yourServiceClass } from "#services/yourServiceClass";
I am currently working with the vss-web-extension-sdk. I am using ESLint, eslint-plugin-import, and eslint-import-resolver-typescript to validate the files.
import { WidgetSettings, WidgetStatus } from "TFS/Dashboards/WidgetContracts";
The line above, extracted from my run.ts, throws the following error.
Unable to resolve path to module 'TFS/Dashboards/WidgetContracts'. eslint(import/no-unresolved).
However, when I control-click on the import in VSCode, it navigates to the module in tfs.d.ts. I am doing something incorrectly to make the resolver not detect the module?
My tsconfig.json has
{
"compilerOptions": {
"module": "amd",
"strict": true,
"moduleResolution": "node",
"types": [
"vss-web-extension-sdk"
]
}
}
and my .eslintrc.json has
{
"settings": {
"plugins": [
"import"
],
"rules": {
"import/no-unresolved": "error"
},
"import/resolver": {
"typescript": {}
}
}
}
Install Commands
npm install --save-dev eslint-plugin-import typescript-eslint-parser eslint-import-resolver-typescript
npm install --save vss-web-extension-sdk
Try setting your baseUrl and your rootDir in your tsconfig.json to specify where that absolute path starts.
See here: https://maxisam.github.io/2017/01/03/rootDirs-in-tsconfig/