I have generated an app using Yeoman-Angular Generator, but the angular.js and other Angular files are missing from the project. I can see these dependencies in the bower.json file as follows:
{
"name": "mi-portfolio",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
"bootstrap": "~3.0.3",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
But, the JS files themselves aren't available. So, I get the 'angular is not defined' error when running the app. I ran the commands as given in the Yeoman-Angular Generator's documentation. Is there something I'm missing here?
Try running bower install, sometimes this fails when running Yeoman so you've gotta attempt manually.
Related
I am having an issue with cookies not being defined in angular scope.
npm run start builds and starts the app just fine,
but when trying to run npm test that executes jest command, I am getting this error:
`Test suite failed to run app/components/Component1/Component1.ts:1:10
error TS2305: Module '"../../../../../node_modules/#types/angular"' has no exported member 'cookies'.`
in Component1.ts there is this import: import { cookies } from 'angular';
Build and run - ok.
Testing - not ok.
If you know where the issue can be hidden, please help :) Thank you.
my package.json:
{
"dependencies": {
...,
"angular": "^1.8.0",
"angular-cookies": "1.8.0",
"babel-polyfill": "^6.2.0",
...
},
"devDependencies": {
"#types/angular": "^1.8.0",
"#types/angular-cookies": "^1.8.0",
"#types/jest": "^26.0.19",
"angular-mock": "^1.0.0",
"angular-mocks": "^1.8.2",
"angularjs-jest": "^0.1.4",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"jest": "^26.6.3",
"ts-jest": "^26.4.4",
...
}
}
solution for my issue was adding angular-cookies to tsconfig.test.json file.
I still do not understand why angular-cookies since source code and production build is taking types and definitions from angular package (and through IDE I can link to angular module rather than angular-cookies).
But that's life is all about - mysteries.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": [
"node",
"jest",
"angular-cookies" --> THIS VERY LINE SOLVED MY ISSUE
]
},
"include": [
"index.d.ts",
"**/*.test.ts"
]
}
I am trying to find the best way to package only the node_modules dependencies that my project needs. So I found gulp-npm-dist and have a gulpfile.js
var gulp = require('gulp');
var npmDist = require('gulp-npm-dist');
gulp.task('CopyNodeDependencies', function() {
gulp.src(npmDist(), {base:'./node_modules'})
.pipe(gulp.dest('./node_dependencies'));
});
this places just the modules i need from my package.json:
{
"version": "1.0.0",
"name": "common",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-npm-dist": "^0.1.2",
"gulp-rename": "^1.2.2",
"pump": "^1.0.1"
},
"dependencies": {
"chart.js": "^2.7.3",
"chartjs-node-canvas": "^2.0.1",
"moment": "^2.24.0"
}
}
but when I run my node file that has var moment = require('moment'); at the top it says cannot find module moment. I have renamed node_dependencies to node_modules and it still throws this error. I have also tried relative paths like ./node_dependencies/moment and that still doesnt work.
here is the folder structure of the node_dependencies if that helps:
You have to leave original node_modules directory as is to use require().
gulp-npm-dist copies only minified files without package.json, yarn.lock etc.
UPDATE It seems the problem is I can't update/edit my post. Every time I create a new post, then it enter dead loop. Please help me T-T
Recently I started a program using keystoneJS as my CMS.
Everything goes fine but this Post problem.
I have found if I install keystone-demo via yo keystone(using the KeystoneJS generator made with Yeoman) then publishing post can work, but if I install keystone manually, the problem comes...
In Google Inspect Console, there is a error-
"TypeError: undefined is not an object (evaluating 'refList.expandColumns')"
I guess it is the keystone version problem.
This is my package.json file
{
"name": "keystone-demo",
"version": "1.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/JedWatson/keystone-demo.git"
},
"dependencies": {
"keystone": "https://github.com/keystonejs/keystone.git",
"async": "^1.5.0",
"lodash": "^3.10.1",
"csv": "^0.4.6",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-watch": "^4.3.5",
"pug": "^2.0.0-alpha6"
},
"scripts": {
"start": "node keystone.js"
}
}
And this is the package.json file in that can work normally version
{
"name": "keystone",
"version": "0.0.0",
"private": true,
"dependencies": {
"keystone": "^0.3.16",
"async": "^1.5.0",
"underscore": "^1.8.3",
"node-sass": "^3.3.2",
"node-sass-middleware": "^0.9.7",
"dotenv": "^1.1.0"
},
"devDependencies": {
"gulp": "^3.7.0",
"gulp-jshint": "^1.9.0",
"jshint-stylish": "^0.1.3",
"gulp-shell": "^0.5.0",
"gulp-watch": "^4.3.5",
"gulp-sass": "^2.0.4"
},
"engines": {
"node": ">=0.10.22",
"npm": ">=1.3.14"
},
"scripts": {
"start": "node keystone.js"
},
"main": "keystone.js"
}
You're loading the latest keystone version from github, which is not always stable. This is probably the reason for the error you're seeing.
I recommend using the latest version published to npm (0.3.22 at time of writing) instead.
Update the first line in your dependencies to this, and it will work:
"keystone": "^0.3.22",
To add keystone to a new project you can also type npm install --save keystone
After trying to installing an angularjs component and updating all components via bower my routing does not work anymore. I guess it´s some kind of problem with the version of angular js and ngroute, but being new to angular js / bower I am not sure how to fix it, any guidance is appreciated!
Error:
[$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
Bower file:
{
"name": "asclepius",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.2.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"international-phone-number": "~0.0.7"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "asclepiusApp",
"resolutions": {
"angular": ">=1.2.0"
}
}
Happened something similar today to my coworker. He resolved replacing "^1.3.x" to "1.3.x" in "angular-cookies" and "angular-sanitize". Check if changing it in angular-route resolve the problem.
I think this happens since the release of angular 1.4 a few days ago.
I've recently had to clone an project and rebuild bower packages. jQuery has updated I believe, and is now throwning an warning:
Warning:
Please go take a look in "app/bower_components/jquery"
for the file you need, then manually include it in your file.
I've done this. And everythign works properly. However, everytime I grunt serve the warning still gets thrown?
jquery was not injected in your file.
How do I remove this error? and will this error out a grunt build? I'm sure the warning is harmless but it's really upsetting to keep seeing it.
main .bower.json
{
"name": "jordan",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"jquery-ui": "~1.10.3"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
.bower.json for jquery
{
"name": "jquery",
"version": "2.1.0",
"ignore": [
"**/.*",
"build",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json",
"bower.json"
],
"dependencies": {
"sizzle": "1.10.16"
},
"devDependencies": {
"requirejs": "~2.1.8",
"qunit": "~1.12.0",
"sinon": "~1.7.3"
},
"keywords": [
"jquery",
"javascript",
"library"
],
"homepage": "https://github.com/jquery/jquery",
"_release": "2.1.0",
"_resolution": {
"type": "version",
"tag": "2.1.0",
"commit": "cac43f3ef791b7e68c1917a734fb92e04450c111"
},
"_source": "git://github.com/jquery/jquery.git",
"_target": ">=1.6",
"_originalSource": "jquery"
}
You can workaround this problem changing the bower.json of your project and override some package with problem
"overrides": {
"jquery": {
"main": "./dist/jquery.js"
}
}
You can sse more about that in https://github.com/bower/bower/issues/585
But, looks like that current version of the JQuery is playing into the Bower rules.
As explained on the related Github issues available here:
https://github.com/stephenplusplus/grunt-bower-install/issues/55
This isn't an error with grunt-bower-install - this is, sadly, jQuery not playing by Bower's rules. It's not possible for this tool to work with a Bower package that doesn't specify main property. Like any other package that doesn't, the solution is to manually include the reference to the file inside of your HTML file, like the good ol' days
I'm sorry man, I had the same problem just now :(
In general, if you get this error it is because the author of whatever bower component you are using either hasn't included a bower.json file in the component or hasn't define a "main" property in the bower.json folder. If the component is being actively maintained, you should open a github issue asking for a proper bower.json file in the component. Here is an real world example...
https://github.com/CreateJS/SoundJS/issues/76