NPM INSTALL does not recreates .js files from .ts files - node.js

I am trying to compile my angular2/typescript files to javascript files.
"npm install" (without any warnings or errors)
creates node_modules, but not recreates .js files form my .ts files and angular modules does not updates.
My tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"files": [
],
"exclude": [
"node_modules",
"scripts"
],
"compileOnSave": true
}
and package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"react-redux": "^4.4.5",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"react-super-components": "^0.3.5",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"param-store":"^1.0.0"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2"
}
}
after NPM START there is
1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
[1] 16.09.23 14:05:50 404 POST /api/logging
in log and it's never ends.
What can i check?

npm install will just install the mentioned packages in package.json file.
to generate js code you need to run
npm start
which will run typescript compiler in watch mode and will transpile ts code to js code.
look here what npm start command does:
start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"

npm install will install the packages listed in package.json
If the typings folder doesn't show up after running npm install, you'll need to install it manually with the command:
npm run typings install
You need to run npm start
This command runs the following two parallel node processes:
The TypeScript compiler in watch mode which will take of transpiling from typescript to javascript.
A static file server called lite-server that loads index.html in a browser and refreshes the browser when application files change.

Related

VS Code Unbound breakpoints: We couldn't find a corresponding source location

Trying to debug nodejs typescript files while running firebase emulators. However, breakpoints are unbounded so even though the debugger starts and attaches to port 9229 breakpoints are not getting hit. Below are my vscode settings and tsconfig, etc.
Anyone running firebase emulators run into this issue trying to debug in vscode? I'm running VS Code Version: 1.75.0.
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": false,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
"noImplicitAny": false,
"strictNullChecks": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"compileOnSave": true,
"include": ["src", "index.ts"]
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Debug",
"port": 9229,
"trace": true
}
]
}
package.json
{
"name": "functions",
"scripts": {
"lint": "eslint --ext .js,.ts .",
"build": "tsc",
"build:watch": "tsc --watch",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"dev": "cd ~/AndroidStudioProjects/order_fulfillment && firebase emulators:start --import=saved-data --export-on-exit && tsc --watch",
"debug": "cd ~/AndroidStudioProjects/order_fulfillment && firebase emulators:start --import=saved-data --export-on-exit --inspect-functions && tsc --watch",
"deploy": "cd functions && npm ci && npm run build && cd .. && firebase deploy --only hosting",
"web": "cd ~/AndroidStudioProjects/order_fulfillment && flutter run -d chrome --web-renderer canvaskit --web-hostname localhost --web-port 45887",
"logs": "firebase functions:log"
},
"engines": {
"node": "16"
},
"main": "lib/index.js",
"dependencies": {
"#elastic/elasticsearch": "^8.2.1",
"#google-cloud/pubsub": "^2.15.1",
"#google-cloud/secret-manager": "^3.7.1",
"#sendgrid/mail": "^7.6.0",
"#shopify/shopify-api": "^5.0.1",
"aws-sdk": "^2.1231.0",
"axios": "^0.27.2",
"body-parser": "^1.19.2",
"cors": "^2.8.5",
"csvtojson": "^2.0.10",
"eslint": "^8.23.0",
"express": "^4.17.2",
"firebase-admin": "^11.0.1",
"firebase-functions": "^4.2.1",
"html-pdf-node": "^1.0.8",
"luxon": "^1.27.0",
"node-fetch": "^2.6.7",
"pdf-merger-js": "^4.1.0",
"qrcode": "^1.5.1",
"uuid": "^8.3.2"
},
"devDependencies": {
"#types/download": "^8.0.1",
"#types/html-pdf": "^3.0.0",
"#types/luxon": "^1.27.0",
"#types/mime-types": "^2.1.1",
"#types/node-fetch": "^2.6.1",
"#types/pdfkit": "^0.12.6",
"#types/qrcode": "^1.5.0",
"#types/request": "^2.48.7",
"#typescript-eslint/eslint-plugin": "^5.12.0",
"#typescript-eslint/parser": "^5.12.0",
"concurrently": "^7.4.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-prettier": "^4.2.1",
"firebase-functions-test": "^0.2.0",
"node": "^18.8.0",
"prettier": "^2.7.1",
"typescript": "^4.5.4"
},
"private": true,
"version": "1.0.0",
"author": "",
"license": "ISC",
"description": ""
}
I added trace to launch.json and opened the vscode debug file at https://microsoft.github.io/vscode-pwa-analyzer/index.html and this is an example of what the logs show for the unbounded breakpoint.
VS Code Debug Log Viewer Example
As you can see in screenshot, TS is getting compiled correctly to the outDir so there should not be any issues with mapping.
Screenshot demonstrating tsc is building to lib directory.
I have reached out to vscode support, but they are suggesting it is not vscode and some kind of issue with firebase setup? However, all my emulators are running just fine and I am able to do everything, but set a breakpoint and debug.
I think you need to set the outFiles attribute in your launch.json file. See the VS Code docs on TypeScript debugging > Mapping the output location:
If generated (transpiled) JavaScript files do not live next to their source, you can help the VS Code debugger locate them by setting the outFiles attribute in the launch configuration. Whenever you set a breakpoint in the original source, VS Code tries to find the generated source by searching the files specified by glob patterns in outFiles.
I'm not sure exactly what value you need to use for the setting, but I suspect its something based on the value of your outDir setting in your tsconfig.json, perhaps with a trailing /**/*.js (or perhaps not). If this works for you, suggest an edit to this answer with the exact value that you got to work.

How to use puppeteer inside dependencies?

I am creating a dependancy to generate PDF on nestjs, to do it I am using puppeteer.
When I try to use puppeteer inside the dependancy I get an error:
Error: Run `npm install` to download the correct Chromium revision (1056772).
But when I do it from the project and not the dependancy there is no error. It only happen when I use puppeteer from the dependancy, but it's launched from the same project.
First I generated the PDF inside a nestjs project and it worked fine.
Then I moved the code to my library inside a service but then there is the error.
I tried to run the following command to install chromium
node node_modules/puppeteer/install.js
But nothing change and here is the result of the command:
Chromium is already in C:\Users\Greg.cache\puppeteer\chrome\win64-1069273; skipping download.
I also tried to delete the node modules and reinstall it but no change.
The package.json of the dependancy:
{
"name": "#gboutte/nestjs-pdf",
"version": "0.0.3",
"description": "This package provide a service to render PDF from html string or from handlebars tempaltes for nestjs.",
"keywords": [
"nestjs",
"handlebars",
"hbs",
"templates",
"pdf"
],
"homepage": "https://github.com/gboutte/nestjs-pdf#readme",
"bugs": {
"url": "https://github.com/gboutte/nestjs-pdf/issues",
"email": "gboutte#protonmail.com"
},
"repository": {
"type": "git",
"url": "https://github.com/gboutte/nestjs-pdf"
},
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && tsc",
"prepublish": "npm run build"
},
"author": "Grégory Boutte <gboutte#protonmail.com>",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"#nestjs/common": "^9.1.6",
"#gboutte/nestjs-hbs": "^0.0.3",
"#types/node": "^18.11.5",
"puppeteer": "^19.1.2",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.5.7",
"typescript": "^4.8.4"
},
"peerDependencies": {
"#nestjs/common": "^9.1.6",
"#gboutte/nestjs-hbs": "^0.0.3",
"#types/node": "^18.11.5",
"puppeteer": "^19.1.2",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.5.7",
"typescript": "^4.8.4"
}
}
And the package.json of the main project
{
"name": "nestjs-hbs-demo",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"readmeFilename": "README.md",
"files": [
"dist/**/*",
"*.md"
],
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#gboutte/nestjs-hbs": "file:../nestjs-hbs",
"#gboutte/nestjs-pdf": "file:../nestjs-pdf",
"#nestjs/common": "^9.0.0",
"#nestjs/core": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"#nestjs/platform-fastify": "^9.1.6",
"puppeteer": "^19.4.1",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0"
},
"devDependencies": {
"#nestjs/cli": "^9.0.0",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#types/express": "^4.17.13",
"#types/jest": "28.1.8",
"#types/node": "^16.0.0",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "28.1.3",
"prettier": "^2.3.2",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "28.0.8",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "4.1.0",
"typescript": "^4.7.4"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
I resolved the issue by updating my local nodejs and I changed the #types/node dependency of both project to be the same.
"#types/node": "^18.0.0",
I found out that it was this problem by trying to install the library with github instead of locally.
Before I used npm install ../directory-to-my-lib, then I used npm install <url to the github repo>.
The difference is that using github npm gave me an error saying that both version of #types/node were different, I don't know why I did not have this error using the other command.
Now that I fixed the version it works with all installation methods (npm package / github / locally).

error TS5014: Failed to parse file '': Unexpected token u in JSON at position 0. The terminal process terminated with exit code: 1

I am receiving this error.
error TS5014: Failed to parse file '/Users/Documents/tsconfig.json/tsconfig.json': Unexpected token u in JSON at position 0.
The terminal process terminated with exit code: 1
My system setup:
Visual Studio Code Version 1.14.1
Angular 2
node Version v8.0.0
tsc Version 2.4.1
package.json is as follows
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"pree2e": "webdriver-manager update",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/common": "^2.4.10",
"#angular/compiler": "^2.4.10",
"#angular/core": "^2.4.10",
"#angular/forms": "^2.4.10",
"#angular/http": "^2.4.10",
"#angular/platform-browser": "^2.4.10",
"#angular/platform-browser-dynamic": "^2.4.10",
"#angular/router": "^3.4.10",
"angular-in-memory-web-api": "^0.2.5",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"systemjs": "^0.19.47",
"zone.js": "^0.7.8"
},
"devDependencies": {
"#types/jasmine": "^2.5.41",
"#types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.5.0",
"http-server": "^0.9.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.3.0",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "2.1.6"
},
"repository": {}
}
tsconfig.json is as follows
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "dist"
}
}
How did you define your tasks.json? I encountered the same issue when I defined my tasks.json with default typescript type. Following changes in tasks.json worked for me based on the answer in link
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"taskName": "compile",
"type": "shell",
"command": "tsc -p tsconfig.json",
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": []
}
]
}

NPM : checkPermissions Missing write access to /.../node_modules/is

I am getting following error every time I run a npm install on my project:
npm WARN checkPermissions Missing write access to /../node_modules/is
npm ERR! path /.../node_modules/is
npm ERR! code ELOOP
npm ERR! errno -62
npm ERR! syscall access
npm ERR! ELOOP: too many symbolic links encountered, access '/.../node_modules/is'
npm ERR! A complete log of this run can be found in:
npm ERR! /.../.npm/_logs/2017-07-14T15_19_32_340Z-debug.log
Issue gets resolved after I delete a shortcut file called "is" in my node_modules folder. But it gets re-generated again after one successful npm install run.
Following is my package.json:
{
"name": "SDKIonic",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "^4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/core": "3.10.2",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic/storage": "2.0.1",
"airwatch-sdk-plugin": "^1.0.7",
"cordova-android": "^6.2.3",
"cordova-ios": "^4.4.0",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "3.4.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"is": "file:node_modules/is",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.4.1",
"#ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.3.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"com.airwatch.awsdkplugin": {}
},
"platforms": [
"android",
"ios"
]
}
}
I tried changing permission to read-write for everyone but no luck.
If you are in a mac or any unix based system try to run
the command again as root/Administrator.
sudo npm install
This is a recursive dependency (the is dependency points to node_modules/is, which is also where the is dependency itself will get installed):
"is": "file:node_modules/is"
If you mean to install the is package (this one), remove that line from your package.json and install it properly:
npm i is --save

Publish angular2 module / component as npm package

I would like to create my library in npm of Angular2 components (my generic grid, my generic buttons, etc.) and modules (my clients in grid module) but I can't find any working example online (I did find a few though, but it never works...
index.js :
export { PortalGridComponent } from './src/portal-grid/portal-grid.component';
Here is my package.config.json :
{
"name": "my-perso-components",
"version": "1.0.13",
"main": "index.js",
"scripts": {
"nbuild": "tsc index.ts --outDir ./lib",
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"#types/core-js": "^0.9.35",
"#types/jasmine": "^2.5.36",
"#types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.1.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.0.10"
},
"license": "ISC"
}
my tsconfig.json :
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"outDir": "./lib",
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/#types"
],
"types": [
"core-js"
]
}
}
and my project architecture looks like this :
- lib
- node_modules
- src
- app
- my-perso-grid
- my-perso-grid.component.ts
- my-perso-grid.html
- my-perso-grid.scss
- .npmignore
- index.ts
- package.json
- tsconfig.json
I then run tsc index.ts --outDir ./lib and do npm version patch , then npm publish.
My code is in npm for sure, I can then install it in another folder... However, I always get a 404 issue :
Error: (SystemJS) XHR error (404 Not Found) loading
http://localhost:3000/my-perso-components Error: XHR error (404 Not Found)
Which is weird, because I do have to autocompletion for the name of my component when I do the Import inside another component and no error shown !!
Any idea ? what can I try ? Do you have a recent and working tutorial to create, publish and use an npm package ?
Thanks a lot... will help a lot
Have you checked this http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/ Distributing an Angular Library - The Brief Guide

Resources