Angular 4 with universal "Unexpected token import" - node.js

My project was running properly without universal but i am trying to use Universal and i am getting below error.
"ngx-page-scroll/src/ngx-page-scroll.service.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable, Optional, SkipSelf, isDevMode } from '#angular/core';
"
My package.json
{
"name": "resumable-ang",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.4.6",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/platform-server": "^4.*",
"#angular/router": "^4.0.0",
"#ng-select/ng-select": "^0.15.2",
"#ngrx/effects": "^4.0.5",
"#ngrx/store": "^4.0.3",
"#types/jquery": "^3.2.15",
"angular-hammer": "^2.2.0",
"angular-progress-http": "^1.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ngx-carousel": "^1.3.5",
"ngx-page-scroll": "^4.0.2",
"ngx-progressbar": "^2.1.1",
"rxjs": "^5.1.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.1.1",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}

Try whitelisting that module in your webpack config
//webpack.server.js
target: 'node',
externals: [nodeExternals({
whitelist: [
/^Nolanus\/ngx-page-scroll/
]
})],

Related

after running ng serve I'm getting error "an unhandled exception occurred Cannot find module '../dotjs/validate' "

**An unhandled exception occurred: Cannot find module '../dotjs/validate'
**this is my package.json file
"dependencies": {
"#angular/animations": "^8.1.1",
"#angular/cdk": "^8.0.2",
"#angular/common": "~8.1.0",
"#angular/compiler": "~8.1.0",
"#angular/core": "~8.1.0",
"#angular/flex-layout": "^8.0.0-beta.26",
"#angular/forms": "~8.1.0",
"#angular/material": "^8.0.2",
"#angular/platform-browser": "~8.1.0",
"#angular/platform-browser-dynamic": "~8.1.0",
"#angular/pwa": "^0.801.1",
"#angular/router": "~8.1.0",
"#angular/service-worker": "~8.1.0",
"#ctrl/ngx-emoji-mart": "1.0.6",
"#ionic/angular-toolkit": "^6.0.0",
"#types/jquery": "^3.3.34",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"angular-text-input-autocomplete": "^0.3.0",
"angular7-csv": "^0.2.12",
"autolinker": "^3.14.1",
"d3": "^5.15.1",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"keyboardevent-key-polyfill": "^1.1.0",
"material-design-icons": "^3.0.1",
"moment": "^2.24.0",
"net": "^1.0.2",
"ngx-csv": "^0.3.2",
"ngx-daterangepicker-material": "2.1.10",
"ngx-device-detector": "^1.4.2",
"ngx-linky": "^2.2.0",
"ngx-owl-carousel": "^2.0.7",
"ngx-swiper-wrapper": "^10.0.0",
"ngx-tour-core": "^4.1.1",
"ngx-tour-md-menu": "^4.1.1",
"owl.carousel": "^2.3.4",
"puppeteer": "^5.2.1",
"rxjs": "~6.4.0",
"rxjs-take-while-inclusive": "^2.1.1",
"save": "^2.4.0",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.9.0",
"twitter-text": "^3.1.0",
"webpack-bundle-analyzer": "^3.8.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/cli": "^13.2.2",
"#angular/compiler-cli": "^13.2.2",
"#angular/language-service": "~8.1.0",
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"#types/d3": "^5.7.2",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.15",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"prettier": "2.1.1",
"protractor": "^7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3",
"webpack": "^4.41.5"
}
Previously i was getting following error :
"Could not find the '#angular-devkit/build-angular:dev-server' builder's node package."
I tried npm install command
also npm uninstall #angular-devkit/build-angular
and npm install #angular-devkit/build-angular
Now Im facing above error
try to uninstall the incriminated package and then run
npm install --save-dev #angular-devkit/build-angular
and
npm install --save-dev dotjs

Angular components are removed after installing a new component

I have an asp.net core web application with angular 5. I want to generate some Barcodes and let the user to print them. After searching I found ngx-barcode. A barcode component for Angular4+. As it says in its page I need install it using this command
$ npm install ngx-barcode –save
So at the node.js command prompt I run that command in my application directory. Like this:
E:\MyprojectDir\ npm install ngx-barcode –save
After getting some warning and at the end of the command execution I got the following message in command prompt:
Added 2 packages and removed 21 packages.
It seems it has been deleted all other node packages from my project. And now there are no reference to angular/core, angular/forms and others package in my project.
This is the content of my package.json file:
{
"name": "",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "webpack --config webpack.config.vendor.js"
},
"private": true,
"dependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"#ngtools/webpack": "1.5.0",
"#types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"#types/chai": "4.0.1",
"chai": "4.0.2",
"karma-chai": "0.1.0",
"karma-webpack": "2.0.3"
}
}
It's so nice of you to help me.
in this type of errors always npm install again will give us a good clue where the main problem is.
and based on #VahidGhadiri mentioned ,next step:
npm install --save-dev #ngtools/webpack#latest
for resolving
error "Version of #angular/compiler-cli needs to be 2.3.1 or greater.
Current version is "5.1.0"

Datepicker Material Design Angular 5 - opens empty windows

See the behavior -
https://drive.google.com/file/d/1NG-CdTq3EgjDX8kc8VOSkPimYOzjdFSA/view
When I resize the browser it shows the content of mat-calendar, but initialy it is blank.
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
MatDatepickerModule and MatNativeDateModule imported..
Package.json dependencies
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"angular-bootstrap-md": "^6.0.1",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng4-geoautocomplete": "^0.1.0",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
Why isn't it working?
What should I change adjust?
I am also working with MDBootsrap, can it be the problem?
Update
Updated a bit the package.json
It was a bit of a straggle to make things work again so use with cautious.
{
"name": "kai.starter",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve ",
"start-prod": "ng serve --aot --prod --configuration production",
"build": "ng build --aot --prod --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"#ng-bootstrap/ng-bootstrap": "^3.0.0",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-bootstrap": "^1.6.3",
"ng4-geoautocomplete": "^0.1.0",
"ngx-geoautocomplete": "^0.1.1",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
It started working suddenly without specific explanation what was the problem ..
I've also removed the mdbootsrap from the project, but it worked well before that as well.

ERROR in ./node_modules/elasticsearch/src/lib/utils.js Module not found: Error: Can't resolve 'path' in \node_modules\elasticsearch\src\lib'

I was trying to migrate my angular 5 code to angular 6.
After migrating elasticsearch client from "elasticsearch": "^14.2.1", to "elasticsearch": "^14.2.2" ,i am getting the below error, While starting angular code.
npm start
ERROR in ./node_modules/elasticsearch/src/lib/utils.js
Module not found: Error: Can't resolve 'path' in
'\ui_angular_6\node_modules\elasticsearch\src\lib'
: Failed to compile.
Package.json
"dependencies": {
"#angular/animations": "6.0.0",
"#angular/common": "6.0.0",
"#angular/compiler": "6.0.0",
"#angular/core": "6.0.0",
"#angular/flex-layout": "^5.0.0-beta.14",
"#angular/forms": "6.0.0",
"#angular/http": "6.0.0",
"#angular/platform-browser": "6.0.0",
"#angular/platform-browser-dynamic": "6.0.0",
"#angular/router": "6.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.1.2",
"angular-datatables": "^5.0.0",
"angular-font-awesome": "^3.1.2",
"body-parser": "^1.18.2",
"bootstrap": "^4.1.0",
"core-js": "^2.4.1",
"elasticsearch": "^14.2.2",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ng2-pdf-viewer": "^4.1.2",
"popper.js": "^1.14.3",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "6.0.0",
"#angular/compiler-cli": "6.0.0",
"#angular/language-service": "6.0.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.1",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^2.7.2",
"#angular-devkit/build-angular": "~0.6.0"
}
Please help me to fix this issue.
Updating Elastic search client to 15.1.1 resolved my problem
"elasticsearch": "^15.1.1",
Install the require dependencies using this line below
npm i --save util events lodash url querystring http https agentkeepalive zlib

Metadata version mismatch for ng bootstrap module

I have an angular2 project.
npm version: 5.6.0
node version: 9.5.0
I get the follwoing error when I run ng serve. What am I doing wrong?
ERROR in Error: Metadata version mismatch for module
/Users/naik/dev/company/admin/node_modules/#ng-bootstrap/ng-bootstrap/index.d.ts,
found version 4, expected 3, resolving symbol AppModule in
/Users/naik/dev/company/admin/src/app/app.module.ts,
resolving symbol AppModule in
/Users/naik/dev/company/admin/src/app/app.module.ts,
resolving symbol AppModule in
/Users/naik/dev/company/admin/src/app/app.module.ts
Below are my dependencies in package.json
"dependencies": {
"#angular/common": "^4.4.6",
"#angular/compiler": "^4.4.6",
"#angular/core": "^4.4.6",
"#angular/forms": "^4.4.6",
"#angular/http": "^4.4.6",
"#angular/platform-browser": "^4.4.6",
"#angular/platform-browser-dynamic": "^4.4.6",
"#angular/router": "^4.4.6",
"#angular/tsc-wrapped": "^0.5.2",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"#ngui/datetime-picker": "^0.16.2",
"amplitude": "^3.5.0",
"angular2-tag-input": "^1.2.3",
"core-js": "^2.5.1",
"font-awesome": "^4.7.0",
"fontawesome": "^4.7.2",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"angular-2-dropdown-multiselect": "1.5.4",
"ngx-quill-editor": "^2.2.2",
"rxjs": "^5.5.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^4.4.6",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.90",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslib": "^1.8.0",
"tslint": "^4.3.0",
"typescript": "~2.1.0"
}

Resources