Related
I migrated my project from angular 4 to angular 6 it is running well on localhost but at AOT-build time it gets an error like:
ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory.ts
Module not found: Error: Can't resolve 'primeng/components/utils/ObjectUtils' in '/home/com5/Paresh/New Angular 6/AOT-6/aot/app/home/accountant'
# ./aot/app/home/accountant/customercost-form.component.ngfactory.ts 16:10-57
# ./aot/app/home/accountant/accounts.module.ngfactory.ts
# ./app/home/index.ts
# ./app/home/auth-guard.service.ts
# ./aot/app/app.module.ngfactory.ts
# ./app/main-aot.ts
ERROR in ./aot/app/home/accountant/vendorcost-form.component.ngfactory.ts
Module not found: Error: Can't resolve 'primeng/components/utils/ObjectUtils' in '/home/com5/Paresh/New Angular 6/AOT-6/aot/app/home/accountant'
# ./aot/app/home/accountant/vendorcost-form.component.ngfactory.ts 16:10-57
# ./aot/app/home/accountant/accounts.module.ngfactory.ts
# ./app/home/index.ts
# ./app/home/auth-guard.service.ts
# ./aot/app/app.module.ngfactory.ts
# ./app/main-aot.ts
ERROR in [at-loader] ./aot/app/app.module.ngfactory.ts:67:40
TS2339: Property 'ɵm' does not exist on type 'typeof import("/home/com5/Paresh/New Angular 6/AOT-6/node_modules/#angular/core/core")'.
my tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015","es2017", "dom"],
"noImplicitAny": true,
"removeComments": true,
"skipLibCheck": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"node_modules/#types/"
],
"outDir": "aot",
"baseUrl": ".",
"paths": {
"#angular/*": ["node_modules/#angular/*"]
}
},
"files": [
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
Package.json
{
"name": "My-app",
"version": "0.5.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"build:aot": "node --max_old_space_size=6144 node_modules/.bin/ngc -p tsconfig-aot.json && node --max_old_space_size=6144 node_modules/.bin/rollup -c rollup-config.js",
"lite:aot": "lite-server -c aot/bs-config.json",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"pree2e": "webdriver-manager update",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w",
"ngc": " node --max_old_space_size=6144 node_modules/.bin/ngc -p tsconfig-aot.json",
"webpack-prod": " npm run ngc && npm run webpack",
"webpack": "node --max_old_space_size=6144 node_modules/.bin/webpack ",
"serve": "webpack-dev-server",
"prodserver": "node prodserver"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/platform-server": "^6.1.10",
"#angular/router": "^6.1.10",
"#angular/upgrade": "^6.1.10",
"#auth0/angular-jwt": "^5.0.1",
"#ngtools/webpack": "^1.1.2",
"#types/googlemaps": "^3.2.0",
"#types/jquery": "^2.0.48",
"#types/jspdf": "^1.3.0",
"#types/node": "8.0.0",
"angular-in-memory-web-api": "^0.11.0",
"angular2-busy": "^1.0.2",
"angular2-datatable": "^0.5.3",
"angular2-datatable-pagination": "0.0.3",
"angular2-highcharts": "^0.5.5",
"angular2-image-upload": "^0.3.1",
"angular2-jwt": "^0.1.28",
"angular2-moment": "^1.0.0-beta.rc.1",
"angular2-multiselect-dropdown": "^2.9.0",
"angular2-router-loader": "^0.3.5",
"angular2-tag-input": "^1.2.3",
"bootstrap": "^3.3.7",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-daterangepicker": "^2.1.25",
"bootstrap-timepicker": "^0.5.2",
"chart.js": "^2.8.0",
"core-js": "2.5.6",
"css-toggle-switch": "^4.0.2",
"express": "^4.15.3",
"fullcalendar": "^3.0.1-beta",
"highcharts": "7.1.1",
"install": "^0.10.1",
"lodash": "^4.17.11",
"moment": "2.18.1",
"mydatepicker": "^1.0.18",
"ng2-bootstrap": "^1.1.16",
"ng2-ckeditor": "1.2.0",
"ng2-datetime": "^1.4.0",
"ng2-device-detector": "^0.1.0",
"ng2-file-upload": "^1.2.0",
"ng2-imageupload": "^1.3.0",
"ng2-select2": "^1.0.0-beta.11",
"ng2-table": "^1.3.2",
"ngx-barcode": "^0.2.4",
"primeng": "^6.1.7",
"primeui": "^4.1.15",
"quill": "^1.3.0",
"reflect-metadata": "^0.1.9",
"rxjs": "6.3.2",
"rxjs-compat": "^6.6.3",
"rxjs-tslint": "^0.1.8",
"screenfull": "4.0.1",
"style-loader": "^0.17.0",
"systemjs": "0.19.40",
"tinymce": "^4.5.5",
"to-string-loader": "^1.1.5",
"tslib": "^2.0.1",
"typings": "^2.1.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "6.2.9",
"#types/file-saver": "0.0.1",
"#types/googlemaps": "^3.26.20",
"#types/jquery": "^2.0.48",
"#types/node": "7.0.7",
"angular-router-loader": "^0.6.0",
"angular2-template-loader": "0.6.2",
"angular2-toaster": "^6.1.0",
"awesome-typescript-loader": "3.1.3",
"canonical-path": "0.0.2",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^0.4.0",
"concurrently": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.1",
"electron-packager": "^8.7.0",
"extract-text-webpack-plugin": "^2.1.0",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.1",
"html-loader": "^0.4.3",
"html-webpack-plugin": "2.28.0",
"http-server": "^0.10.0",
"karma": "^5.2.2",
"lite-server": "^2.2.2",
"raw-loader": "^0.5.1",
"rollup": "^0.41.6",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"source-map-explorer": "^1.3.3",
"typescript": "2.9.2",
"webdriver-manager": "12.0.6",
"webpack": "^2.5.1",
"webpack-bundle-analyzer": "^2.8.1",
"webpack-dev-server": "2.4.5"
}
}
main-aot.ts
import { platformBrowser } from '#angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
import { enableProdMode } from '#angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
this is all my configuration files
Not sure if you're having the same problem I had, but when I upgraded from Angular 8 to 9 (and from PrimeNG 8 to 9), I needed to change the import path for ObjectUtils from "primeng/components/utils/ObjectUtils" to just "primeng/utils".
When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)
From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.
I have cloned ionic project from git in which the node_modules, platforms, plugins are not available but in the package.json i am having all the detail so whether i have to install all one by one or is there any short way where i can use the package.json and install all the node_modules, platforms and plugins.
package.json
{
"private": true,
"engines": {
"node": ">=4.0.0"
},
"scripts": {
"test": "gulp build --minify && gulp karma"
},
"devDependencies": {
"browser-sync": "^2.8.3",
"chalk": "^1.1.0",
"cordova": "^6.0.0",
"del": "^2.0.0",
"elementtree": "^0.1.6",
"eslint": "^3.0.0",
"gulp": "^3.9.1",
"gulp-angular-filesort": "^1.1.1",
"gulp-autoprefixer": "^3.0.1",
"gulp-changed": "^1.3.0",
"gulp-csso": "^2.0.0",
"gulp-eslint": "^3.0.0",
"gulp-filter": "^4.0.0",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^3.0.1",
"gulp-inject": "^4.0.0",
"gulp-jsonlint": "^1.1.0",
"gulp-load-plugins": "^1.0.0-rc",
"gulp-natural-sort": "^0.1.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-plumber": "^1.0.1",
"gulp-protractor": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.5.1",
"gulp-size": "^2.0.0",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.0.4",
"karma": "^1.1.0",
"karma-angular-filesort": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"lodash": "^4.3.0",
"main-bower-files": "^2.9.0",
"minimist": "^1.2.0",
"phantomjs-prebuilt": "^2.1.4",
"plist": "git://github.com/akofman/plist.js.git#3f256fd21ab3ad3ada0f491cfc905098a2631342",
"proxy-middleware": "^0.15.0",
"require-dir": "^0.3.0",
"vinyl-paths": "^2.0.0",
"wiredep": "^4.0.0",
"xml2js": "^0.4.9",
"yeoman-test": "^1.1.0"
},
"generator-m-ionic": {
"proxies": [
{
"proxyMapFrom": "/postman-proxy",
"proxyMapTo": "https://echo.getpostman.com"
},
{
"proxyMapFrom": "/another-proxy",
"proxyMapTo": "https://echo.getpostman.com"
}
]
},
"dependencies": {
"angular-multiple-select": "^1.1.2",
"cordova-android": "^6.2.3",
"cordova-ios": "~4.3.1",
"cordova-plugin-device": "~1.1.5",
"cordova-plugin-network-information": "~1.3.2",
"cordova-plugin-whitelist": "1",
"cordova-plugin-x-toast": "~2.6.0",
"ionic-plugin-keyboard": "~2.2.1",
"pdfmake": "^0.1.31"
},
"cordova": {
"plugins": {
"cordova-plugin-x-toast": {},
"cordova-plugin-device": {},
"cordova-plugin-network-information": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {}
},
"platforms": [
"android",
"ios"
]
}
}
First install both ionic and cordova cli.(It is an ionic v1 project with android/ios platforms) from your package.json.
npm i -g cordova ionic
To install dependencies and devDependencies, do:
npm install
To install plugins and platforms as per package.json,
ionic cordova prepare
You may use the npm install command,
which will install all of the project dependencies locally.
npm official docs description for npm install command:
This command installs a package, and any packages that it depends on.
If the package has a package-lock or shrinkwrap file, the installation
of dependencies will be driven by that, with an npm-shrinkwrap.json
taking precedence if both files exist. See package-lock.json and
npm-shrinkwrap.
source
I have an application with SailsJs over NodeJs on Heroku and I can't run babeljs on. It runs ok on my localhost, but I always get the error:
Error: Couldn't find preset "env" relative to directory "/app"
The Heroku persists in look for itens at /app folder. This project does not have one /app folder
My app folders structure is:
app_name
- api
- assets
- config
- tasks
- views
I follow the documentation of http://babeljs.io to my .babelrc
.babelrc
now:
{
"presets": ["react", "env", "stage-1"],
"plugins": ["transform-class-properties"]
}
Already tried:
{
"presets": ["react", "es2015", "stage-1"],
"plugins": ["transform-class-properties"]
}
When I set the .babelrc to use es2015 I get the error:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
I already installed the dependencies
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel --save-dev
My package.json
{
"name": "redux-cardeck",
"private": true,
"version": "0.0.1",
"engines": {
"node": "6.11.4"
},
"description": "a Sails-Redux application for multi-player online card game",
"keywords": [
"sailsjs",
"redux",
"es2015",
"webpack"
],
"dependencies": {
"axios": "^0.13.1",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-polyfill": "^6.7.2",
"babel-preset-stage-1": "^6.13.0",
"connect-mongo": "0.8.2",
"css-loader": "^0.23.1",
"ejs": "2.3.4",
"file-loader": "^0.8.5",
"grunt": "0.4.5",
"grunt-babel": "^6.0.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-coffee": "0.13.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-cssmin": "0.9.0",
"grunt-contrib-jst": "0.6.0",
"grunt-contrib-less": "1.1.0",
"grunt-contrib-uglify": "0.7.0",
"grunt-contrib-watch": "0.5.3",
"grunt-sails-linker": "~0.10.1",
"grunt-sync": "0.2.4",
"include-all": "~0.1.6",
"node-sass": "^3.8.0",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-scope": "^1.0.0",
"rc": "1.0.1",
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-redux": "^4.4.8",
"react-router": "^2.6.1",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-optimist": "0.0.2",
"redux-optimistic-ui": "^0.3.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"redux-undo": "^0.6.1",
"sails": "~0.12.1",
"sails-disk": "~0.10.9",
"sails-hook-babel": "^6.0.1",
"sails-mongo": "^0.12.2",
"sails-postgresql": "^0.11.4",
"sails-service-mailer": "^3.2.1",
"sails-webpack": "^1.0.13",
"sass": "^0.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"unexpected-react": "^1.0.0",
"updeep": "^0.16.1",
"url-loader": "^0.5.7"
},
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/vanphuong12a2/redux-cardeck.git"
},
"author": "phuong",
"license": "",
"devDependencies": {
"axios-mock-adapter": "^1.6.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-modules-require-hook": "^4.0.0",
"jsdom": "^8.1.0",
"react-tools": "^0.13.3",
"redux-devtools": "^3.4.0",
"redux-logger": "^2.6.1",
"source-map": "^0.5.3",
"unexpected": "^10.10.8",
"webpack-dev-server": "^1.14.1"
}
}
Someone already used BabelJs on Heroku before? I can't understand why it cant find babeljs at the package.json. I set the local of babel on heroku as
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
I think it could be a problem with the relative structure of heroku or the fact I do not have a folder with name app
Thanks if someone can help me with this.
By default Heroku doesn't install the dependencies listed on "devDependencies" in your package.json.
You can either move your presets to "dependencies" or follow the steps here to alter this behavior.
I'm having trouble obtaining a good sourcemap using this Gulp configuration.
gulp.task('scripts', () => {
return gulp.src('app/scripts/**/*.js')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe(
$.rollup(
{
plugins: [
babel(
{
babelrc: false,
presets: ["es2015-rollup"],
exclude: 'node_modules/**',
plugins: [
["transform-react-jsx", {
"pragma": "m"
}]
]
}
)
],
entry: './app/scripts/main.js'
}
)
)
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({stream: true}));
});
The main.js is a simple script that import local file
'use strict';
import Application from './framework/Application.js';
code...
But the sourcemap I got is this:
{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";< ... many ';' here ... >;"}
Npm dev package installed
"babel-core": "^6.4.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.5.2",
"browser-sync": "^2.2.1",
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-babel": "^6.1.1",
"gulp-cache": "^0.4.2",
"gulp-cssnano": "^2.0.0",
"gulp-eslint": "^3.0.0",
"gulp-filter": "^4.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.0.1",
"gulp-rollup": "^2.11.0",
"gulp-sass": "^2.0.0",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.0.0",
"main-bower-files": "^2.5.0",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"run-sequence": "^1.2.2",
"wiredep": "^4.0.0"
Any ideas?