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
Related
I am defined the functional properties in model like this:
export interface IIapProductProps {
iapproducts: IIapProductState,
dispatch: Dispatch
loading: boolean
}
and this is the model:
interface IIapProductModel {
namespace: 'iapproduct'
state: IIapProductState
reducers: {
getPage: Reducer<IIapProductState>,
getList: Reducer<IIapProductState>,
edit:Reducer<IIapProductState>,
add: Reducer<IIapProductState>,
}
effects: {
getIapProductPage: Effect,
getProductList: Effect,
editProduct: Effect,
addProduct: Effect
}
subscriptions: {
setup: Subscription
}
}
does the IIapProductProps first parameter name must be the same with the namespace's name? I found when I changed the namespace to iapproduct, the properties iapproducts must be the same with the model namespace. this is the package.json:
{
"name": "ant-design-pro",
"version": "5.2.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build",
"build": "umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "umi g tmp",
"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"openapi": "umi openapi",
"playwright": "playwright install && playwright test",
"precommit": "lint-staged",
"prettier": "prettier -c --write \"src/**/*\"",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev umi dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
"start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:e2e": "node ./tests/run-tests.js",
"tsc": "tsc --noEmit"
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#ant-design/pro-components": "^1.1.14",
"#ant-design/pro-descriptions": "^1.10.0",
"#ant-design/pro-form": "^1.52.0",
"#ant-design/pro-layout": "^6.32.0",
"#ant-design/pro-table": "2.72.1",
"#loadable/component": "^5.15.2",
"#types/crypto-js": "^4.1.1",
"#types/react-loadable": "^5.5.6",
"#umijs/route-utils": "^2.0.0",
"antd": "^4.17.0",
"classnames": "^2.3.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.1",
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
"lodash": "^4.17.0",
"moment": "^2.29.0",
"omit.js": "^2.0.2",
"rc-menu": "^9.1.0",
"rc-util": "^5.16.0",
"react": "^17.0.0",
"react-dev-inspector": "^1.7.0",
"react-dom": "^17.0.0",
"react-helmet-async": "^1.2.0",
"react-loadable": "^5.5.0",
"react-native-aes-crypto": "^2.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"umi": "3.5.0",
"umi-request": "^1.4.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"#ant-design/pro-cli": "^2.1.0",
"#playwright/test": "^1.17.0",
"#types/express": "^4.17.0",
"#types/history": "^4.7.0",
"#types/jest": "^26.0.0",
"#types/lodash": "^4.14.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-helmet": "^6.1.0",
"#types/react-router": "^5.1.18",
"#types/react-router-dom": "^5.3.3",
"#umijs/fabric": "^2.8.0",
"#umijs/openapi": "^1.3.0",
"#umijs/plugin-blocks": "^2.2.0",
"#umijs/plugin-esbuild": "^1.4.0",
"#umijs/plugin-openapi": "^1.3.0",
"#umijs/preset-ant-design-pro": "^1.3.0",
"#umijs/preset-dumi": "^1.1.0",
"#umijs/preset-react": "^1.8.17",
"#umijs/yorkie": "^2.0.5",
"carlo": "^0.9.46",
"cross-env": "^7.0.0",
"cross-port-killer": "^1.3.0",
"detect-installer": "^1.0.0",
"enzyme": "^3.11.0",
"eslint": "^7.32.0",
"express": "^4.17.0",
"gh-pages": "^3.2.0",
"jsdom-global": "^3.0.0",
"lint-staged": "^10.0.0",
"mockjs": "^1.1.0",
"prettier": "^2.5.0",
"puppeteer-core": "^8.0.0",
"stylelint": "^13.0.0",
"swagger-ui-react": "^4.12.0",
"typescript": "^4.5.0",
"umi-serve": "^1.9.10"
},
"engines": {
"node": ">=10.0.0"
},
"gitHooks": {
"commit-msg": "fabric verify-commit"
}
}
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.
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.
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.