I'm working through the Angular 2 tutorial (https://angular.io/guide/quickstart) and using npm start to watch the TypeScript files and automatically transpile and reload the built-in web server when they change.
It works fine but there seems to be a lot of lag. Sometimes it can take 10 seconds before it notices that the files have changed. Once it sees the changes, it compiles and reloads very quickly.
Does anyone know if there's a way to set the polling interval to something faster?
I looked in the documentation for npm start and for the concurrently module, and I couldn't find any documented settings to change this.
Here's my package.json:
{
"name": "myapp",
"version": "0.1.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"test": "live-server --open=src/unit-tests.html"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"jasmine-core": "2.4.1",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
It's a typescript bug from version 1.7.4+.
In the package.json, write "typescript": "1.7.3" and then execute npm update to install that version.
Related
when i try to start my project in react, i am getting this error , i am using Ubuntu system
Found bindings for the following environments: - Linux 64-bit with Node.js 9.x
I am using node -v : 10.13.0 and npm -v : 6.11.2, here i have also attached my package.json file, can anyone please help me how to resolve this issue ?
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"classnames": "^2.2.6",
"gatsby": "^2.24.48",
"gatsby-background-image": "^1.1.2",
"gatsby-plugin-routes": "^1.0.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.28",
"gatsby-source-filesystem": "^2.3.25",
"gatsby-transformer-sharp": "^2.5.13",
"node-sass": "^4.14.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"prettier": "2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
You just need to use:
npm rebuild node-sass
I would suggest adding a .nvmrc file in the root of your project to avoid this error happen. This is a simple file that fixes the Node version for your project in order to avoid a mismatch between versions and forcing the project to run under a specific version. You just need to add a .nvmrc file with this content:
v10.13.0
Try removing your node_modules and reinstalling. You might also want to check that you don't have something link NVM or and old Node 9 version in your path, that node-sass is picking up while intalling
I am running a react app that uses express as a backend. I followed this tutorial on how to connect the two then deploy to heroku. In short I am running express on port 5000 as instructions tell me to, and on client side in the package json proxy to port 5000. from server side I run a npm tool called concurrently that runs both in tandem.
Now the problem is the npm run build only seems to be half working. the page loads for a split second on port 5000 (before run build I would use port 3000) disappears leaving only my custom background colors. no errors i can see either for server side or react app side.
I tried changing the server's port numbers first thinking this was the issue as serve -s build runs the app on port 5000 which likely conflicted but the same issue remains.
Please let me know what code If any I can show to help diagnose this as Im afraid I do not know what to present other than my file layout (see the tutorial's link I have the same overall layout) and bellow will be my package jsons for client and server respectively.
Client package.json:
"name": "friftr_version_2_0",
"version": "2.0.0",
"description": "Friftr, but its in react",
"main": "index.js",
"author": "V1llage_ID10T",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.9.8",
"#material-ui/icons": "^4.9.1",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazy-load-image-component": "^1.4.1",
"react-router-dom": "^5.1.2",
"react-router-page-transition": "^3.1.0",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Server package.json
{
"name": "friftr2",
"version": "2.0.0",
"description": "friftr redesign in express, react, material-ui, mongoose database. ",
"main": "server.js",
"repository": {
"type": "git",
"url": "git+https://github.com/n/a.git"
},
"author": "V1LLAGE_ID10T",
"license": "ISC",
"bugs": {
"url": "https://github.com/n/a/issues"
},
"homepage": "https://github.com/n/a#readme",
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.3",
"concurrently": "^5.1.0",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"got": "^10.6.0",
"hsts": "^2.2.0",
"http-proxy-middleware": "^1.0.1",
"mongo-sanitize": "^1.1.0",
"mongoose": "^5.9.3",
"mongoose-findorcreate": "^3.0.0",
"node-fetch": "^2.6.0",
"nodemon": "^2.0.2",
"passport": "^0.4.1",
"passport-google-oauth20": "^2.0.0",
"passport-local-mongoose": "^6.0.1",
"tall": "^3.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
}
so the consensus from my discord buddies has told me NEVER do what I just did and instead uninstall concurrently and have all my fetch requests connect to the address and port rather than root onward.
so my fetch requests on react would go from /api/query/n/n/new/all/0 to http://localhost:5000/api/query/n/n/new/all/0 or whatever port i work on.
I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?
I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!
I created a new angularjs project with angularjs seed.
I added some external dependencies with bower - like bootstrap4 and some angularjs additional modules like ui-rout and ui-grid.
The size of all the source files is about 25 Megabyte.
I want to minify it obviously :)
I tried doing with grunt and grunt-es and uglify with concatanating the files and without, and it always fails :(
Usually with 'unexpected character' error.
Anyone here that Minified Angularjs seed + bootstrap4 with grunt or any other tasks manager tool that can guide me?
Im getting really frustrated :(
MY PACKAGE.JSON
{
"name": "angular-seed",
"private": true,
"version": "0.0.0",
"description": "A starter project for AngularJS",
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"bower": "^1.7.7",
"grunt": "^1.0.3",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-uglify-es": "git+https://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
"grunt-dist": "0.0.6",
"grunt-es6-transpiler": "^1.0.2",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",
"update-deps": "npm update",
"postupdate-deps": "bower update",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/).join('//##NG_LOADER_START##\\n'+loaderText+' //##NG_LOADER_END##');fs.writeFileSync(indexFile,indexText);\""
},
"dependencies": {
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-qunit": "^2.0.0",
"grunt-contrib-watch": "^1.1.0"
}
}
PROJECT STRUCTRUE
I found this thread
AngularJS has some naming conventions which seem to collide with minification:
Since AngularJS infers the controller's dependencies from the names of
arguments to the controller's constructor function, if you were to
minify the JavaScript code for the PhoneListController controller, all
of its function arguments would be minified as well, and the
dependency injector would not be able to identify services correctly.
This plugin seems deal with the issue:
ng-annotate
I'm new to Angular. I downloaded the Angular 2 quick-start template from https://github.com/angular/quickstart (app folder is inside an src folder), and then used VS code to modify packages.json content and manually create files/folders inside the app folder for components/services/etc.. based on tutorials that I found online. The application runs and works fine when I kick it off using npm start but I'm stuck creating the DIST folder which I need in order to upload a minified version of my application to azure web app. Whenever I run ng build from the root of my angular 2 project, I get the below error:
Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
at Class.run (C:\AngularTestProject\node_modules\angular-cli\tasks\build-webpack.js:15:98)
at Class.run (C:\AngularTestProject\node_modules\angular-cli\commands\build.js:51:26)
at Class.<anonymous> (C:\AngularTestProject\node_modules\angular-cli\angular-cli\lib\models\command.js:152:17)
at process._tickCallback (internal/process/next_tick.js:103:7)
This is the content of packages.json:
{
"name": "EventRecorder",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"angular-cli": {},
"scripts": {
"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"
},
"keywords": [],
"author": "",
"license": "MIT",
"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",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"#angular/compiler-cli": "2.2.1",
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.0.10",
"angular-cli": "1.0.0-beta.21",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"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",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"ts-node": "1.2.1",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36",
"webdriver-manager": "10.2.5"
},
"repository": {}
}
And lastly this is the folder structure of my app:
App Folder Structure
Issue was resolved by installing the latest version of Angular CLI (1.0.0-rc.1) and recreating the Angular project (using ng new projectname command) and copying my TS files from my old project over.