Related
Really hoping someone can help me with this as it's driving me crazy.
Node v12.4.0
package.json: -
{
"name": "#mypackage/db-migrate",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "ISC",
"workspaces": {
"packages": [
"common/models"
]
},
"dependencies": {
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"#babel/register": "^7.6.0",
"#mypackage/models": "1.0.0",
"db-migrate-mysql": "^1.1.10",
"db-migrate-plugin-babel": "^2.0.1",
"npm-upgrade": "^2.0.2"
}
}
.babelrc: -
{
"presets": [
"#babel/preset-env"
]
}
Directory structure: -
common->models - this contains the source lib for #mypackage/models
migrations - contains all the migration files
Yarn installs all the dependencies without issue.
So when I run a migration command ("db-migrate down -c 1", for example), I get the following: -
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
^^^^^^
SyntaxError: Unexpected token export
This is happening when I am trying to export/import from one of the #mypackage/models files.
var CONSTANT_ONE = "foo_one";
var CONSTANT_TWO = "foo_two";
var CONSTANT_THREE = "foo_three";
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
Is this a root directory issue? I am complete baffled and utterly frustrated. Any help VERY welcome.
Solved by changing .babelrc to babel.config.js.
I am publishing an npm library to an npm repo on artifactory. The library is built using angular and the dist folder and package.json looks correct. When publishing, the request it's self is published but not the actual artifact.
All i see on artifactory is a single file and not a folder containing my package
Running
npm publish
Package.json
{
"name": "#abce/embedded-auth",
"version": "1.0.0-dev.0",
"main": "bundles/abce-auth.umd.js",
"module": "fesm5/abce-auth.js",
"es2015": "fesm2015/abce-auth.js",
"esm5": "esm5/abce-auth.js",
"esm2015": "esm2015/abce-auth.js",
"fesm5": "fesm5/abce.js",
"fesm2015": "fesm2015/abce-auth.js",
"typings": "abce-auth.d.ts",
"metadata": "abce-auth.metadata.json",
"sideEffects": false,
"dependencies": {
"tslib": "^1.9.0"
}
}
What actually gets published to artifactory in a single file.
{
"_id": "#abce/embedded-auth",
"name": "#abce/embedded-auth",
"dist-tags": {
"latest": "1.0.0-dev.1"
},
"versions": {
"1.0.0-dev.1": {
"name": "#abce/embedded-auth",
"version": "1.0.0-dev.1",
"main": "bundles/abce-auth.umd.js",
"module": "fesm5/abce-auth.js",
"es2015": "fesm2015/abce-auth.js",
"esm5": "esm5/abce-auth.js",
"esm2015": "esm2015/abce-auth.js",
"fesm5": "fesm5/abce-auth.js",
"fesm2015": "fesm2015/abce-auth.js",
"typings": "abce-auth.d.ts",
"metadata": "abce-auth.metadata.json",
"sideEffects": false,
"dependencies": {
"tslib": "^1.9.0"
},
"readme": "ERROR: No README data found!",
"_id": "#abce/embedded-auth#1.0.0-dev.1",
"_npmVersion": "6.4.1",
"_nodeVersion": "10.15.3",
"_npmUser": {
"name": "deployment",
"email": "bob#bob.ie"
},
"maintainers": [
{
"name": "deployment",
"email": "bob#bob.ie"
}
],
"dist": {
"integrity": "sha512-rpTN1sMpwnMwehzWUqbV+zElzaOlF5ekQRCQMncy6c+i4TAp5jbBobvzrhgl0ORqHgJn3Eo+EcrRgYLSjV7MdQ==",
"shasum": "71f654dd5fddb20a9d5063171d5293424a4271c7",
"tarball": "http://abce.jfrog.io/abce/internal-npm-dev/#abce/embedded-auth/-/#abce/embedded-auth-1.0.0-dev.1.tgz"
}
}
},
"readme": "ERROR: No README data found!",
"maintainers": [
{
"name": "deployment",
"email": "bob#bob.ie"
}
],
"_attachments": {
"#abce/embedded-auth-1.0.0-dev.1.tgz": {
"content_type": "application/octet-stream",
"data": "correctly populated tarball base64 data here. I checked it and it is correct",
"length": 12092
}
}
}
Expect:
I would expect the package to be parsed from the request and the package published correctly
Actual:
The put request data from the npm publish command is published as a file
npm version: 6.9.0
node version: v12.3.1(has also been run with 10.15.3)
Any ideas?
Please check the registry URL that you are using from npm, if it doesn't include /api/npm - it is invalid.
Wrong URL: https://domain/artifactory/some-directory/.
Valid URL: https://domain/artifactory/api/npm/some-directory/.
I have tried to implement aot in my app but While building my app with aot and rollup gets this error.I have used ngx-clipboard.
'ngx-clipboard/src/index' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/window.service' is
imported by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be
resolved ΓÇô treating it as an external dependency
'ngx-clipboard/src/clipboard.directive' is imported by
wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it as
an external dependency
'ngx-clipboard/src/clipboard.service' is
imported by wwwroot\app\aot\app\patients\patient-result\patient-
result.component.ngfactory.js, but could not be resolved ΓÇô treating it a
s an external dependency
'ngx-clipboard/src/document.service' is imported by
wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved ΓÇô
treating it as an external dependency
'ngx-clipboard/src/clipboard.service' is imported
by wwwroot\app\aot\app\app.module.ngfactory.js, but could not be resolved
ΓÇô treating it as an external dependency
No name was provided for external module 'ngx-clipboard/src/index' in
options.globals ΓÇô guessing 'import10'
No name was provided for external module 'ngx-clipboard/src/window.service'
in options.globals ΓÇô guessing 'import13'
No name was provided for external module 'ngx-
clipboard/src/clipboard.directive' in options.globals ΓÇô guessing
'import5'
No name was provided for external module 'ngx-
clipboard/src/clipboard.service' in options.globals ΓÇô guessing 'import28'
No name was provided for external module 'ngx-
clipboard/src/document.service' in options.globals ΓÇô guessing 'import27'
Here is my package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"aot": "node_modules/.bin/ngc -p wwwroot/tsconfig-aot.json",
"rollup": "node_modules/.bin/rollup -c wwwroot/rollup-config.js",
"cleanup": "rimraf wwwroot/app/aot && rimraf wwwroot/build.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"angular/animations": "4.1.3",
"angular/common": "4.1.3",
"angular/compiler": "4.1.3",
"angular/compiler-cli": "4.1.3",
"angular/core": "4.1.3",
"angular/forms": "4.1.3",
"angular/http": "4.1.3",
"angular/material": "2.0.0-beta.6",
"angular/platform-browser": "4.1.3",
"angular/platform-browser-dynamic": "4.1.3",
"angular/platform-server": "4.1.3",
"angular/router": "4.1.3",
"angular/upgrade": "4.1.3",
"core-js": "2.4.1",
"ngx-clipboard": "8.0.3",
"rxjs": "5.4.0",
"systemjs": "0.20.13",
"zone.js": "0.8.11"
},
"devDependencies": {
"ngx-window-token": "0.0.2"
"rollup": "0.43.0",
"rollup-plugin-commonjs": "8.0.2",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-uglify": "2.0.1",
"typescript": "2.2.2",
"rimraf": "2.6.1"
}
}
Here is my tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"app/app.module.ts",
"app/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "app/aot",
"skipMetadataEmit": true
}
}
Here is my rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'wwwroot/app/main-aot.js',
dest: 'wwwroot/build.js', // output a single application bundle
sourceMap: false,
format: 'iife',
onwarn: function (warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
// console.warn everything else
console.warn(warning.message);
},
plugins: [
nodeResolve({ jsnext: true, module: true }),
commonjs({
include: 'node_modules/**',
}),
uglify()
]
}
Thanks in advance
Try this:
In rollup-config.js import alias
import alias from 'rollup-plugin-alias';
Under plugins add
'ngx-clipboard': __dirname + '/node_modules/ngx-clipboard/dist/',
'ngx-window-token': __dirname + '/node_modules/ngx-window-token/dist/'
I want to include underscore.js inside angular2 project built using angular-cli.
Till now I am unable to do so. I tried so far:
1- npm install underscore --save
2- tsd install underscore
3- script src="node_modules/underscore/underscore.js" , reference in index.html
4- inside system-config.js
/** Map relative paths to URLs. */
var map = {
'underscore': '../node_modules/underscore/underscore.js'
};
/** User packages configuration. */
var packages = {
'underscore': '../node_modules/underscore/underscore.js'
};
5- import * as _ from 'underscore';
But underscore.js is not getting copied in 'dist' directory during run-time , and browser complain of not finding underscore.js. I think I am missing something at Point#4.
Any help is much appreciated as I am beginning learning angular2.
Please remember that this project is made by angular-cli, and not by any other seed project. Other than Underscore.js, project is working fine.
[EDIT]
package.json has "underscore": "^1.8.3" in dependencies
Using Angular CLI 1.0.0-rc.1, the recommended solution is described here:
Angular2 2.4 How to load external libraries sush as Underscore into angular2.
npm install underscore --save // save to dependencies: required to run
npm install #types/underscore --save-dev // save to dev dependencies: required in dev mode
Then in your component class:
import * as _ from 'underscore';
...
subtitle = _.head(['xyz'])
Alternatively, there is another way to load "static" scripts in angular-cli as described here https://www.npmjs.com/package/angular-cli#global-library-installation:
In .angular-cli.json, add it to the scripts array:
"scripts": ["../node_modules/underscore/underscore.js"]
This will load underscore.js, but this is not a good way to make it available for use in your typescript classes.
install underscore using npm
Go to yourappname/src/typings.d.ts and add this line
declare module 'underscore';
then run ng build
Angular 2 full 3 file snippets
package.json
{
"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",
"#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",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"tsd": "^0.6.5",
"underscore": "^1.8.3",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2"
}
}
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'underscore': 'npm:underscore',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'underscore':{
main: './underscore.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
},
"ambientDependencies": {
"underscore": "github:DefinitelyTyped/DefinitelyTyped/underscore/underscore.d.ts#f0990e288ac73d593e982995947567aa2643b828"
}
}
1- npm install underscore --save
2- tsd install underscore (if tsd not install first install that)
3) now do npm install
4) then npm start
install underscore:
npm i underscore --save
in angular-cli.json:
"scripts": [
"../node_modules/underscore/underscore-min.js",
...
],
after run command:
ng build
in component:
declare var _: any;
#Component({...})
Do you have in your project a file called Package.json?
If Yes, you can try to add this line
"underscore": "^1.8.3",
in the dependencies of this file.
Modifications in system-config.ts
var map = {
"underscore": "node_modules/underscore",
};
var packages = {
'underscore': { main: 'index.js', defaultExtension: 'js' }
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
paths: {
"underscore": "/node_modules/underscore.js"
}
};
And to do a npm install after that.
I think you might have missed a step? Did you remember to setup underscore in the "angular-cli-build.js" file? This step tells clingon to put underscore in the vendor folder (/dist/vendor).
Here's how I got underscore working.
Install underscore and typings:
npm install underscore --save
typings install underscore --save --ambient
Setting up underscore in "angular-cli-build.js":
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'moment/moment.js',
'underscore/underscore.js'
]
});
};
Then underscore get compiled to the vendor folder (/dist/vendor), and now it's possible to point to this location from the system.config.ts file:
const map: any = {
"underscore": "vendor/underscore/underscore.js",
"moment": "vendor/moment/moments.js"
};
/** User packages configuration. */
const packages: any = {
'underscore': {
format: 'cjs'
},
'moment': {
format: 'cjs'
}
};
Remember to use the hole path including the .js hope this helps :)
I did the same as with moment, from the docs: https://github.com/angular/angular-cli/wiki/3rd-party-libs
I am using Angular-cli, all I did was to add this line in package.json
"underscore": "^1.8.3",
and then I Run:
1. npm install underscore --save
2. npm install
and it worked...
I am new to materialize css framework. I am using laravel-elixir 4.0.0 with gulp to browserify the installed npm materialize-css module.
Here are my configurations
package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"jquery": "^2.2.0",
"laravel-elixir": "^4.0.0",
"materialize-css": "^0.97.5"
}
}
gulpfile.js
var gulp = require('gulp');
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| ELIXIR ASSET MANAGEMENT
|--------------------------------------------------------------------------
*/
elixir.config.sourcemaps = true;
// Set the path for compiled assets
var build_path = "public/compiled/";
elixir(function(mix) {
/*
|----------------------------------------------------------------------
| Javascript browserification
|----------------------------------------------------------------------
*/
mix.browserify(
"app.js",
build_path + "app.js"
);
});
app.js
window.$ = window.jQuery = require('jquery')
require('materialize-css');
However, when I run gulp command it returns the following errors:-
gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module
'jQuery' from
'/var/www/laravel5/node_modules/materialize-css/bin'
My node versions:-
node v5.6.0, npm v3.6.0
Note: I'm not using Elixir. Only Gulp, browserify and materialize-css.
This is what I have in my project using materialize-css:
in the package.json I have added to the devDependencies list browserify-shim, and configured it:
"dependencies":{
"materialize-css": "xx.yy.zz",
"jquery": "xx.yy.zz",
...
},
"devDependencies": {
"browserify": "xx.yy.zz"
"browserify-shim": "xx.yy.zz"
...
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"materialize": "./node_modules/materialize-css/bin/materialize.js"
},
"browserify-shim": {
"jquery": "$",
"materialize": "materialize"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
...
in the app.js file I'm then importing jQuery and materialize as usual:
var $ = require('jquery');
require('materialize');
Then just used the regular recipe for gulp and browserify to build them.