ionic-team / capacitor-angular-toolkit Goto Github PK
View Code? Open in Web Editor NEWAngular Schematics and Builders for Capacitor apps.
License: Other
Angular Schematics and Builders for Capacitor apps.
License: Other
I'm trying to add capacitor to my web app - but when running npx cap add android
I get the following error:
Capacitor could not find the web assets directory "C:\Source\Upwork\snabvendor\snabvendor\www".
Please create it and make sure it has an index.html file. You can change
the path of this directory in capacitor.config.json (webDir option).
You may need to compile the web assets for your app (typically 'npm run build').
More info: https://capacitorjs.com/docs/basics/building-your-app
I have built my app, but with Angular it's output is the /dist/<project-name>
folder. Should the "webDir" in the capacitor.config.json
point to this folder instead of www
?
Could you please add angular/cli builder for capacitor?
performing ng add @capacitor/angular
in a multi-project setup (
https://angular.io/guide/file-structure#multiple-projects )
results in error: Capacitor Add requires a project type of "application".
How to use capacitor / angular in this kind of setup?
Is angular 13 support going to be added at some point?
๐ Capacitor Doctor ๐
Latest Dependencies:
@capacitor/cli: 2.1.2
@capacitor/core: 2.1.2
@capacitor/android: 2.1.2
@capacitor/electron: 2.1.2
@capacitor/ios: 2.1.2
Installed Dependencies:
@capacitor/android not installed
@capacitor/ios not installed
@capacitor/electron not installed
@capacitor/cli 2.1.2
@capacitor/core 2.1.2
On a freshly created project:
handicraftsman@nickolaypc:~/Projects/peaks$ ng add @capacitor/angular
Skipping installation: Package already installed
UPDATE package.json (1338 bytes)
โ Packages installed successfully.
Promise resolver undefined is not a function
It should work?
See current behavior
npm --version
output: 6.10.2
yarn --version
output: 1.22.4
node --version
output: v12.9.1
Hello. I'm trying to add @capacitor/angular into my project using the command ng add @capacitor/angular
I met some warnings before installation and the actual installation failed as well.
The package @capacitor/angular will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR! rxjs@"~6.6.0" from the root project
npm ERR! rxjs@"6.6.7" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/core
npm ERR! peer @angular-devkit/core@">=12.0.0" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/angular
npm ERR! @capacitor/angular@"*" from the root project
npm ERR! @angular-devkit/core@"12.2.12" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/schematics
npm ERR! peer @angular-devkit/schematics@">=12.0.0" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/angular
npm ERR! @capacitor/angular@"*" from the root project
npm ERR! 1 more (@angular-devkit/schematics)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"~6.4.0" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/angular
npm ERR! @capacitor/angular@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I tried creating a new Angular project, installed capacitorJS and ran ng add @capacitor/angular
but I still faced the same issue.
Cannot update, because @capacitor/[email protected]
breaks everything;
only after removing @capacitor/[email protected]
I could update with npm
:
Installed Dependencies:
@capacitor/cli: 3.2.2
@capacitor/core: 3.2.2
@capacitor/ios: 3.2.2
@capacitor/android: 3.2.2
This here demonstrates the problem:
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR! rxjs@"~6.6.7" from the root project
npm ERR! rxjs@"6.6.7" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/core
npm ERR! dev @angular-devkit/core@"~12.0.0" from the root project
npm ERR! peer @angular-devkit/core@">=8.0.0" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/angular
npm ERR! @capacitor/angular@"^1.0.3" from the root project
npm ERR! 1 more (@angular-devkit/schematics)
Also this, when editing a little:
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR! dev typescript@"^4.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"~3.4.3" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/angular
npm ERR! @capacitor/angular@"^1.0.3" from the root project
@capacitor/[email protected]
should be compatible with [email protected]
and typescript@~4.3.2
... so that it can be used with @angular-devkit/[email protected]
.
"dependencies": {
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@capacitor/angular": "^1.0.3",
"rxjs": "~6.6.7",
},
"devDependencies": {
"typescript": "^4.2.4"
}
npm --version
output:
7.16.0
node --version
output:
v14.15.5
Hi,
Is planned to update to angular 13 or 14? Angular 12 is supported but it was released almost 2 years ago.
Thank you for the great job,
If I follow the Angular & Capacitor instructions, I get some weird output when adding the schematics to an Angular 11 CLI project:
nunoarruda@nunos-mbp test-app % ng add @capacitor/angular
โน Using package manager: npm
โ Unable to find compatible package. Using 'latest'.
โ Package has unmet peer dependencies. Adding the package may not succeed.
โ Package successfully installed.
UPDATE package.json (1309 bytes)
UPDATE src/app/app.component.ts (256 bytes)
โ Packages installed successfully.
error: unknown option '--npm-client'
nunoarruda@nunos-mbp test-app %
Maybe this schematic needs to be updated for Capacitor 3 and/or for Angular 11?
I'm on macOS Big Sur 11.4, node v14.17.0, npm 6.14.13, Angular 11.x.
Hello i have pretty common application created in nrwl/nx. Now i wanted to add capacitor via NG AGG @capacitor/angular
`Your global Angular CLI version (10.0.7) is greater than your local
version (9.0.1). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ โณ \ | '_ \ / | | | | |/ _
| '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
Angular CLI: 9.0.1
Node: 12.18.3
OS: win32 x64
Angular: 9.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes
@angular-devkit/architect 0.900.1
@angular-devkit/build-angular 0.900.1
@angular-devkit/build-ng-packagr 0.900.1
@angular-devkit/build-optimizer 0.900.1
@angular-devkit/build-webpack 0.900.1
@angular-devkit/core 9.0.1
@angular-devkit/schematics 9.0.1
@angular/cdk 8.2.3
@angular/flex-layout 9.0.0-beta.29
@angular/service-worker 9.1.9
@ngtools/webpack 9.0.1
@schematics/angular 9.0.1
@schematics/update 0.900.1
ng-packagr 9.0.0
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2`
`ng add @capacitor/angular
Your global Angular CLI version (10.0.7) is greater than your local
version (9.0.1). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Skipping installation: Package already installed
UPDATE package.json (6056 bytes)
โ Packages installed successfully.
spawn npx ENOENT`
I am wililing to provide more logs, if you tell me how to generate any.
I have tried to install @capacitor/cli globally, however it doesnt fix the issue
However "npx cap init" worked - "npx cap add android" has thrown error with non existing web assets folder (i think i have to build application first and set webDir to dist folder" (in my honest opinion i think it should be required only when first build / not adding platform)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.