Metadata version mismatch Angular 4 #ng-bootstrap - javascript

I am working on Angular bootstrap module. When I install the module using following commands npm install --save #ng-bootstrap/ng-bootstrap and import the module to the main app module. Then I rerun getting error for the following.
ERROR in Error: Metadata version mismatch for module F:/nodejs/angular4/mybootst
rap3/node_modules/#ng-bootstrap/ng-bootstrap/index.d.ts, found version 4, expect
ed 3, resolving symbol AppModule in F:/nodejs/angular4/mybootstrap3/src/app/app.
module.ts, resolving symbol AppModule in F:/nodejs/angular4/mybootstrap3/src/app
/app.module.ts
Here is my angular version
#angular/cli: 1.4.4
node: 6.11.2
os: win32 ia32
#angular/animations: 4.4.6
#angular/common: 4.4.6
#angular/compiler: 4.4.6
#angular/core: 4.4.6
#angular/forms: 4.4.6
#angular/http: 4.4.6
#angular/platform-browser: 4.4.6
#angular/platform-browser-dynamic: 4.4.6
#angular/router: 4.4.6
#angular/cli: 1.4.4
#angular/compiler-cli: 4.4.6
#angular/language-service: 4.4.6
typescript: 2.3.4
Question
Have to install angular latest version?.
If I install latest version can I run my Angular 4 project?
Why I'am getting this error?


The error is caused by the fact that ng-bootstrap module version that is installed has its metadata targeted for a higher version of Angular. To resolve this,
Find out which version of ng-bootstrap is currently installed by running
npm list ng-bootstrap
Run the following to see all the available versions of the ng-bootstrap node module.
npm show ng-bootstrap#* version
Pick one version lower than what is currently installed, and install it
npm install ng-bootstrap#x.y.z
*The x.y.z refers to version number.
Try npm start now, and see if it works.
If it doesn't, revert to one more lower version, and retry the above step of npm install.
Once it works - update package.json with the version number that resolved the issue so this issue doesn't appear again in the future. Let's say if version no. 1.3.0 solves the issue, then update the package json with.
"#ng-bootstrap/ng-bootstrap": "1.3.0"
Remove the caret (^) if it exists, to prevent auto-selecting the highest module version available.


This occurs because as of the latest version of #ng-bootstrap has issue.
I solved it by changing
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
in the package.json to
"#ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
You need specify the correct version in the package.json otherwise it will fetch the latest ng-bootstrap which has issue working with angular 4

Related

next-auth is not installing in my project(Nextjs, React)

I use yarn create next-app for my nextjs in react project.But next-auth is not
installed in my project. My node version is LTS 16.15.1
and yarn version is 1.22.18, npm version is 8.9.0. I tried in latest version and old
version of nodejs but I am getting this error again and again.Kindly resolve my issue
how to install next-auth in my project.
yarn add v1.22.18
warning ../../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
error next-auth#4.3.4: The engine "node" is incompatible with this module.
Expected version "^12.19.0 || ^14.15.0 || ^16.13.0". Got "18.2.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this
command.

Got it from #pfcodes:
Add --ignore-engines flag for install and upgrade operations to get around this for now. here

npm not installed latest version of package even after using caret(^)

I have added a package(X) as follows in package.json file
package(X): "^5.0.0"
now the latest version of package(X) is 5.0.1. According to my understanding this should install 5.0.1 but it installs version 5.0.0 itself.
Now I have multiple angular projects which are using package(X) and each of them have the same setup. What surprises me is that it works absolutely fine i.e installs version 5.0.1 in some projects and does not in some projects
Here is the info about package(x)
npm library info

It does depend on other packages' dependencies.
If there is a package that requires X to be exactly 5.0.0, then it will install 5.0.0 as it will satisfy ^5.0.0.
If there isn't one, then it will install whichever latest that will satisfy ^5.0.0 which is 5.0.1 in this case.

Cannot find module '#schematics/angular/utility/project'

If I do ionic generate component xxx
An unhandled exception occurred: Cannot find module '#schematics/angular/utility/project'
Require stack:
/Users/user/develop/myapp/node_modules/#ionic/angular-toolkit/schematics/component/index.js
/Users/user/develop/myapp/node_modules/#angular-devkit/schematics/tools/export-ref.js
/Users/user/develop/myapp/node_modules/#angular-devkit/schematics/tools/index.js
/Users/user/develop/myapp/node_modules/#angular/cli/utilities/json-schema.js
/Users/user/develop/myapp/node_modules/#angular/cli/models/command-runner.js
/Users/user/develop/myapp/node_modules/#angular/cli/lib/cli/index.js
/Users/user/develop/myapp/node_modules/#angular/cli/lib/init.js
/Users/user/develop/myapp/node_modules/#angular/cli/bin/ng
Ionic:
Ionic CLI : 6.10.1 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.2.3
#angular-devkit/build-angular : 0.1000.2
#angular-devkit/schematics : 10.0.2
#angular/cli : 10.0.2
#ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.2
#capacitor/core : 2.1.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)
Utility:
cordova-res : not installed
native-run : not installed
System:
ios-sim : 8.0.2
NodeJS : v12.18.1 (/usr/local/bin/node)
npm : 6.14.6
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c

Seems like it's an ionic incompatibility with angular 10+
THIS WORKED FOR ME
npm uninstall #schematics/angular
npm install #schematics/angular#9.1.0

You may first proceed with npm uninstall #schematics/angular and TERMINAL informs that "removed XX packages and audited XXXX packages" etc, then you may implement npm install #schematics/angular#9.1.0.
Accordingly, ng add ngx-bootstrap provides:
✅️ Added "bootstrap
✅️ Added "ngx-bootstrap

In my case it was to have this:
"#ionic/angular-toolkit": "^2.3.3"
instead of "^2.2.0"
My Angular: 10.1.4.
I found this out by creating fresh Ionic project after upgrading Ionic CLI to newest.

The problem is schematics module incompatibility.
Find out the version of the #schematics/angular
node_modules/#schematics/angular/package.json/#_from
Find out the version of #schematics/angular which used in the #ionic/angular-toolkit module.
node_modules/#ionic/angular-toolkit/package.json
// package.json
"dependencies": {
"#schematics/angular": "^11.2.4",
}
Make sure the versions are matching.
If the versions do not match, then install the matching version of #schematics/angular.
Have an awesome day!

can you please try to run ng add #angular/pwa#13?

Try the code below
npm install #angular-devkit/schematics #angular-devkit/core #schematics/angular

This worked for me.
npm i --save-dev #nativescript/schematics

In my case, after failing with all kind of suggestions.
I update npm: https://www.hostingadvice.com/how-to/update-node-js-latest-version/
Later on Angular: https://update.angular.io/?v=13.0-14.0
and Ionic: https://ionicframework.com/docs/intro/upgrading-to-ionic-6
It works!!

ERROR in The target entry-point "#auth0/angular-jwt" has missing dependencies:

I have an angular project version:
#angular-devkit/architect 0.901.1
#angular-devkit/core 9.1.1
#angular-devkit/schematics 9.1.1
#schematics/angular 9.1.1
#schematics/update 0.901.1
rxjs 6.5.4
After executing:
#auth0/angular-jwt
I can not compile my project and it gives this error:
ERROR in The target entry-point "#auth0/angular-jwt" has missing dependencies:
- tslib
- #angular/core
- rxjs/operators
- rxjs
- #angular/common/http
I am very new at angular, please help me. I already executed these commands:
npm install --save "package names"
but they gave errors.

I had this same problem. As we are using the version of angular 9, we have to install version 4.2.0 of angular-jwt. According to their site:
https://www.npmjs.com/package/#auth0/angular-jwt
# auth0 / angular-jwt v5 is to be used with Angular v10 + and RxJS v6 +. For Angular v6 + to v9, use # auth0 / angular-jwt v4
So:
Uninstall #auth0 (npm uninstall #auth0/angular-jwt)
Deleted the package-LOCK.json folder
Ran the compatible installation #auth for angular 9 (npm install #auth0/angular-jwt#4.2.0)
Now when I ran the ng serve it ran normally.
I hope I helped you. ;)

Angular 4 Local workspace file ('angular.json') could not be found

I know that there is already questions like this that has answers to it, but i tried the most common solutions and i have been unsuccessful.
I'm cloning an angular 4 project from github and i do an npm install and i get this error when i run ng serve.
Local workspace file ('angular.json') could not be found. Error: Local
workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/workspace-loader.js:37:19)
at WorkspaceLoader.loadWorkspace (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/workspace-loader.js:24:21)
at BuildCommand._loadWorkspaceAndArchitect (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/architect-command.js:180:32)
at BuildCommand. (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/architect-command.js:47:25)
at Generator.next ()
at /Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/architect-command.js:7:71
at new Promise ()
at __awaiter (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/architect-command.js:3:12)
at BuildCommand.initialize (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/architect-command.js:46:16)
at Object. (/Users/poweruser/Applications/nodework/angular4-file-upload/node_modules/#angular/cli/models/command-runner.js:87:23)
My node version is
v8.11.2
My angular version is
Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 4.1.3
Any suggestions on what i should do ?

Try downgrading your project version of angular-cli to a version that's compatible with ng4...or upgrade the ng4 app to ng6

Categories

Resources