I've cloned a working Ionic project from github and installed all the modules needed, also using npm install #firebase/app, but when running Ionic serve an error page is shown saying Cannot find module 'firebase/app'. When I installed firebase/app, it showed me this in the shell:
I guess there's a problem with the angularfire2 version that causes me the other problem? Which version should I use and how can I downgrade/upgrade that? To install angularfire2 I've simply run npm install angularfire2.
This is my package.json file:
{
"name": "progettoEM",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.4.3",
"#angular/compiler": "4.4.3",
"#angular/compiler-cli": "4.4.3",
"#angular/core": "4.4.3",
"#angular/forms": "4.4.3",
"#angular/http": "4.4.3",
"#angular/platform-browser": "4.4.3",
"#angular/platform-browser-dynamic": "4.4.3",
"#firebase/app": "^0.1.5",
"#ionic-native/camera": "^4.5.2",
"#ionic-native/core": "4.3.0",
"#ionic-native/diagnostic": "^4.5.2",
"#ionic-native/file": "^4.5.2",
"#ionic-native/geolocation": "^4.5.2",
"#ionic-native/google-maps": "^4.5.2",
"#ionic-native/secure-storage": "^4.5.2",
"#ionic-native/splash-screen": "4.3.0",
"#ionic-native/status-bar": "4.3.0",
"#ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.4",
"graphhopper-js-api-client": "^0.9.0-3",
"ionic-angular": "3.7.1",
"ionic-img-viewer": "^2.9.0",
"ionicons": "3.0.0",
"leaflet": "^1.2.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.0.0",
"#ionic/cli-plugin-cordova": "1.6.2",
"#ionic/cli-plugin-ionic-angular": "1.4.1",
"ionic": "3.13.1",
"typescript": "2.3.4"
},
"description": "An Ionic project"
}
How do I resolve this problem?
Related
I'm trying to run a Angular App on docker, but when I try to access some page, I get this error.
I've tried to change the aot to false at angular.json, but it didn't work.
Here is my Dockerfile:
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install -g #angular/cli
RUN npm install
COPY . ./
RUN npm run build
EXPOSE 8080
CMD [ "node", "server.js" ]
and here is my package.json:
{
"name": "app-name",
"version": "0.0.2",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"update": "ncu -u -x firebase,#angular/fire"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.0.0",
"#angular/cdk": "~14.0.0",
"#angular/common": "~14.0.0",
"#angular/compiler": "~14.0.0",
"#angular/core": "~14.0.0",
"#angular/fire": "^7.3.0",
"#angular/flex-layout": "^13.0.0-beta.38",
"#angular/forms": "~14.0.0",
"#angular/material": "^14.0.0",
"#angular/platform-browser": "~14.0.0",
"#angular/platform-browser-dynamic": "~14.0.0",
"#angular/pwa": "^14.0.0",
"#angular/router": "~14.0.0",
"#angular/service-worker": "~14.0.0",
"#fortawesome/angular-fontawesome": "^0.11.0",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"bootstrap": "^5.1.3",
"crypto-js": "^4.1.1",
"file-saver": "^2.0.5",
"firebase": "^8.10.0",
"jwt-decode": "^3.1.2",
"material-design-icons": "^3.0.1",
"ng2-pdf-viewer": "^9.0.0",
"ngx-mask": "^14.0.0",
"ngx-toastr": "^14.3.0",
"rxjs": "^7.5.5",
"tslib": "^2.4.0",
"zone.js": "^0.11.5"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.0",
"#angular/cli": "~14.0.0",
"#angular/compiler-cli": "~14.0.0",
"#angular/language-service": "~14.0.0",
"#types/crypto-js": "^4.1.1",
"#types/jasmine": "~4.0.3",
"#types/jasminewd2": "~2.0.10",
"#types/node": "~17.0.40",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.1.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.20",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.0.1",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"ts-node": "~10.8.1",
"tslint": "^6.1.3",
"typescript": "^4.7.3"
}
}
If anyone has already faced this error and knows how to solve it, I would greatly appreciate it, thanks.
I solved the problem using the useHash: true on my app-routing.module.ts.
Now I got link like something.com/#/someParameter
#NgModule({
imports: [RouterModule.forRoot(routes, {relativeLinkResolution: 'legacy', useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
I'm building an app using Ionic 6.19.0 and it suddenly started to face building issues.
I get Error: spawn UNKNOWN each time I execute ionic serve.
This is my package.json file
{
"name": "stile",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics": "^13.3.3",
"#angular/common": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"#auth0/angular-jwt": "^5.0.2",
"#capacitor/android": "3.4.3",
"#capacitor/app": "1.1.0",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.4.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.1",
"#capacitor/status-bar": "1.0.7",
"#ionic/angular": "^6.0.0",
"#npmcli/node-gyp": "^2.0.0",
"bootstrap": "^5.1.3",
"install": "^0.13.0",
"jquery": "^3.6.0",
"json-server": "^0.17.0",
"node-sass": "^7.0.1",
"npm": "^8.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.3",
"#angular-eslint/builder": "^12.2.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.0.1",
"#angular/compiler": "~13.0.0",
"#angular/compiler-cli": "~13.0.0",
"#angular/language-service": "~13.0.0",
"#capacitor/cli": "3.4.0",
"#ionic/angular-toolkit": "^6.1.0",
"#popperjs/core": "^2.11.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"acorn": "^8.7.0",
"ajv": "^6.12.6",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
Here are few solutions that might help:
Ensure you're in the root folder of your project.
Try fixing the existing node_modules folder with npm rebuild + reassign
permissions to your node_modules folder: chmod 755 -R
/path/to/node_modules
Remove node_modules and reinstall with npm install
This question already has answers here:
Angular 6 - Could not find module "#angular-devkit/build-angular"
(47 answers)
Closed 8 months ago.
I'm trying to deploy my app to heroku. Heroku local web works completely fine. I've tried adding npm i #angular-devkit/build-angular but it doesn't help and I also couldn't find anything similar on the internet. Deploying to Heroku works fine until it gets to ng build --prod command which can be found in "postinstall" inside angular package.json.
package.json
{
"name": "web",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"heroku-postbuild": "npm install && cd public && npm install #angular/cli -g && npm install",
"heroku-cleanup": "cd ./public && patch-package"
},
"dependencies": {
"#swimlane/ngx-charts": "^19.2.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"morgan": "~1.9.1",
"patch-package": "^6.4.7",
"pg": "^8.7.1"
},
"engines": {
"node": "16.10",
"npm": "7.24.0"
}
}
angular package.json
{
"name": "public",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "./node_modules/.bin/patch-package && ng build --prod --aot",
"heroku-cleanup": "./node_modules/.bin/patch-package"
},
"private": true,
"dependencies": {
"#angular/animations": "~11.2.12",
"#angular/common": "~11.2.12",
"#angular/compiler": "~11.2.12",
"#angular/core": "~11.2.12",
"#angular/forms": "~11.2.12",
"#angular/material": "^11.2.12",
"#angular/platform-browser": "~11.2.12",
"#angular/platform-browser-dynamic": "~11.2.12",
"#angular/router": "~11.2.12",
"#swimlane/ngx-charts": "^19.2.0",
"patch-package": "^6.4.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"typescript": "~4.1.5",
"zone.js": "~0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1102.11",
"#angular/cli": "~11.2.11",
"#angular/compiler-cli": "~11.2.12",
"#angular/cdk": "~11.2.11",
"#types/jasmine": "~3.6.0",
"#types/jquery": "^3.5.11",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0"
}
}
Procfile:
web: npm start
One thing to try is to re-install the package:
npm uninstall #angular-devkit/build-angular
npm install --save-dev #angular-devkit/build-angular
If that does not work, you can try:
ng update #angular/cli #angular/core --allow-dirty --force
When I do yarn install && yarn workspace frontend install && yarn workspace backend install in my Typescript project (various package.json files below) the dependencies for (e.g.) Angular and CDK are all in the root node_modules folder, but when I run (e.g.) yarn workspace frontend ng build, I get An unhandled exception occurred: ENOENT: no such file or directory, lstat '/work/frontend/node_modules/#angular'. How do I get the dependencies in the right place?
Root package.json:
"name": "load-tester",
"version": "1.0.0",
"private": true,
"workspaces": [
"backend",
"frontend"
],
"scripts": {
"deploy": "yarn workspace frontend ng build && yarn workspace backend deploy"
},
"packageManager": "yarn#3.1.0",
"dependencies": {
"#aws-sdk/client-ec2": "^3.34.0",
"#aws-sdk/client-elastic-load-balancing-v2": "^3.34.0",
"#middy/http-content-negotiation": "^2.5.1",
"esbuild": "^0.12.28"
}
}
frontend/package.json
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.2.0",
"#angular/cdk": "12.2.6",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/material": "~12.2.6",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#aws-sdk/client-sns": "^3.34.0",
"#okta/okta-angular": "^4.1.0",
"#okta/okta-auth-js": "^5.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.5",
"#angular/cli": "~12.2.5",
"#angular/compiler-cli": "~12.2.0",
"#angular/localize": "^12.2.5",
"#types/jasmine": "~3.8.0",
"#types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
backend/package.json
{
"name": "backend",
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"test": "jest",
"cdk": "cdk",
"deploy": "yarn build && yarn cdk deploy"
},
"devDependencies": {
"#aws-cdk/assert": "^1.121.0",
"#aws-cdk/aws-apigateway": "1.121.0",
"#aws-cdk/aws-apigatewayv2": "1.121.0",
"#aws-cdk/aws-apigatewayv2-integrations": "1.121.0",
"#aws-cdk/aws-certificatemanager": "1.121.0",
"#aws-cdk/aws-dynamodb": "1.121.0",
"#aws-cdk/aws-ecs": "^1.121.0",
"#aws-cdk/aws-ecs-patterns": "^1.121.0",
"#aws-cdk/aws-lambda": "1.121.0",
"#aws-cdk/aws-lambda-event-sources": "1.121.0",
"#aws-cdk/aws-lambda-nodejs": "1.121.0",
"#aws-cdk/aws-logs": "1.121.0",
"#aws-cdk/aws-s3-deployment": "1.121.0",
"#aws-cdk/aws-sqs": "^1.121.0",
"#aws-solutions-constructs/aws-cloudfront-s3": "1.121.0",
"#types/aws-lambda": "^8.10.83",
"#types/http-errors": "^1.8.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.9.6",
"#types/source-map-support": "^0.5.4",
"aws-cdk": "^1.121.0",
"eslint": "^7.32.0",
"jest": "^27.2.0",
"json-schema-to-ts": "^1.6.4",
"ts-jest": "^27.0.5",
"ts-node": "^10.2.1",
"typescript": "^4.4.3"
},
"dependencies": {
"#aws-cdk/aws-apigatewayv2-authorizers": "^1.130.0",
"#aws-cdk/cloud-assembly-schema": "^1.121.0",
"#aws-cdk/core": "^1.121.0",
"#aws-cdk/cx-api": "^1.121.0",
"#aws-cdk/region-info": "^1.121.0",
"#aws-sdk/client-dynamodb": "^3.34.0",
"#aws-sdk/client-ecs": "^3.34.0",
"#aws-sdk/client-elastic-load-balancing-v2": "^3.34.0",
"#aws-sdk/client-route-53": "^3.34.0",
"#aws-sdk/client-s3": "^3.34.0",
"#aws-sdk/client-sqs": "^3.34.0",
"#aws-sdk/lib-dynamodb": "^3.34.0",
"#aws-sdk/signature-v4-crt": "^3.34.0",
"#dazn/lambda-powertools-logger": "^1.28.1",
"#dazn/lambda-powertools-pattern-basic": "^1.29.0",
"#middy/core": "^2.5.1",
"#middy/http-cors": "^2.5.1",
"#middy/http-error-handler": "^2.5.1",
"#middy/http-json-body-parser": "^2.5.1",
"#middy/http-multipart-body-parser": "^2.5.1",
"#middy/sqs-json-body-parser": "^2.5.1",
"#middy/validator": "^2.5.1",
"#okta/jwt-verifier": "^2.3.0",
"ajv": "^8.6.3",
"aws-lambda": "^1.0.6",
"constructs": "^3.2.0",
"exponential-backoff": "^3.1.0",
"http-errors": "^1.8.0",
"middy-jsonapi": "2.0.1",
"source-map-support": "^0.5.16"
}
}
The problem turned out to have been my angular.json; in particular anywhere referring to ./node_modules/#angular. When I changed that to ../node_modules/#angular I was able to successfully build both frontend and backend.
I am relatively new to angular 2. I want to use angular2-grid directory. What I have done is creating a folder for my application with all necessary starting file and then run npm-install. Installation is completed and the demo application is working after I typed npm start. Then I want to set up angular2-grid and in the official website is saying to use it you simply have to run npm install angular2-grid. I tried that but I got some warning like :
npm WARN angular2-grid#2.0.1 requires a peer of #angular/core#^2.4.4
but none was installed. npm WARN angular2-grid#2.0.1 requires a peer
of rxjs#^5.0.1 but none was installed. npm WARN angular2-grid#2.0.1
requires a peer of zone.js#^0.7.2 but none was installed.
I need some help how to overcome this problem. Any suggestion is welcome.
My package.json below:
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"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",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}
Thanks
your existing Angular version and RXJS version is lower than what angular-grid requires. Either go for an older version of angular-grid or update your project if possible
For your angular2-grid to be added as a dependency in package.json you need to do
npm install angular2-grid --save
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"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",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}