{"id":969,"date":"2018-03-16T12:39:51","date_gmt":"2018-03-16T11:39:51","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=969"},"modified":"2018-03-16T12:39:51","modified_gmt":"2018-03-16T11:39:51","slug":"ionic-3-starting-with-capacitor","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2018\/03\/16\/ionic-3-starting-with-capacitor\/","title":{"rendered":"Angular | Starting with Capacitor"},"content":{"rendered":"\n

Introduction<\/h1>\n\n\n\n

Install Angular<\/h2>\n\n\n\n
$ npm -g install @angular\/cli<\/pre>\n\n\n\n
Create sample app <\/h2>\n\n\n\n
\u276f ng new app-capacitor\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS   [ https:\/\/sass-lang.com\/documentation\/syntax#scss]\n\n\u276f cd app-capacitor<\/pre>\n\n\n\n
Change output path to capacitor defaults<\/h2>\n\n\n\n
Change line in angular.json<\/p>\n\n\n\n
      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit\/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist\",\n<\/pre>\n\n\n\n
<\/p>\n\n\n\n
 Add capacitor support<\/h2>\n\n\n\n
\u276f ng add @capacitor\/angular\nℹ Using package manager: npm\n✖ Unable to find compatible package.  Using 'latest'.\n✖ Package has unmet peer dependencies. Adding the package may not succeed.\n\nThe package @capacitor\/angular will be installed and executed.\nWould you like to proceed? Yes<\/pre>\n\n\n\n
Capacitor initialisieren<\/h2>\n\n\n\n
\u276f npx cap init\n[?] What is the name of your app?\n    This should be a human-friendly app name, like what you'd see in the App Store.\n\u221a Name ... app-capacitor\n[?] What should be the Package ID for your app?\n    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in\n    reverse domain name notation, generally representing a domain name that you or your company owns.\n\u221a Package ID ... com.example.app\n\u221a Creating capacitor.config.ts in D:\\CLOUD\\Online-Seminare\\Kurse\\Angular\\Einsteiger\\App_Capacitor in 5.31ms\n[success] capacitor.config.ts created!\n\nNext steps:\nhttps:\/\/capacitorjs.com\/docs\/v3\/getting-started#where-to-go-next\n[?] Join the Ionic Community! 💙\n    Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.\n\u221a Create free Ionic account? ... no\n[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖\n    Read more about what is being collected and why here: https:\/\/capacitorjs.com\/telemetry. You can change your mind at\n    any time by using the npx cap telemetry command.\n\u221a Share anonymous usage data? ... no<\/pre>\n\n\n\n
Build your app<\/h2>\n\n\n\n
We will need the dist <\/code>directory with the web files<\/p>\n\n\n\n
\u276f ng build --prod\nOption \"--prod\" is deprecated: No need to use this option as this builder defaults to configuration \"production\".\n✔ Browser application bundle generation complete.\n✔ Copying assets complete.\n✔ Index html generation complete.\n\nInitial Chunk Files               | Names         |      Size\nmain.b633c9096acdb457c421.js      | main          | 212.34 kB\npolyfills.e4574352eda6eb439793.js | polyfills     |  35.95 kB\nruntime.d66bb6fe709ae891f100.js   | runtime       |   1.01 kB\nstyles.31d6cfe0d16ae931b73c.css   | styles        |   0 bytes\n\n                                  | Initial Total | 249.29 kB\n\nBuild at: 2021-05-28T09:32:28.905Z - Hash: ed2ed2d661b0d58b48f2 - Time: 28225ms<\/pre>\n\n\n\n
\u276f npm install @capacitor\/ios @capacitor\/android\nnpm WARN @capacitor\/angular@1.0.3 requires a peer of rxjs@~6.4.0 but none is installed. You must install peer dependencies yourself.\nnpm WARN @capacitor\/angular@1.0.3 requires a peer of typescript@~3.4.3 but none is installed. You must install peer dependencies yourself.\nnpm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\\fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {\"os\":\"darwin\",\"arch\":\"any\"} (current: {\"os\":\"win32\",\"arch\":\"x64\"})\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\\webpack-dev-server\\node_modules\\fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {\"os\":\"darwin\",\"arch\":\"any\"} (current: {\"os\":\"win32\",\"arch\":\"x64\"})\n\n+ @capacitor\/ios@3.0.0\n+ @capacitor\/android@3.0.0\nadded 2 packages from 1 contributor, removed 1 package and audited 1375 packages in 7.385s\n\n88 packages are looking for funding\n  run `npm fund` for details\n\nfound 35 moderate severity vulnerabilities\n  run `npm audit fix` to fix them, or `npm audit` for details<\/pre>\n\n\n\n
Add Platform Android<\/h2>\n\n\n\n
\u276f npx cap add android\n\u221a Adding native android project in android in 167.07ms\n\u221a Syncing Gradle in 1.45ms\n\u221a add in 169.83ms\n[success] android platform added!\nFollow the Developer Workflow guide to get building:\nhttps:\/\/capacitorjs.com\/docs\/v3\/basics\/workflow\n\u221a Copying web assets from dist to android\\app\\src\\main\\assets\\public in 55.26ms\n\u221a Creating capacitor.config.json in android\\app\\src\\main\\assets in 3.50ms\n\u221a copy android in 164.93ms\n\u221a Updating Android plugins in 7.76ms\n\u221a update android in 75.79ms<\/pre>\n\n\n\n
Open Android Studio to build App<\/p>\n\n\n\n
\u276f npx cap open android\n[info] Opening Android project at: android.<\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Install Angular Create sample app Change output path to capacitor defaults Change line in angular.json  Add capacitor support Capacitor initialisieren Build your app We will need the dist directory with the web files Add Platform Android Open Android Studio to build App<\/p>\n","protected":false},"author":1,"featured_media":5095,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[90,12],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-capacitor"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/08\/logo_toolbox_angular.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/5095"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}