Hello I just started learning angular 2. I have read a bit on express and have better understanding in that. One thing that confuses me is package.json. particularly the start part.
This is the packege.json when I had only express installed.
{
"name": "Whatever",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
}
}
Now I decided to install or add angular to the project file. But I am not sure how to properly change package.json.
This is the package.json form angular2 webpage.
{
"name": "angular2-quickstart",
"version": "1.0.0",
"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-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
but this package.json has different start. I am confused on how should the app start now both with angular 2 and express.
How do I combine both package.json's properly?
Usually, when you need to work on frontend + backend, you will setup 2 projects : client and server.
Each project will get its own package.json.
Then you don't need to combine package.json files.
If you need to get up and running with angular2 and express, you can check this yeoman generator
Here's a GitHub repository that is an example of how to get up and running with the angular release candidate and express.
Related
I have an Angular library that I'm working to update from Angular 11 to 13. Jest ran fine in 11 and 12, but now I'm having a lot of trouble with v13. I've followed the steps outlined here
The error I'm getting is as follows:
Cannot find module '#angular/core/testing' from 'node_modules/jest-preset-angular/setup-jest.js'
Require stack:
node_modules/jest-preset-angular/setup-jest.js
jest.setup.ts
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
at Object.<anonymous> (node_modules/jest-preset-angular/setup-jest.js:2:24)
It seems odd that it's looking for angular core files within the setup-jest file.
jest.config.js
module.exports = {
preset: 'jest-preset-angular',
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
snapshotSerializers: [
],
roots: ['src'],
moduleNameMapper: {
'^lodash-es$': '<rootDir>/node_modules/lodash/index.js'
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
testMatch: ['<rootDir>/src/**/*.spec.ts'],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.mjs?$': 'ts-jest',
},
transformIgnorePatterns: ['node_modules/(?!(jest-test))', 'node_modules/(?!.*\\.mjs$)', 'node_modules/(?!\\#angular)'],
coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
coverageReporters: ['json', 'text', 'html', 'cobertura'],
reporters: ['default', ['jest-junit', { outputDirectory: 'TestResults', outputName: 'jest-junit.xml' }]],
};
jest.setup.ts
import 'zone.js';
import 'zone.js/testing';
import 'jest-preset-angular/setup-jest';
package.json
{
"name": "my-lib-name",
"version": "12.0.2",
"description": "",
"main": "src/main.ts",
"scripts": {
"build": "npm run clean && npm run build:types && npm run build:umd && npm run build:esm2015 && npm run build:app",
"build:app": "tsc --project tsconfig.app.json",
"build:types": "tsc --project tsconfig.app.json --emitDeclarationOnly",
"build:umd": "tsc --project tsconfig.umd.json",
"build:esm2015": "tsc --project tsconfig.esm2015.json",
"clean": "rimraf dist",
"test": "jest --watch-all --detect-open-handles --reporters=default",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"ci:test": "jest --ci --no-cache --maxWorkers=4 --detect-open-handles --coverage",
"postbuild": "node scripts/postbuild.js"
},
"author": "",
"license": "ISC",
"peerDependencies": {
"#types/lodash-es": "^4.17.4",
"date-fns": "^2.13.0",
"lodash-es": "^4.17.21",
"rxjs": "^6.5.5"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.9",
"#angular/animations": "^13.3.11",
"#angular/cdk": "^12.2.13",
"#angular/cli": "^13.3.9",
"#angular/common": "^13.3.11",
"#angular/compiler": "^13.3.11",
"#angular/compiler-cli": "^13.3.11",
"#angular/core": "^13.3.11",
"#angular/forms": "^13.3.11",
"#angular/material": "^12.2.13",
"#angular/platform-browser": "^13.3.11",
"#angular/platform-browser-dynamic": "^13.3.11",
"#types/chance": "^1.1.3",
"#types/estree": "^1.0.0",
"#types/jest": "^26.0.22",
"#types/lodash": "^4.14.168",
"#types/lodash-es": "^4.17.4",
"#typescript-eslint/eslint-plugin": "^4.14.2",
"#typescript-eslint/parser": "^4.14.2",
"chance": "^1.1.8",
"date-fns": "^2.13.0",
"eslint": "^7.19.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^31.6.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"jest": "^26.6.3",
"jest-junit": "^12.0.0",
"jest-marbles": "^2.5.1",
"jest-preset-angular": "^12.2.0",
"lodash-es": "^4.17.21",
"rxjs": "6.5.5",
"ts-jest": "^26.5.4",
"ts-loader": "^8.0.17",
"ts-node": "^9.1.1",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"zone.js": "~0.11.4"
},
"dependencies": {
"ng-packagr": "^12.2.7"
}
}
It seems that you are on an old version of Jest (version 26). Jest Preset Angular version 12 requires Jest version 28.
According to Jest Preset Angular's documentation, you are missing this setting in jest.config.js:
module.exports = {
globalSetup: 'jest-preset-angular/global-setup',
}
Make sure to review Jest Preset Angular's migration guide for Angular 13.
We recently migrated our app to Angular 10 and PrimeNG 9, and now we are preparing to migrate these frameworks to the latest version.
We trying to prepare our app to migration and want to use Ivy Compiler as Angular recommends.
But when activate Ivy compiler and aot to true it shows the following error when do ng build:
ERROR in
node_modules/#maestro-ng/primeng/maestro-primeng.module.d.ts:1:22 -
error NG6003: Appears in the NgModule.exports of AppSharedModule, but
could not be resolved to an NgModule, Component, Directive, or Pipe
class.
This likely means that the library (#maestro-ng/primeng) which
declares MaestroPrimengModule has not been processed correctly by
ngcc, or is not compatible with Angular Ivy. Check if a newer version
of the library is available, and update if so. Also consider checking
with the library's authors to see if the library is expected to be
compatible with Ivy.
This is the complete package.json:
{
"name": "codex-frontend",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"dev": "ng serve -c dev --watch=false",
"postinstall": "ngcc",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^10.2.5",
"#angular/cdk": "^10.2.7",
"#angular/common": "^10.2.5",
"#angular/compiler": "^10.2.5",
"#angular/core": "^10.2.5",
"#angular/forms": "^10.2.5",
"#angular/platform-browser": "^10.2.5",
"#angular/platform-browser-dynamic": "^10.2.5",
"#angular/router": "^10.2.5",
"#fortawesome/fontawesome-free": "5.15.4",
"#fullcalendar/core": "5.9.0",
"#maestro-ng/core": "https://nexus.myorg.com.br/repository/npm-all/#maestro-ng/core/-/core-1.10.0.tgz",
"#maestro-ng/primeng": "https://nexus.myorg.com.br/repository/npm-all/#maestro-ng/primeng/-/primeng-1.10.0.tgz",
"#types/pdfjs-dist": "2.7.5",
"bootstrap": "5.1.1",
"chart.js": "3.5.1",
"core-js": "3.18.0",
"g": "2.0.1",
"jquery": "3.6.0",
"js-base64": "3.7.2",
"moment": "2.29.1",
"ng2-currency-mask": "9.0.2",
"ng2-pdfjs-viewer": "6.0.2",
"ngx-moment": "5.0.0",
"pdfjs-dist": "2.9.359",
"#popperjs/core": "2.10.1",
"primeflex": "2.0.0",
"primeicons": "4.0.0",
"primeng": "9.1.3",
"quill": "1.3.7",
"rxjs": "6.6.2",
"simple-pdf-viewer": "2.0.3",
"tslib": "2.3.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1000.8",
"#angular/cli": "^10.2.3",
"#angular/compiler-cli": "10.2.5",
"#angular/language-service": "10.2.5",
"#fortawesome/fontawesome-free": "5.8.2",
"#types/jasmine": "3.9.1",
"#types/jasminewd2": "2.0.10",
"#types/node": "16.9.6",
"codelyzer": "6.0.2",
"jasmine-core": "3.9.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.3.4",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"protractor": "7.0.0",
"ts-node": "10.2.1",
"tslint": "^5.20.1",
"tslint-eslint-rules": "^5.4.0",
"typescript": "3.9.7"
}
}
Even when use `"postinstall": "ngcc" it does not work.
Is it possible to use Ivy With Angular 10 and PrimeNG 9 our we need to first migrate PrimeNG to 10?
PrimeNG does line with the Angular major version.
PrimeNG 10 depends on Angular 10, PrimeNG 11 depends on Angular 11.
You can find the offical source of the information on here
The error is caused by an internal library that is not builded using Ivy.
If you encounter this error because of an internal library of your company, make sure this library is builded using Ivy. As you may know already , ViewEngine is deprecated and will be removed soon.
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
Check out this conversation. ngcc's source has documentation
I'm trying to add redux to an Ionic 3+ application. This is what I ran:
npm i redux #angular-redux/store flux-standard-action redux-logger --save
I get the following error: UNMET PEER DEPENDENCY redux#4.0.1
So, I then completed the following steps to try to rectify the issue:
rm -rf node_modules/
npm cache clean
npm install redux#4.0.1 --save
This gives me the same err: UNMET PEER DEPENDENCY redux#4.0.1
How can it be a dependency of itself? Something weird is going on. I've tried rearranging where in the package.json the listing falls, to no avail. Help please. Below is my package.json
{
"name": "ionic-testing-elite-ionic",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"e2e-update": "webdriver-manager update --standalone false --gecko false",
"e2e-test": "protractor ./test-config/protractor.conf.js",
"e2e": "npm run e2e-update && npm run e2e-test"
},
"dependencies": {
"#angular-redux/store": "^7.1.1",
"#angular/common": "5.0.0",
"#angular/compiler": "5.0.0",
"#angular/compiler-cli": "5.0.0",
"#angular/core": "5.0.0",
"#angular/forms": "5.0.0",
"#angular/http": "5.0.0",
"#angular/platform-browser": "5.0.0",
"#angular/platform-browser-dynamic": "5.0.0",
"#ionic-native/core": "3.12.1",
"#ionic-native/splash-screen": "3.12.1",
"#ionic-native/status-bar": "3.12.1",
"#ionic/storage": "2.1.3",
"flux-standard-action": "^2.0.3",
"ionic-angular": "^3.9.2",
"ionicons": "3.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.0",
"#types/jasmine": "^2.5.41",
"#types/node": "^7.0.8",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.4.5",
"ionic": "3.9.2",
"jasmine": "^2.5.3",
"jasmine-spec-reporter": "^4.1.0",
"karma": "^1.5.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"null-loader": "^0.1.1",
"protractor": "^5.1.1",
"ts-loader": "^2.0.3",
"ts-node": "^3.0.2",
"typescript": "2.4.2"
},
"version": "0.0.1",
"description": "An Ionic project"
}
OK. I read some more into the error I was getting. The problem was that the current redux package which was being installed by default was not compatible with the version of #angular-redux/store which was being installed. There has been a major version upgrade to redux which isn't backwards compatible. I had to install redux#3.7.2 and it fixed the problem.
I am working on angular2 and I want to stop the browser from refresh every change in every file.I have call in package.json to
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
if I remove the tsc from the start, I cant see change in files even after refersh the browser.
any idea how to stop the watch on files and still be able to refersh the browser and see changes?
this is the full package.json
{
"name": "product-management",
"version": "1.0.0",
"author": "avi golan",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"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",
"angular2-cookie": "^1.2.5",
"angular2-highcharts": "^0.4.1",
"bootstrap": "^3.3.6",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"highcharts": "^5.0.5",
"moment": "^2.16.0",
"ng2-bootstrap": "^1.1.16",
"ng2-charts": "^1.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}
just added bs-config.json file with to the root folder
{
"codeSync": false
}
I'm working on an Angular2 (currently on RC1) project in Visual Studio 2015; and straining my understanding of NPM.
Looking in the Dependencies/npm folder, and /node_modules there are hundreds of npm packages. Most of which are labeled as extraneous by Visual Studio (in Dependencies/npm)
I went through and removed all the extraneous packages manually (npm prune did nothing).
I apparently accidentally removed a non-extraneous package, which I attempted to restore. NPM went ahead and re-downloaded all 500+ extraneous packages again...
What am I missing?
My package.json:
{
"name": "MySite",
"version": "0.0.1",
"description": "My Site",
"repository": "./src",
"license": "UNLICENSED",
"dependencies": {
"#angular/common": "^2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "^2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/router": "^2.0.0-rc.1",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"jquery": "2.2.2",
"jquery-validation": "1.15.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-concat": "2.6.0",
"gulp-sass": "2.3.1",
"typings": "0.8.1",
"typescript": "^1.8.10",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"webpack-merge": "0.12.0"
},
"scripts": {
"postinstall": "typings install"
}
}