I'm trying to get my build much smaller to get my load time faster, but when I run
ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools
I get
what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.
So far to reduce the size by doing the following:
Removed old/unused package.json entries
changed all material imports to specific path like for paginator I'm importing now as
import { MatPaginator } from "#angular/material/paginator";
instead of import { MatPaginator } from "#angular/material/"; per the advice from other posts.
replaced moment with moment.min.js so that locales don't get added
added brotli for text compression.
Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
I've never used webpack before so this could be an issue, but I'm not sure.
package.json
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "~8.2.2",
"#angular/common": "~8.2.4",
"#angular/compiler": "~8.2.4",
"#angular/core": "~8.2.4",
"#angular/forms": "~8.2.4",
"#angular/material": "^8.2.2",
"#angular/platform-browser": "~8.2.4",
"#angular/platform-browser-dynamic": "~8.2.4",
"#angular/router": "~8.2.4",
"#ng-bootstrap/ng-bootstrap": "^5.1.5",
"#ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "~8.3.2",
"#angular/compiler-cli": "~8.2.4",
"#angular/language-service": "~8.2.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"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",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
Here is a stats.json file when using ng build --prod
Here's a more detailed version as well
Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.
https://www.npmjs.com/package/gzip-all
Also change your server max cache policy to get caching benefits.
Related
We have below dependency error in security scan. these are giving vulnearability issue
qs
load-utils
but these dependencies are not in package.json. I have read in google that it can be indirect dependency.
How to check indirect dependency. is there any way to check.
below is my package.json
{
"name": "infy-02",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --base-href /finnacle-payment/ ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#grapecity/wijmo.all": "5.20203.748",
"#grapecity/wijmo.angular2.all": "5.20203.748",
"ansi-html": "0.0.9",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.3",
"classlist.js": "^1.1.20150312",
"cookie-parser": "^1.4.4",
"dd-trace": "2.5.0",
"engine.io": "4.1.2",
"express": "^4.17.1",
"express-session": "^1.17.0",
"hammerjs": "^2.0.8",
"helmet": "^3.21.2",
"ini": "1.3.6",
"jquery": "3.5.1",
"jsonwebtoken": "^8.5.1",
"knex": "^0.20.11",
"minimatch": "3.0.6",
"morgan": "^1.9.1",
"node-forge": "1.0.0",
"passport": "^0.4.1",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.12",
"passport-oauth2": "^1.5.0",
"passport-openidconnect": "0.0.2",
"rxjs": "~6.4.0",
"socket.io-parser": "3.3.2",
"tslib": "^1.10.0",
"wijmo": "5.20203.748",
"winston": "^3.2.1",
"xmlhttprequest-ssl": "1.6.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.19",
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.1.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
I have tried to search in google but not able to understand on which dependency qs or load-utils are dependent. could you please help on the same.
You can ask npm to explain why a package is needed, directly or indirectly:
$ npm explain qs
If it is an indirect dependency, there is not much you can do about that. You have to wait for the other packages to update their dependencies.
You can however update your own dependencies. This will also update indirect dependencies. For example, Angular is already at version 14 and you are still using Angular 8.
I'm trying to create an Angular 8 project, but I always end up having an error when I try to compile the resulting app due to a wrong path in my node_modules folder; specifically in the file located at #angular/cli/commands/add-impl.d.ts, which contains this:
import { Arguments } from '../models/interface';
import { SchematicCommand } from '../models/schematic-command';
import { Schema as AddCommandSchema } from './add';
export declare class AddCommand extends SchematicCommand<AddCommandSchema> {
readonly allowPrivateSchematics = true;
readonly allowAdditionalArgs = true;
readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager;
run(options: AddCommandSchema & Arguments): Promise<number | void>;
reportAnalytics(paths: string[], options: AddCommandSchema & Arguments, dimensions?: (boolean | number | string)[], metrics?: (boolean | number | string)[]): Promise<void>;
private isPackageInstalled;
private executeSchematic;
private findProjectVersion;
private hasMismatchedPeer;
}
The line reading readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager; always gives an error since the specified path can't find the file its pointing to; I checked and I actually don't see any folder called dist-schema/packages, and I don't know what its purpose is; if I change the route to: #/angular/cli/lib/config/schema the error goes away and everything works fine, but if generate the node_modules folder again, the error comes back since the route is again specified as before.
I haven't been able to find much information regarding this, and nothing at all that points me to a solution; I've tried upgrading my Angular version to the latest 8.x.x version, deleting my package-lock.json file, deleting node_modules and installing again and none seem to work.
This is my package.json file:
{
"name": "opti-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"watch": "gulp watch",
"dev": "gulp development",
"prod": "gulp production",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.0.1",
"#angular/compiler": "~8.0.1",
"#angular/core": "~8.0.1",
"#angular/forms": "~8.0.1",
"#angular/google-maps": "^9.0.0-rc.0",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.0.1",
"#angular/platform-browser-dynamic": "~8.0.1",
"#angular/router": "~8.0.1",
"#ckeditor/ckeditor5-angular": "^1.1.2",
"#gvreddy04/ckeditor5-build-classic-all-features": "^16.11.0",
"#mdi/font": "^3.9.97",
"#ngu/carousel": "^1.5.5",
"#swimlane/ngx-charts": "^13.0.2",
"#swimlane/ngx-datatable": "^15.0.2",
"#types/googlemaps": "^3.39.2",
"#types/html2canvas": "0.0.35",
"#types/jspdf": "^1.3.2",
"angular-fusioncharts": "^3.0.3",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"fusioncharts": "^3.14.1",
"google-libphonenumber": "^3.2.6",
"gulp": "^4.0.2",
"gulp-replace": "^1.0.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.1",
"html2pdf.js": "^0.9.1",
"intl-tel-input": "^14.1.0",
"jquery": "^3.5.1",
"jspdf": "^1.5.3",
"material-design-icons": "^3.0.1",
"ng-recaptcha": "^5.0.0",
"ng2-pdf-viewer": "^6.1.2",
"ng2-table": "^1.3.2",
"ngx-bootstrap": "^5.2.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^8.2.0",
"ngx-gauge": "^1.0.0-beta.11",
"ngx-highlightjs": "^4.0.0",
"ngx-hotjar": "^8.0.2",
"ngx-image-cropper": "^3.2.1",
"ngx-intl-tel-input": "^2.3.1",
"ngx-mat-select-search": "^2.0.0",
"popper.js": "^1.16.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.8",
"#angular/cli": "^8.3.18",
"#angular/compiler-cli": "~8.0.1",
"#angular/language-service": "~8.0.1",
"#types/jasmine": "^3.4.6",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "^5.2.0",
"dotenv": "^8.2.0",
"gulp-file": "^0.4.0",
"gulp-rename": "^1.4.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.4.5"
}
}
Get this error after npm install:
+-- UNMET PEER DEPENDENCY #angular/common#6.1.10
+-- UNMET PEER DEPENDENCY #angular/core#6.1.10
`-- file-saver#1.3.8
Get this error after compile:
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:120-128 "export 'ɵɵinject' was not found in '#angular/core'
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:34-52 "export 'ɵɵdefineInjectable' was not found in '#angular/core'
my package.json is:
{
"name": "web-app",
"version": "2.1.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"public": "ng serve --port 8080 --host 0.0.0.0",
"build": "ng build --prod --build-optimizer",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.4.7",
"#angular/material-moment-adapter": "^6.4.2",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"#turf/turf": "latest",
"#types/file-saver": "^1.3.0",
"core-js": "^2.5.7",
"cron": "^1.7.2",
"enhanced-resolve": "^3.3.0",
"file-saver": "^1.3.8",
"hammerjs": "^2.0.8",
"highcharts": "^6.1.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"ngx-clipboard": "^11.1.1",
"ngx-gauge": "1.0.0-beta.7",
"progressbar.js": "^1.0.1",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"screenfull": "^3.3.2",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^1.6.6",
"#angular/compiler-cli": "^6.1.0",
"#types/googlemaps": "^3.30.16",
"#types/highcharts": "^5.0.25",
"#types/jasmine": "2.8.8",
"#types/node": "~8.0.0",
"#types/socket.io": "^1.4.36",
"#types/socket.io-client": "^1.4.32",
"codelyzer": "^4.4.2",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "2.0.5",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^5.10.0",
"typescript": "2.7.2"
},
"browserslist": [
"last 2 versions",
"ie 11"
]
}
In my case, I only changed version from "#agm/core": "^1.0.0-beta.5" to "#agm/core": "1.0.0".
For angular 7, 8 the new version "#agm/core": "1.1.0" doesn't work and "#agm/core": "^1.0.0-beta.5" neither.
Try removing your node_modules folder, and package-lock.json file, then rerun npm install
Or, run npm i --force, the force flag will force npm to fetch remote resources even if a local copy exists on disk.
And lastly, you can try reinstalling npm:
$ npm i -g npm
Yash,
I solved it by taking a clone of my project in a new folder and then upgraded the NPM version and installed node_modules again.
I solved this issue by opening node_modules/ and removing all occurrences of ɵɵinject and ɵɵdefineInjectable from #agm/core package.
This is my package.json
{
"name": "eterna-posta-web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.7",
"#agm/js-marker-clusterer": "^1.0.0",
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "^7.1.3",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#microsoft/signalr": "^5.0.3",
"#techiediaries/ngx-qrcode": "^9.1.0",
"core-js": "^2.5.4",
"js-marker-clusterer": "^1.0.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.8",
"#angular/cli": "~7.1.2",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
This is the original answer: answer
finally all I had to do was
npm i #agm/core#1.0.0
then my OLD project worked fine
just make #agm/core to #agm/core": "1.0.0"
and
hit "npm i"
this worked for me......after some research
I have an Angular app based on Angular7 and there has been a very strange issue I am getting in the code.
When I load the same page multiple times then the app starts responding extremely slow and I am even unable to type in the form after repeated loading of same page.
This is not specific to only one page rather all the pages makes the app slow after repeated use of multiple pages.
Now, the concern is how to detect which code is creating this issue?
I tried to update the Angular packages but nothing helps.
Here is the package.json
{
"name": "apex",
"version": "6.0.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/animations": "7.0.1",
"#angular/common": "7.0.1",
"#angular/compiler": "7.0.1",
"#angular/core": "7.0.1",
"#angular/forms": "7.0.1",
"#angular/http": "7.0.1",
"#angular/platform-browser": "7.0.1",
"#angular/platform-browser-dynamic": "7.0.1",
"#angular/platform-server": "7.0.1",
"#angular/router": "7.0.1",
"#ng-bootstrap/ng-bootstrap": "4.1.3",
"#ng-select/ng-select": "^2.16.2",
"#ngx-translate/core": "10.0.2",
"#swimlane/ngx-datatable": "^14.0.0",
"#types/jquery": "3.3.21",
"bootstrap": "4.0.0",
"bourbon": "5.0.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"file-droppa": "^1.8.0",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^4.0.1",
"ngx-chips": "^2.0.0-beta.0",
"ngx-toastr": "^9.1.2",
"ngx-ui-switch": "7.0.1",
"node-sass": "4.7.2",
"primeicons": "^1.0.0",
"primeng": "^7.1.2",
"resize-observer-polyfill": "1.4.2",
"rxjs": "6.3.3",
"screenfull": "3.3.1",
"web-animations-js": "2.2.5",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "7.0.3",
"#angular/compiler-cli": "7.0.1",
"#angular/language-service": "7.0.1",
"#types/jasmine": "2.8.6",
"#types/node": "9.4.7",
"codelyzer": "4.2.1",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "1.0.0",
"protractor": "5.3.0",
"rxjs-compat": "6.2.0",
"ts-node": "5.0.1",
"tslint": "5.7.0",
"typescript": "3.1.3",
"#angular-devkit/build-angular": "~0.6.8"
}
}
The question is too generic, you need to debug your code and see if you have any synchronic requests that might get stuck.
I'm trying to import angular2-cookie in my angular4 project.
My project is built with angular-cli#1.2.7, here is my package.json:
{
"name": "ng-admin",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#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/router": "^4.0.0",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
the angular2-cookie dochttps://github.com/salemdar/angular2-cookie#cli ask me to add something in angular-cli-build.js, but I have neither angular-cli-build.js nor systemjs.config.js
I import angular2-cookie in app.module.ts with:
import { CookieService } from 'angular2-cookie/services/cookies.service';
...
...
providers: [
CookieService
]
My project works well with ng server and it also works well in my chrome.
it is built successfully with ng build --prod, but when I run it in chrome or run it with ng server --aot , chrome console show this error:
ERROR Error: No provider for CookieOptions!
How can I solve this problem? Thanks all!
Add CookieOptions in your import statement like import { CookieService, CookieOptions } from 'angular2-cookie'; and then add both CookieService and CookieOptions in your Root Module's provider array.