I have two questions. I am completing a project from the book "Learning to Program", and am a little confused as to why npm is not installing, and why I am receiving another error message. I'm using Windows, I have installed node.js (v0.12.2) and have attempted to install grunt: npm install -g grunt-cli
Question 1 - When I try to install npm, it does not list all of the dependencies defined in package.json.
The following shows when I try to install npm in my main directory:
C:\Users\Me\My Documents\kittenbook\npm install
npm WARN package.json kittenbook#0.0.1 No description
npm WARN package.json kittenbook#0.0.1 No repository field
npm WARN package.json kittenbook#0.0.1 No README data
From what I see, it's supposed to display a bunch of lines after those three warnings, such as:
npm http GET https://registry.npmjs.org/grunt-contrib-concat
npm http GET https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt-contrib-copy
and so on.
Question 2:
This is probably because installing npm is not working correctly, but when I try to run "grunt jshint" it gives me this error:
>> Local Npm module "grunt-contrib-.copy" not found. Is it installed?
Running "jshint:files" (jshint) task
>> 2 files lint free
Done, without errors.
Sorry for this very unorganized question, but I am very new to programming and I am very confused as to where the problem is.
Here is some more information.
Gruntfile.js
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
concat: {
release: {
src: ['js/values.js', 'js/prompt.js'],
dest: 'release/main.js'
}
},
copy: {
release: {
src: 'manifest.json',
dest: 'release/manifest.json'
}
},
jshint: {
files: ['js/values.js', 'js/prompt.js']
}
});
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib.copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Register Tasks
grunt.registerTask('default', ['jshint', 'concat', 'copy']);
};
package.json
{
"name": "kittenbook",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-copy": "~0.5.0"
}
}
If you need other information I will gladly get it to you. Thank you all so much for your help.
grunt-contrib.copy should be grunt-contrib-copy (use dash, not period)
Related
I try to run the following to build my project for production and receive the error as stated in the subject:
ng build --prod
When I look in the core.d.ts file, it cannot find the following:
"./src/change_detection/differs/default_iterable_differ";
"./src/profile/profile";
"./src/util/decorators";
The following is the entire file:
/**
* Generated bundle index. Do not edit.
*/
export * from "./index";
export {
APPLICATION_MODULE_PROVIDERS as ɵangular_packages_core_core_l,
_iterableDiffersFactory as ɵangular_packages_core_core_i,
_keyValueDiffersFactory as ɵangular_packages_core_core_j,
_localeFactory as ɵangular_packages_core_core_k
} from "./src/application_module";
export {
_appIdRandomProviderFactory as ɵangular_packages_core_core_f
} from "./src/application_tokens";
export {
DefaultIterableDifferFactory as ɵangular_packages_core_core_g
} from "./src/change_detection/differs/default_iterable_differ";
export {
DefaultKeyValueDifferFactory as ɵangular_packages_core_core_h
} from "./src/change_detection/differs/default_keyvalue_differ";
export {
ReflectiveInjector_ as ɵangular_packages_core_core_c
} from "./src/di/reflective_injector";
export {
ReflectiveDependency as ɵangular_packages_core_core_d,
resolveReflectiveProviders as ɵangular_packages_core_core_e
} from "./src/di/reflective_provider";
export {
wtfEnabled as ɵangular_packages_core_core_m
} from "./src/profile/profile";
export {
createScope as ɵangular_packages_core_core_o,
detectWTF as ɵangular_packages_core_core_n,
endTimeRange as ɵangular_packages_core_core_r,
leave as ɵangular_packages_core_core_p,
startTimeRange as ɵangular_packages_core_core_q
} from "./src/profile/wtf_impl";
export {
getOrCreateChangeDetectorRef as ɵangular_packages_core_core_v,
getOrCreateContainerRef as ɵangular_packages_core_core_y,
getOrCreateElementRef as ɵangular_packages_core_core_x,
getOrCreateInjectable as ɵangular_packages_core_core_w,
getOrCreateNodeInjector as ɵangular_packages_core_core_u,
getOrCreateTemplateRef as ɵangular_packages_core_core_z
} from "./src/render3/di";
export {
bindingUpdated as ɵangular_packages_core_core_ba
} from "./src/render3/instructions";
export {
loadInternal as ɵangular_packages_core_core_bb
} from "./src/render3/util";
export {
makeParamDecorator as ɵangular_packages_core_core_a,
makePropDecorator as ɵangular_packages_core_core_b
} from "./src/util/decorators";
export { _def as ɵangular_packages_core_core_s } from "./src/view/provider";
export {
DebugContext as ɵangular_packages_core_core_t
} from "./src/view/types";
Do I run npm i decorators? If I run the following:
ng serve --disable-host-check
Correction to original post - now the project does not run at all. What happened? I have been testing this thing for over a month and, now that I am ready to go live, it just does not work at all after trying to create a dist directory. WTF?
The following is what I am seeing in the console:
TypeError: Class constructor Subject cannot be invoked without 'new'
at new EventEmitter (core.umd.js:3597)
at new NgZone (core.umd.js:3745)
at getNgZone (core.umd.js:4473)
at PlatformRef.push../node_modules/#angular/core/bundles/core.umd.js.PlatformRef.bootstrapModuleFactory (core.umd.js:4369)
at core.umd.js:4415
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
When I run ng build I am seeing the following:
ng build --prod
Date: 2019-02-02T23:59:21.603Z
Hash: 51184dcdbc91f92a675d
Time: 3998ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.42d170ae18051bd9f923.css (styles) 177 kB [initial] [rendered]
chunk {2} polyfills.03b06938f23b8f1cb153.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.541dbdbf0b123b4c3be8.js (main) 128 bytes [initial] [rendered]
ERROR in Couldn't resolve original symbol for ./src/util/decorators from /Applications/MAMP/htdocs/oshop/node_modules/#angular/core/core.d.ts
BTW, now in app.module.ts, it cannot find module for HttpClientModule or HTTP_INTERCEPTORS
Cannot find module '#angular/common/http'
When I try to re-install #angular/common:
sudo npm i -g #angular/common^6.1.10
npm ERR! code ENOLOCAL
npm ERR! Could not install from "#angular/common^6.1.10" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tam3/.npm/_logs/2019-02-03T02_29_27_361Z-debug.log
But it is in the package.json:
"devDependencies": {
"#angular-devkit/build-angular": "~0.7.0",
"#angular/cli": "~6.1.0",
"#angular/common": "~6.1.10",
"#angular/compiler-cli": "^6.1.0",
"#angular/core": "^6.1.10",
WTF, I followed a post that suggested all I had to do was to trash the node_modules directory, followed by npm install and it would reinstall everything. What can I do? I literally was ready to go live today
Thanks in advance
I was able to solve this issue, by solving various other issues, that I pointed out in another post that I made on stackoverflow
First, I had to make sure that the npm(s) were no longer being installed in .npm-global, which I had done to get around no longer typing sudo before every/any install, but that came at a price, which I outline in the aforementioned post.
Second, I followed a couple of other posts on stackoverflow that instructed me to change my dependencies in the package.json file to the following:
"rxjs": "6.0.0",
"typescript": "^2.7.2",
Followed by deleting the node_modules directory, then do an npm install, but this only worked because my npm installs were no longer being installed in ~/.npm-global.
Also, as I stated in the other post, the build is still not working, but that is because there are so many other errors that I have to resolve going forward, but at least this issue is out of way and my system is back to where it was before this error popped up.
These are some of the errors moving forward that I am referring to:
Property 'value' does not exist on type 'HTMLElement'
Property 'shoppingCart' does not exist on type {}
I'm looking for a way to minify the white space in template literals. Since regular js minification wouldn't remove white space on a template literal I was expecting that maybe polymer-cli had a way to minify those.
An example of the result of minification:
import{PolymerElement,html}from'../node_modules/#polymer/polymer/polymer-element.js';export default class MyApp extends PolymerElement{static get is(){return'my-app'}static get template(){return html`
<style>
:host {
display: block;
height: 100vh;
}
.app {
height: 100vh;
}
</style>
<div class="app">
My App
</div>
`}}customElements.define(MyApp.is,MyApp);
polymer-cli currently doesn't support minification of tagged template strings. Internally, it uses Babel plugins to minify JavaScript, so ideally we'd be able to insert the babel-plugin-minify-template-strings plugin into the pipeline when minification is enabled.
For now, we could use babel-cli along with that plugin to process the build output of polymer-cli:
Start with a Polymer 3 template project, e.g., PolymerLabs/start-polymer3.
git clone https://github.com/PolymerLabs/start-polymer3.git
cd start-polymer3
Install babel-cli and the babel-plugin-minify-template-strings plugin. Your project may need other Babel plugins. In this case, this template project needs babel-plugin-syntax-dynamic-import for Babel to handle the dynamic imports in the code.
yarn add -D babel-cli \
babel-plugin-minify-template-strings \
babel-plugin-syntax-dynamic-import
Add a .babelrc config file with the following file contents:
{
"compact": true,
"ignore": [
"node_modules"
],
"plugins": [
"minify-template-strings",
"syntax-dynamic-import"
]
}
Add a build NPM script to package.json to run babel-cli (with .babelrc above) on the JavaScript output of polymer build:
"scripts": {
"build": "polymer build && $(npm bin)/babel -d . build/**/src/**/*.js"
}
Run npm run build (or yarn build). The command output (running with polymer-cli (1.7.0-pre.13), zsh, macOS High Sierra) should look similar to this:
➜ start-polymer3 git:(master) ✗ yarn build
yarn run v1.3.2
$ polymer build && $(npm bin)/babel -d . build/**/src/**/*.js
info: [cli.command.build] Clearing build/ directory...
info: [cli.build.build] (es6-unbundled) Building...
info: [cli.build.build] (es6-unbundled) Build complete!
build/es6-unbundled/src/lazy-element.js -> build/es6-unbundled/src/lazy-element.js
build/es6-unbundled/src/start-polymer3.js -> build/es6-unbundled/src/start-polymer3.js
✨ Done in 8.66s.
➜ start-polymer3 git:(master) ✗
See GitHub repo with the above changes, and its sample output
Did you try to setup your polymer.json with the following config?:
"builds": [{
"bundle": true,
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
}],
As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.
I have tried the following commands:
npm install -g gulp
npm install gulp
npm install gulp --save-dev
I have also set the environment variables as following:
C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
//script paths
var jsFiles = 'scripts/*.js',
jsDest = 'dist/scripts';
gulp.task('scripts', function() {
return gulp.src(jsFiles)
.pipe(concat('scripts.js'))
.pipe(gulp.dest(jsDest));
});
you just need to install and require gulp locally, you probably only installed it globally
At the command line
cd <project-root> && npm install --save-dev gulp
In your gulpfile.js
var gulp = require('gulp');
this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.
If we go to the package.json file in the Gulp project on Github, it will tell the whole story:
{
"name": "gulp",
"description": "The streaming build system",
"version": "3.9.1",
"homepage": "http://gulpjs.com",
"repository": "gulpjs/gulp",
"author": "Fractal <contact#wearefractal.com> (http://wearefractal.com/)",
"tags": [ ],
"files": [
// ...
],
"bin": {
"gulp": "./bin/gulp.js"
},
"man": "gulp.1",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "eslint . && jscs *.js bin/ lib/ test/",
"pretest": "npm run lint",
},
"engines": {
"node": ">= 0.9"
},
"license": "MIT"
}
so at the command line:
$ gulp default
will execute this:
"bin": {
"gulp": "./bin/gulp.js"
},
on the other hand, require('gulp') in your code will return the value of this:
https://github.com/gulpjs/gulp/blob/master/index.js
normally we see this in a package.json file as:
"main": "index.js"
but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).
Its occurs on Windows and usually one of the following fixes it:
If you didn't, run npm install gulp on the project folder, even if
you have gulp installed globally.
Normally, It isn't a problem on Windows, but it could be a issue with
the PATH. The package will try to get the PATH from the environment,
but you can override it by adding exec_args to your gulp settings.
For example, on Ubuntu:
"exec_args": {
"path": "/bin:/usr/bin:/usr/local/bin"
}
Hope It will be OK.
Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12
I get the following error when running gulp test:
Error: Please run node with the --harmony flag!
Here is my gulp task:
var jest = require('gulp-jest');
gulp.task('test', function() {
return gulp.src('src/**/__tests__').pipe(jest({
rootDir: 'src',
scriptPreprocessor: '../node_modules/6to5-jest',
unmockedModulePathPatterns: [ 'react' ]
}));
});
To reproduce: https://github.com/SEEK-Jobs/react-playground
Note that npm test works properly (test is failing as expected), but gulp test fails with the error above. Both npm test and gulp test have the same config object:
{
rootDir: 'src',
scriptPreprocessor: '../node_modules/6to5-jest',
unmockedModulePathPatterns: [ 'react' ]
}
What am I doing wrong?
As far as I can tell the error is thrown from jest-cli.
The reason you don't get it with npm test is that you probably configured npm to run the jest bin script directly, which uses harmonize to programmatically set the --harmony flag.
You can fix by installing harmonize and putting require('harmonize')() in your gulpfile.
It was a bug in gulp-eslint, and it is fixed now in version 0.3.0.
I am following this guide to generate junit output from my js tests:
https://github.com/sbrandwoo/grunt-qunit-junit
I have installed grunt-qunit-junit into my local test project:
npm install grunt-contrib-qunit --save-dev
And this is my Gruntfile.js:
module.exports = function(grunt) {
"use:strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
qunit_junit: {
options: {
},
all: ["all_tests.html"]
},
})
grunt.loadNpmTasks('grunt-qunit-junit');
};
where all_tests.html is located in the same dir and lists all my *test.js files. But when I run:
user#ubuntu:~/Test$ grunt qunit_junit
Running "qunit_junit" task
>> XML reports will be written to _build/test-reports
Done, without errors.
Why are the tests not executed (the folder _build/test-reports is not created)?
The README states that you should execute both the qunit_junit and qunit tasks: http://github.com/sbrandwoo/grunt-qunit-junit#usage-examples
For example: grunt.registerTask('test', ['qunit_junit', 'qunit']);