Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) - angularjs

I am following along a codelab on the Yeoman webpage, and so far I've managed to follow along (with a few major hiccups getting my development environment going, but now it doesn't return any errors).
So I made my project folder and ran yo, selected AngularJS and run the thing. Fairly soon into the process I got a prompt ? Overwrite package.json? I answered with y and got the following warnings:
npm WARN package.json codelab#0.0.0 No license field.
npm WARN peerDependencies The peer dependency karma#>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core#* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency phantomjs#>=1.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing fsevents#0.3.6
After that, it finished what it was doing, so I ran bower install again just to be sure (because of the package.json thing), and then grunt serve. Now grunt says done, without errors, but my page only loads main.css. I have a strong feeling the bootstrap.css file is missing. This is what it looks like, when the codelab instructions say it should look like this.
If you need further information on what was generated, here's a GitHub repository link.
Any insight on what I'm doing wrong (if anything) is welcome.

After doing the codelab I had exactly the same problem with the same result as you are getting (warnings and all). I had to just work around the issue by rolling back to Bootstrap 3.3.4.
Just edit bower.json and change the Bootstrap line to:
"bootstrap": "3.3.4",
Then run the following and it should work:
bower install
grunt serve

It didn't work for me either. I got a solution from here:
https://github.com/twbs/bootstrap/issues/16663
We fixed this issue temporary by overriding our project bower.json. For us it works fine, but we are waiting for some solution from Bootstrap.
"overrides":{
"bootstrap" : {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}

If you stick to a shell, you can just type:
bower install --save bootstrap#3.3.4
grunt serve
That will ensure that Twitter Bootstrap gets downgraded to a more Bower/yo-angular friendly version and save it as a dev dependency. Grunt will then run 'wiredep' during its 'serve' task and append the bootstrap.css in your project's index.html.

In the bower.json file, the dependency version of Bootstrap is set as:
"bootstrap": "^3.2.0",
By default, that means install the latest version higher than 3.2.0.
As a result, the latest version 3.3.5 is installed and that breaks.
So, remove the ^ sign and replace:
"bootstrap": "^3.2.0",
with:
"bootstrap": "3.3.4",

It is not ideal, but I rolled back to Bootstrap version 3.3.4 and setting up like this:
bower install --save bootstrap#3.3.4
bower_concat: {
all: {
dest: {
'js': 'path/to/file/_bower.js',
'css': 'path/to/file/_bower.css'
}
}
}

Related

npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#*

I am new to React and, starting with building an app, I came up with a problem while installing dependencies. I wanted to include packages like material-ui/core, material-ui/icons, react-reveal, react-scroll and react-slick.
While installing with this command:
npm install #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
It showed that they've been installed, and when I started coding it didn't compile it.
That's when I came up with this error:
npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/parser#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/typescript-estree#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp#1.1.2 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils#3.14.0 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is installed. You must install peer dependencies yourself.
What am I missing?
try this:
Delete 'package-lock.json' file
In the Terminal go to the folder with your project and type 'npm install --save typescript'
Then type 'npm install'
It helped me.
You can also resolve this issue by just installing typescript (it's clearly written in the debug output)
$ npm install typescript
You may also use other package-managers in favor of npm like pnpm or yarn.
Update:
You can also use an npm package that does this for you. Helpful when there are many peer dependencies.
The package is npm-install-peers. If you want slightly more control over these, you may want to check out install-peerdeps
Also, please do a further read on this StackOverflow answer.
While trying to reproduce the same error, on a Windows 10 machine with Node and npm installed, created an app with
npx create-react-app APP_NAME
If I run
npm start
the application will run just fine if I go to http://localhost:3000/
In order to fix the problem you're getting, I'd just install Typescript
npm install typescript
and that should suffice.
I will list every little bit of gory detail, just in case for some people it is helpful:
Remove package-lock.json (rm package-lock.json) if necessary
yarn add #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
Read messages to make sure the dependencies were added. If you see any, then yarn add them as well.
Change into your node_modules directory (cd node_modules) then list to make sure all your packages and dependencies were installed (ls)
Check your App.js to make sure your import has the correct path (whether you really should have a ../ or not)
Go to the browser tab that is running localhost:3000
Refresh the page (For Chrome, it's the upper left clockwise arrow to the left of where you enter the URL)
add this in package.json:
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}

Node + React dependency issue, peerDependency?

I'm trying to use this code I found linked off an article online: https://github.com/kangzeroo/Kangzeroos-AWS-Cognito-Boilerplate
The package.json is here: https://github.com/kangzeroo/Kangzeroos-AWS-Cognito-Boilerplate/blob/master/Boilerplate_Frontend/App/package.json
After downloading and running: npm install, I get this warning:
$ npm install
...
npm WARN radium#0.18.4 requires a peer of react#^15.3.0 but none was installed.
npm WARN Kangzeroos-ES6-React-Redux-Boilerplate#1.0.0 No repository field.
I've been reading about peerDependencies, so I add this to the package.json
"peerDependencies": {
"react": "^15.3.0"
}
After I add that, now I get this:
$ npm install
...
npm WARN Kangzeroos-ES6-React-Redux-Boilerplate#1.0.0 requires a peer of react#^15.3.0 but none was installed.
npm WARN radium#0.18.4 requires a peer of react#^15.3.0 but none was installed.
npm WARN Kangzeroos-ES6-React-Redux-Boilerplate#1.0.0 No repository field.
I've tried updating the version of react in the main dependencies, and installing multiple versions in the main ones also. But really, what is the proper way to figure this out and get this to run? It seems all the version numbers are pinned pretty well.
I know this is a fairly common issue, but man it's super confusing. Any tips would help.
Thanks!
npm WARN radium#0.18.4 requires a peer of react#^15.3.0 but none was installed.
This means that radium#0.18.4 requires a peer dependency react#^15.3.0.
The one you have listen in your package json is "react": "^0.14.3", so that's why npm complains about that.
The solution would be to update the react version to at least 15.3.0 but probably you can get away without it (it's just a warning and the React API is not changing that much).
npm WARN Kangzeroos-ES6-React-Redux-Boilerplate#1.0.0 No repository field.
This is just because of this "repository": "",. You can safely ignore it.
I got it working. I went into the top level node_modules folder, then went into radium folder, then added "react": "^15.3.0" into that package.json as the last item in the "dependencies" section and did an npm install inside of App/node_modules/radium/ and now the app loads :+1:

Why npm 3+ is not going to install these peer dependencies?

I'm with npm version 2.15.5 . When doing an npm install command, npm is warning me about the fact that NPM3+ will no more install some dependencies..
The peer dependency reflect-metadata#0.1.2 included from angular2 will no
longer be automatically installed to fulfill the peerDependency
in npm 3+. Your application will need to depend on it explicitly.
There is surely a good reason for that but I can't get it.. I put all my hopes in my package manager to be able to install the dependencies... So why It will not be the case with the latest version?

How do I fix the npm UNMET PEER DEPENDENCY warning?

I'm on Windows 10, with Node 5.6.0 and npm 3.6.0. I'm trying to install angular-material and mdi into my working folder. npm install angular-material mdi errors with:
+-- angular#1.5.0
+-- UNMET PEER DEPENDENCY angular-animate#^1.5.0
+-- UNMET PEER DEPENDENCY angular-aria#^1.5.0
+-- angular-material#1.0.6
+-- UNMET PEER DEPENDENCY angular-messages#^1.5.0 `-- mdi#1.4.57
npm WARN enoent ENOENT: no such file or directory, open
'C:\Users\xxxxx\Desktop\ngClassifieds\package.json'
npm WARN angular-material#1.0.6 requires a peer of
angular-animate#^1.5.0 but none was installed.
npm WARN angular-material#1.0.6 requires a peer of angular-aria#^1.5.0
but none was installed.
npm WARN angular-material#1.0.6 requires a peer of
angular-messages#^1.5.0 but none was installed.
How do I resolve this to get AngularJS Material and MDI installed?
npm no longer installs peer dependencies so you need to install them manually, just do an npm install on the needed deps, and then try to install the main one again.
Reply to comment:
it's right in that message, it says which deps you're missing
UNMET PEER DEPENDENCY angular-animate#^1.5.0 +--
UNMET PEER DEPENDENCY angular-aria#^1.5.0 +-- angular-material#1.0.6 +
UNMET PEER DEPENDENCY angular-messages#^1.5.0 `-- mdi#1.4.57`
So you need to npm install angular angular-animate angular-aria angular-material angular-messages mdi
UNMET PEER DEPENDENCY error is thrown when the dependencies of one or more modules specified in the package.json file is not met.
Check the warnings carefully and update the package.json file with correct versions of dependencies.
Then run
rm -rf node_modules/
npm cache clean
npm install
This will install all the required dependencies correctly.
In my case all the dependencies were already there. Please update NPM in that case as it might have been crashed. It solved my problem.
npm install -g npm
npm-install-peers worked for me.
npm install -g npm-install-peers
EDIT 2020
From npm v7.0.0, npm automatically installs peer dependencies. It is one of the reasons to upgrade to v7.
https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/
Also this page explains the rationale of peer dependencies very well.
https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md
This answer doesn’t apply all cases, but if you can’t solve the error by simply typing npm install
, this steps might help.
Let`s say you got this error.
UNMET PEER DEPENDENCY packageA#4.2.0
npm WARN packageB#3.3.0 requires a peer of packageA#^3.1.0 but none was installed.
This means you installed version 4.2.0 of packageA, but packageB#3.3.0 needs version 3.x.x of pakageA. (explanation of ^)
So you can resolve this error by downgrading packageA to 3.x.x, but usually you don`t want to downgrade the package.
Good news is that in some cases, packageB is just not keeping up with packageA and maintainer of packageB is trying hard to raise the peer dependency of packageA to 4.x.x.
In that case, you can check if there is a higher version of packageB that requires version 4.2.0 of packageA in the npm or github.
For example, Go to release page
Oftentimes you can find breaking change about dependency like this.
packageB v4.0.0-beta.0
BREAKING CHANGE
package: requires packageA >= v4.0.0
If you don’t find anything on release page, go to issue page and search issue by keyword like peer. You may find useful information.
At this point, you have two options.
Upgrade to the version you want
Leave error for the time being, wait until stable version is released.
If you choose option1:
In many cases, the version does not have latest tag thus not stable. So you have to check what has changed in this update and make sure anything won`t break.
If you choose option2:
If upgrade of pakageA from version 3 to 4 is trivial, or if maintainer of pakageB didn’t test version 4 of pakageA yet but says it should be no problem, you may consider leaving the error.
In both case, it is best to thoroughly test if it does not break anything.
Lastly, if you wanna know why you have to manually do such a thing, this link explains well.
One of the most possible causes of this error could be that you have defined older version in your package.json. To solve this problem, change the versions in the package.json to match those npm is complaining about.
Once done, run npm install and voila!!.
The given answer wont always work. If it does not fix your issue. Make sure that you are also using the correct symbol in your package.json. This is very important to fix that headache. For example:
warning " > #angular/compiler-cli#5.2.7" has incorrect peer dependency "typescript#>=2.4.2 <2.7".
warning " > tsickle#0.25.6" has incorrect peer dependency "typescript#>=2.4.2 <2.6".
So my typescript needs to be between 2.4.2 and 2.6 right?
So I changed my typescript library from using "typescript": "^2.7" to using "typescript": "^2.5". Seems correct?
Wrong.
The ^ means that you are okay with npm using "typescript": "2.5" or "2.6" or "2.7" etc...
If you want to learn what the ^ and ~ it mean see: What's the difference between tilde(~) and caret(^) in package.json?
Also you have to make sure that the package exists. Maybe there is no "typescript": "2.5.9" look up the package numbers. To be really safe just remove the ~ or the ^ if you dont want to read what they mean.
Ok so i struggled for a long time trying to figure this out. Here is the nuclear option, for when you have exhausted all other ways..
Make a new folder on your pc.
Download a brand new installation of angular - I used this guide: https://coursetro.com/posts/code/55/How-to-Install-an-Angular-4-App
Run it, make sure it works
Then install your dependancies one by one from your package.json file
Run it after each one is installed
When you are done, and it still works, import your actual code into this new project. Fix any compile errors the newer version of angular causes.
Thats what did it for me.. 1 hour of rework vs 6 hours of trying to figure out wtf was wrong.. wish i did it this way to start..
Today available Angular 2 rc.7, and I had a similar problem with rxjs#5.0.0-beta.12 UNMET PEER DEPENDENCY.
If you, like me, simply replaced #angular/...rc.6 to #angular/...rc.7 - it's not enough. Because, for example, #angular/router has no rc.6 version.
In this case, better review package.json in Quick start
This issue can also occur when trying to fix a security vulnerability issue on a dependency.
Here is what I did:
Audited installed dependencies
npm audit
If there are fix available, running the following would fix the issue most of the time:
npm audit fix
Some issues would have SEMVER WARNING, following the link would give us hint on how to do a manual review and/or what to do next.
Doing a bit more research led me to discovering this command:
npm upgrade
Seems npm audit fix did not account on updating peer dependencies, and running npm upgrade would fixed unmet peer dependencies.
Now check if we resolved the issue by running:
npm list
This will give us all dependencies for our project and warn us of any unmet peer deps errors. Upgrading for the most part is actually better than staying on older version of the package you are using, if you are not having a security vulnerability issue npm install is also a viable option.
You will get this warning if you are using npm v6 or before. After npm v7.0, npm development team has stated that they will automatically install peer dependencies, all together. Therefore, now you don't want to install your peer dependencies manually.
You can install npm v7.0 using this command,
npm install -g npm#7
Learn more about npm v7.0 from this blog post, published by the Github Blog.
In case you wish to keep the current version of angular, you can visit this version compatibility checker to check which version of angular-material is best for your current angular version. You can also check peer dependencies of angular-material using angular-material compatibility.
I removed package-lock.json and node_module , switch over to YARN and this solved the issue
I was receiving the following error:
warning " > react-native#0.68.2" has unmet peer dependency "react#17.0.2".
It looks like the main reason was that that I had the "react-native" package installed aside from the "npx react-native" that comes with the node install.
Once I removed the 'react-native' package, I was able to successfully use "npx react-native init packagename" syntax.
You can check the react-native documentation regarding the above issue on the react native site:
https://reactnative.dev/docs/environment-setup
you can resolve by installing the UNMET dependencies globally.
example : npm install -g #angular/common#4.4.6
install each one by one.
its worked for me.

Successful yeoman generator install can't be found when running yo?

Currently failing to learn how to use terminal as a development tool.
Trying to set up the MEAN stack by using yeoman to scaffold the project. However, when I run npm install -g generator-angular-fullstack it installs successfully here (/Users/xxxx/npm/lib/node_modules) and then when I run yo angular-fullstack it says I haven't got that generator.
I have two generators installed already but the new generator (angular-fullstack) isn't adding to the list even though the global install was successful:
mean
meanjs
This might be irrelevant but when I try and uninstall these generators I get this message - npm WARN uninstall not installed in /Users/xxxx/npm/lib/node_modules
What I'm trying to do is:
1. install the angular-fullstack generator
2. scaffold a project using angular-fullstack
I've tried uninstalling yeoman, npm, clearing npm cache and all sorts of things but I can't get it to work. I've been working on this on and off for about 3 weeks now and all I want to do is get a mean project structure set up and running. So if anyone can help that'd be great.
Being a rookie I didn't want to resort to Stack Overflow, but I'll take the abuse now. ;)
Thanks in advance.
UPDATE: Tried to install a different generator (angular) and can't access this either. This is the message I get when installing.
~:TestMVCApp xxxx$ npm install -g generator-angular
npm WARN peerDependencies The peer dependency generator-karma#>=0.9.0 included from generator-angular will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated CSSselect#0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat#0.4.7: the module is now available as 'css-what'
npm WARN peerDependencies The peer dependency yo#>=1.0.0 included from generator-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
generator-karma#1.0.0 /Users/xxxx/npm/lib/node_modules/generator-karma
├── sorted-object#1.0.0
├── underscore#1.8.3
└── yeoman-generator#0.19.2 (detect-conflict#1.0.0, read-chunk#1.0.1, diff#1.4.0, yeoman-welcome#1.0.1, xdg-basedir#1.0.1, user-home#1.1.1, rimraf#2.4.3, async#0.9.2, mime#1.3.4, text-table#0.2.0, class-extend#0.1.2, dargs#4.0.1, shelljs#0.4.0, debug#2.2.0, nopt#3.0.4, istextorbinary#1.0.2, cross-spawn#0.2.9, mkdirp#0.5.1, chalk#1.1.1, yeoman-assert#1.0.0, cli-table#0.3.1, run-async#0.1.0, mem-fs-editor#1.2.3, through2#0.6.5, underscore.string#3.2.2, glob#5.0.15, findup-sync#0.2.1, yeoman-environment#1.2.7, sinon#1.17.1, github-username#1.1.1, dateformat#1.0.11, pretty-bytes#1.0.4, gruntfile-editor#1.0.0, lodash#3.10.1, inquirer#0.8.5, html-wiring#1.2.0, download#4.4.0)
generator-angular#0.12.1 /Users/xxxx/npm/lib/node_modules/generator-angular
├── chalk#1.1.1 (escape-string-regexp#1.0.3, ansi-styles#2.1.0, supports-color#2.0.0, strip-ansi#3.0.0, has-ansi#2.0.0)
├── yosay#1.0.5 (ansi-regex#1.1.1, ansi-styles#2.1.0, word-wrap#1.1.0, strip-ansi#2.0.1, pad-component#0.0.1, minimist#1.2.0, taketalk#1.0.0, string-width#1.0.1, repeating#1.1.3)
├── wiredep#2.2.2 (propprop#0.3.0, minimist#1.2.0, lodash#2.4.2, chalk#0.5.1, through2#0.6.5, glob#4.5.3, bower-config#0.5.2)
└── yeoman-generator#0.16.0 (diff#1.0.8, dargs#0.1.0, isbinaryfile#2.0.4, debug#0.7.4, async#0.2.10, mime#1.2.11, rimraf#2.2.8, findup-sync#0.1.3, text-table#0.2.0, mkdirp#0.3.5, lodash#2.4.2, iconv-lite#0.2.11, underscore.string#2.3.3, shelljs#0.2.6, class-extend#0.1.2, chalk#0.4.0, glob#3.2.11, file-utils#0.1.5, cheerio#0.13.1, request#2.30.0, inquirer#0.4.1, download#0.1.19)
First, you'll need to install globally yeoman and these required tools:
npm install -g yo bower grunt-cli gulp

Resources