I work with a VSCode workspace that holds various projects, often containing a Nuxt.js application, that has its own tsconfig.json. I recently added an Nx monorepo to the mix and it looks like my typings are not found by IntelliSense anymore.
My workspace looks like the following, with 3 projects so far.
my-project
--tsconfig.json
my-other-project
--tsconfig.json
my-monorepo
--tsconfig.base.json
apps/my-app
--tsconfig.json
--tsconfig.spec.json
I now get errors like this if I open a file in my-project for instance, but if I open the project alone in another VSCode instance, the error is gone.
const { $axios } = context;
Property '$axios' does not exist on type 'Context'.ts(2339)
The definiton is here but it seems like it's not found in a multi-project setup.
my-project/tsconfig.json
"types": [
"#nuxt/types",
"#types/node",
"#nuxtjs/i18n",
"#types/jest",
"#testing-library/vue",
"#testing-library/jest-dom",
"#pinia/nuxt",
"#nuxtjs/axios" <- The definition
],
I'm using Takeover Mode along with the Volar extension, maybe that could also explain why I run into these kinds of problems.
workspace.code-workspace
{
"folders": [
{
"name": "my-project",
"path": "my-project"
},
{
"name": "my-other-project",
"path": "my-other-project"
},
{
"name": "my-monorepo",
"path": "my-monorepo"
}
],
"settings": {}
}
Related
I am working on the Odin project and I have arrived at the test driven part.
I am on windows, installed everything as instructed and I use VS code as my IDE.
Now, I use VS code debugger to run the tests i.e. for the first case hello world I run the debugger on the helloWorld.spec.js file.
The tests runs as expected ... but in fact it runs all the 14 tests not only the one I am working on. As I am curious to understand how it works I would like to succeed running only the test I am working on.
I searched on Google but I couldn't find an answer that make my quest a success.
Do you know how to achieve this ? My configuration is shown herebelow.
First, my structure :
Then, my debug config file
"version": "1.0.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest: current file",
//"env": { "NODE_ENV": "test" },
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand", "--no-cache", "--watchAll=false"],
"console": "integratedTerminal",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
}
]
}
I also installed jest extension in VS code, in the hope to solve my issues and here are the settings for that extension :
"jest.autoRun": {
"watch": false,
"onSave": "test-src-file",
"onStartup": [
"all-tests"
]
},
"jest.debugCodeLens.showWhenTestStateIn": [
"pass",
"fail",
"unknown"
],
"jest.coverageFormatter": "GutterFormatter",
I'm trying to convert my existing Angular Project to work with Angular Universal (https://universal.angular.io/). I'm following this tutorial: https://github.com/angular/angular-cli/wiki/stories-universal-rendering. I'm stuck at the end of Step 3 (Building the Bundle). The name of my project is "fundercat". When I try to run:
ng run fundercat:server
I get the error:
Project 'dist/fundercat' could not be found in workspace.
Following the tutorial, I modified the following line in app.module.ts:
#NgModule({
imports: [
// Modified this line:
BrowserModule.withServerTransition({appId: 'fundercat'}),
And I added the following to angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fundercat": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
...
// added this block:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/fundercat",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
Any idea what I'm doing wrong?
Double check that fundercat is the name of your project by looking at what is listed as the name in your package.json file. If the name is something other than fundercat, you will have to use that name in the command in order to build the server. For example, if your project is actually named FunderCat then you need to run ng run FunderCat:server to run the server.
I ran into a similar issue when I tried to add angular universal to the angular-tour-of-heroes project. The way the documentation was worded made it seem like "my-project" was some kind of special angular cli command for running the server. It's not. "my-project" refers to the name of the project you're working on. So I had to run ng run angular-tour-of-heroes:server to run the server in the tutorial project instead of ng run my-project:server.
I have an existing project and I want to use the angular cli generator, so After install and create the following .angular-cli file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "app"
},
"apps": [
{
"root": "src/mc2/components",
"prefix": "app"
}
],
"defaults": {
"styleExt": "css",
"component": { }
}
}
The problem is when I generate a new component it created inside:
/src/mc2/components/app/todos/...
How can I remove the app folder, what I really need is:
/src/mc2/components/todos/...
Fist of all you have to follow the CLI project structure, so just run ng new my-app and make sure that you have a matching structure in your project, once it is done change your "root": "src/mc2/components" to "root": "src" in .angular-cli.json
If you are in the root of your project folder the rule is
ng g c something - create something component in src/app/something
ng g c /components/something - create something component in src/app/components/something
Also you can use --flat flag to create a component without a dedicated folder
You can add --dry-run just to see what the command is gonna do
Sorry, seems that i mislead you. Because of the angular-cli style guide the ng g component something always places your generated component inside an app folder. Didn't find a way to change this except manually doing so. But when you generate a new file it just generates a new app folder. So for now i dont think they have made a way to do this yet.
The application I build at the moment runs in an angular 2.0.0 final environment using typescript. Furthermore it uses the angular-cli 1.0.0-beta.15.
As the whole application is produced by several different developers (all using typescript) I get some .js files that are compiled from typescript and should be included and used in my angular 2 app.
My problem however is, that I can't seem to find a way to integrate the .js file and use it in e.g. a component.
I allready checked this SO question as well as this question in the official repo but neither of these answers worked for me.
I even tried a workaround where I include the .js file globally in the angular-cli.json like this:
"scripts": [
"../path/to/custom.js"
]
How can I (generally and specifically for this scenario) include custom .js files which do not come as e.g. npm module or have any d.ts files.
EDIT:
The including itself by using the angular-cli.json seems to work well but for now I still could not find a way to use the scripts methods. Whenever I do
declare var customJsObject: any;
It throws an
EXCEPTION: Uncaught (in promise):
Error: Error in CustomComponent caused by: customJsObject is not defined
From my project:
{
"project" : {
"version": "1.0.0-beta.15",
"name" : "my-project"
},
"apps" : [
{
"root" : "src",
"outDir" : "dist",
"assets" : "assets",
"index" : "index.html",
"main" : "main.ts",
"test" : "test.ts",
"tsconfig" : "tsconfig.json",
"prefix" : "",
"mobile" : false,
"styles" : [
"sass/application.scss",
"assets/fonts/bebas/bebasneue.css"
],
"scripts" : [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/fastclick/lib/fastclick.js",
"../node_modules/jquery.cookie/jquery.cookie.js",
"../node_modules/jquery-placeholder/jquery.placeholder.js",
"../node_modules/foundation-sites/dist/foundation.js",
"../node_modules/jquery-ui/ui/version.js",
"../node_modules/jquery-ui/ui/plugin.js",
"../node_modules/jquery-ui/ui/widget.js",
"../node_modules/jquery-ui/ui/widgets/mouse.js",
"../node_modules/jquery-ui/ui/widgets/draggable.js",
"assets/rollbar.js"
],
"environments": {
"source": "environments/environment.ts",
"dev" : "environments/environment.ts",
"prod" : "environments/environment.prod.ts"
}
}
],
"addons" : [],
"packages": [],
"e2e" : {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test" : {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt" : "scss",
"prefixInterfaces": false
}
}
Solution Edit:
For this specific problem there was a naming issue which caused the problem. In general the provided answer "entering the script in the angular-cli.json" was correct.
The only thing one need to do afterwards is
declare var customJsObject: any;
in the component you want to use the custom.js in.
The Problem:
I am trying to get the materialize.css work with the Aurelia CLI.
But what i get is the whole materialize.js as an error output in the console
and a part of the hammerjs as well i think.
What i've done
The Aurelia cli compiles fine with the follwing lines in the aurelia.json:
"jquery",
{
"name": "hammerjs",
"path": "../node_modules/hammerjs",
"main": "hammer",
"deps": ["jquery"]
},
{
"name": "materialize",
"path": "../node_modules/materialize-css/dist",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"],
"resources": [
"css/materialize.css"
]
},
Maybe i am missing something here. I thought this must be as simple as the implementation of bootstrap, but i guess i was damn wrong.
Solved it so far.
The problem is the implementation of the materialize.js in the dist folder.
The *.js files in there are not compatible with the aurelia build system.
Easiest way is to change the aurelia.json as followed:
{
"name": "materialize",
"path": "../node_modules/materialize-css",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"]
},
Finally bind the css files for materialize.css via the cdn that is provided.
Thats the best solution i've got so far.
Any better solutions are welcome.
/edit
Seems like this is not properly working either. As soon as you try to invoke materialize functions, you get errors over errors.
For aurelia.json I added:
{
"name": "materialize",
"path": "../node_modules/materialize-css",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"],
"resources": [
"bin/materialize.css"
]
}
And for my template I added:
<require from="materialize/bin/materialize.css"></require>