ng serve error: "Cannot read property '0' of undefined" - angularjs

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.

Related

Deploying Google App Engine Nest.js via Bitbucket Pipelines

In my current setup, I use Bitbucket Pipelines to deploy a Nest.js backend to Google App Engine. Unfortunately, I haven't gotten my NestJS backend up and running yet. Before I had the same setup with a simple Express.js backend which worked without problems.
The problem is as follows and I am now at a loss as to what else to try:
Here's my bitbucket-pipelines.yaml:
image: node:16.15.0
pipelines:
branches:
master:
- step:
name: Install Dependencies & Build Application
script:
- npm install
- npm run build
- step:
name: Deploy to Google App Engine
deployment: development
script:
- pipe: atlassian/google-app-engine-deploy:1.0.0
variables:
KEY_FILE: $KEY_FILE
PROJECT: 'example-project'
VERSION: 'development'
DEPLOYABLES: 'default.yaml'
STOP_PREVIOUS_VERSION: 'true'
Here's my package.json:
{
"name": "example-project",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "NODE_ENV=production node dist/main",
"start:dev": "NODE_ENV=development nest start --watch",
"start:stage": "NODE_ENV=stage nest start --watch",
"start:release": "NODE_ENV=release nest start --watch",
"start:prod": "NODE_ENV=production node dist/main",
"start:debug": "nest start --debug --watch",
"db": "../../cloud_sql_proxy -instances=example-project=tcp:3306",
"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": {
"#hapi/joi": "^17.1.1",
"#nestjs/cli": "^8.0.0",
"#nestjs/common": "^8.0.0",
"#nestjs/config": "^2.0.0",
"#nestjs/core": "^8.0.0",
"#nestjs/mapped-types": "^1.0.1",
"#nestjs/platform-express": "^8.0.0",
"#nestjs/typeorm": "^8.0.3",
"buffer-to-stream": "^1.0.0",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"cloudinary": "^1.30.0",
"firebase-admin": "^10.2.0",
"module-alias": "^2.2.2",
"mysql": "^2.18.1",
"pg": "^8.7.3",
"portfinder": "^1.0.28",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0",
"typeorm": "^0.2.45",
"typeorm-naming-strategies": "^4.1.0"
},
"devDependencies": {
"#nestjs/schematics": "^8.0.0",
"#nestjs/testing": "^8.0.0",
"#types/express": "^4.17.13",
"#types/hapi__joi": "^17.1.8",
"#types/jest": "27.4.1",
"#types/multer": "^1.4.7",
"#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": "^27.2.5",
"prettier": "^2.3.2",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "^27.0.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "^3.10.1",
"typescript": "^4.3.5"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
Maybe someone has already made experiences with this stack and can help me.

React js error TypeError: React.memo is not a function

I am new in react js just now I have a install data-table component using npm install react-data-table-component styled-components and apply its basic example but its give me error TypeError: React.memo is not a function I have try to google its but all solutions about the redux currently I am using this my package.json file
{
"private": true,
"scripts": {
"dev": "npm run development",
"start": "react-scripts start",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"mui-datatables": "^2.12.4",
"react-data-table-component": "^3.9.0",
"react-notifications-component": "^2.2.3",
"react-router-dom": "^5.1.2",
"styled-components": "^4.4.1"
}
}
Thanks
You are using react 16.2 but React.memo was released in 16.6. The library you are using requires the newer version of React.

how to minify angularjs+bootstrap4 project

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

Angular Cannot find name 'Angular' Visual Studio 2015 Dotnet MVC web app

So I am new in angular and i am working on visual studio 2015 update 3.
Simple Angular app work perfectly on VS2015 dotnet MVC project.
I have a problem when i downgradecomponent in app.module.ts file
angular.module('app').directive('viewTest', downgradeComponent({ component: ViewTestComponent }));
error is on angular it says cannot find name 'angular'
my package.json file
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"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": "~4.3.4",
"#angular/compiler": "~4.3.4",
"#angular/core": "~4.3.4",
"#angular/forms": "~4.3.4",
"#angular/http": "~4.3.4",
"#angular/platform-browser": "~4.3.4",
"#angular/platform-browser-dynamic": "~4.3.4",
"#angular/router": "~4.3.4",
"#angular/upgrade": "~4.3.4",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.5.10",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.8.1",
"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",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36"
},
"repository": {}
}
I also declare this.
declare var angular: any;
by doing that project run with no error. but nothing is rendering.
when i inspect element in browser it show me the converted component but not rendering any other angularjs component.
need help thanks

How to solve Unmet peer dependency when I already have higher package versions directly installed?

warnings:
├── UNMET PEER DEPENDENCY #angular/compiler#2.3.1
├── UNMET PEER DEPENDENCY #angular/core#2.3.1
├── UNMET PEER DEPENDENCY rxjs#5.0.2
├── UNMET PEER DEPENDENCY webpack#2.1.0-beta.27
└── zone.js#0.7.8
npm WARN #angular/core#2.3.1 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN #angular/http#2.3.1 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN #angular/router#3.3.1 requires a peer of rxjs#5.0.0-rc.4 but none was installed.
npm WARN codelyzer#1.0.0-beta.4 requires a peer of #angular/compiler#~2.2.0 but none was installed.
npm WARN codelyzer#1.0.0-beta.4 requires a peer of #angular/core#~2.2.0 but none was installed.
npm WARN less-loader#2.2.3 requires a peer of less#^2.3.1 but none was installed.
npm WARN script-ext-html-webpack-plugin#1.7.1 requires a peer of webpack#1 || ^2.2.0 but none was installed.
here is my package.json:
{
"name": "yo-ng2",
"version": "0.0.1",
"description": "Angular 2 Proj",
"keywords": [
"angular2",
"webpack",
"typescript",
"ngrx"
],
"homepage": "https://github.com/orizens/echoes-ng2",
"license": "MIT",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci": "npm run lint && npm test && npm run e2e",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean:start": "npm start",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"lint": "npm run tslint \"src/**/*.ts\"",
"postversion": "git push && git push --tags",
"prebuild:dev": "npm run clean:dist",
"prebuild:prod": "npm run clean:dist",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"webdriver-manager": "webdriver-manager",
"webdriver:start": "npm run webdriver-manager start",
"webdriver:update": "npm run webdriver-manager update",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"dependencies": {
"#angular/common": "2.3.1",
"#angular/compiler": "2.3.1",
"#angular/core": "2.3.1",
"#angular/forms": "2.3.1",
"#angular/http": "2.3.1",
"#angular/platform-browser": "2.3.1",
"#angular/platform-browser-dynamic": "2.3.1",
"#angular/platform-server": "2.3.1",
"#angular/router": "3.3.1",
"#angularclass/conventions-loader": "^1.0.2",
"#angularclass/hmr": "~1.2.2",
"#angularclass/hmr-loader": "~3.0.2",
"assets-webpack-plugin": "^3.4.0",
"ng2-bootstrap": "^1.4.2",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"rxjs": "5.0.2",
"zone.js": "~0.7.2"
},
"devDependencies": {
"#ngrx/core": "1.2.0",
"#ngrx/effects": "2.0.0",
"#ngrx/store": "2.2.1",
"#ngrx/store-devtools": "3.2.2",
"#types/core-js": "^0.9.28",
"#types/hammerjs": "^2.0.33",
"#types/jasmine": "2.5.41",
"#types/node": "^6.0.38",
"#types/protractor": "^1.5.20",
"#types/selenium-webdriver": "2.53.33",
"#types/source-map": "^0.1.27",
"#types/uglify-js": "^2.0.27",
"#types/webpack": "^1.12.34",
"angular2-infinite-scroll": "0.3.0",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^2.2.1",
"bootstrap": "3.3.7",
"bootstrap-sass": "3.3.7",
"codelyzer": "~1.0.0-beta.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "0.26.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "^0.9.0",
"font-awesome": "^4.6.3",
"font-awesome-sass-loader": "1.0.3",
"font-awesome-webpack": "0.0.4",
"gh-pages": "^0.12.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "0.2.0",
"json-loader": "^0.5.4",
"ngrx-action-creator-factory": "0.0.1",
"ngrx-store-localstorage": "^0.1.5",
"node-sass": "4.1.1",
"parse5": "^2.2.2",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"rimraf": "^2.5.4",
"sass-loader": "4.1.1",
"script-ext-html-webpack-plugin": "^1.3.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.2",
"ts-node": "^1.7.0",
"tslint": "3.15.1",
"tslint-loader": "2.1.5",
"typedoc": "^0.5.0",
"typescript": "2.1.1",
"uid": "0.0.2",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.27",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "2.1.0-beta.11",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^1.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/orizens/echoes-ng2.git"
},
"bugs": {
"url": "https://github.com/orizens/echoes-ng2/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}

Resources