{"id":39537,"date":"2023-03-11T10:45:06","date_gmt":"2023-05-16T00:20:15","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/"},"modified":"2024-04-29T18:23:12","modified_gmt":"2024-04-29T10:23:12","slug":"%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/","title":{"rendered":"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"<p>\u521d\u6b21\u89c1\u9762\u3002\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u53c2\u52a0 Advent Calendar\uff01\u5927\u7ea6\u4e00\u5e74\u524d\u5f00\u59cb\u63a5\u89e6 AWS Amplify\uff0c\u56e0\u4e3a\u5b83\u7684\u4fbf\u5229\u6027\u800c\u6210\u4e3a\u6211\u559c\u7231\u4f7f\u7528\u7684\u5de5\u5177\uff0c\u6240\u4ee5\u6211\u5e0c\u671b\u80fd\u591f\u901a\u8fc7\u8fd9\u6b21\u6d3b\u52a8\u5206\u4eab\u4e00\u4e9b\u76f8\u5173\u7ecf\u9a8c\u3002<\/p>\n<h1>\u5728\u4e1c\u4eacAWS Loft Ginza\uff0c\u6211\u5728\u76ee\u9ed1\u4e0eAWS Amplify\u76f8\u8bc6\u3002<\/h1>\n<p>\u5927\u7ea6\u4e00\u5e74\u524d\uff0c\u5728\u4e1c\u4eac\u90fd\u76ee\u9ed1\u8f66\u7ad9\u6b65\u884c1\u5206\u949f\u7684\u5730\u65b9\uff0c\u5f00\u8bbe\u4e86\u4e00\u4e2a\u540d\u4e3a &#8220;AWS Loft Tokyo&#8221; \u7684\u8bbe\u65bd\u3002\u8fd9\u4e2a\u5730\u65b9\u7684\u7406\u5ff5\u662f\u4e3a\u521b\u4e1a\u516c\u53f8\u548c\u5f00\u53d1\u8005\u63d0\u4f9b\u4e00\u4e2a\u5c06\u6311\u6218\u53d8\u4e3a\u73b0\u5b9e\u7684\u573a\u6240\u3002<\/p>\n<p>\u8fd9\u6b21\u7684AWS Amplify Advent Calendar\u4e5f\u662f\u7531\u542f\u52a8\u89e3\u51b3\u65b9\u6848\u67b6\u6784\u5e08\u585a\u7530\u5148\u751f\uff08@akitsukada\uff09\u5236\u4f5c\u7684\u3002<\/p>\n<p>\u4ece\u5f00\u4e1a\u8d77\uff0c\u6211\u5c31\u5e38\u5e38\u53bbLoft\uff0c\u5e76\u53c2\u52a0\u6bcf\u5468\u90fd\u4f1a\u4e3e\u529e\u7684\u6280\u672f\u76f8\u5173\u6d3b\u52a8\uff0c\u8fd9\u4e9b\u6d3b\u52a8\u901a\u5e38\u662f\u5728\u5171\u540c\u529e\u516c\u7ed3\u675f\u540e\u4e3e\u884c\u7684\u3002\u5176\u4e2d\u4e4b\u4e00\u662f\u53c2\u52a0\u4e86\u201cAWS Amplify\u9ed1\u5e26\u516c\u5f00\u5f55\u5236&amp;AppSync\u5165\u95e8\u201d\u6d3b\u52a8\u3002<\/p>\n<h1>Ionic\u662f\u4e00\u79cd\u6846\u67b6\uff0c\u7528\u4e8e\u5f00\u53d1\u8de8\u5e73\u53f0\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/h1>\n<p>Ionic \u662f\u4e00\u4e2a\u4f7f\u7528 HTML\/CSS\/JavaScript \u6280\u672f\u6765\u6784\u5efa\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u7684 UI \u6846\u67b6\u3002\u5b83\u63d0\u4f9b\u4e86\u53ef\u4ee5\u5c06\u5e94\u7528\u7a0b\u5e8f\u7684 UI \u8bbe\u8ba1\u5f97\u975e\u5e38\u63a5\u8fd1 iOS\/Android \u754c\u9762\u7684 UI \u7ec4\u4ef6\uff0c\u5e76\u4e14\u53ef\u4ee5\u5feb\u901f\u642d\u5efa\u51fa\u6f02\u4eae\u7684\u7528\u6237\u754c\u9762\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<p>\u901a\u8fc7\u4f7f\u7528Cordova\u6216Capacitor\uff0c\u60a8\u53ef\u4ee5\u5c06\u4f7f\u7528Ionic\u521b\u5efa\u7684\u5e94\u7528\u6784\u5efa\u4e3a\u9002\u7528\u4e8eiOS\/Android\u7684\u5e94\u7528\uff0c\u5e76\u5728App Store\/Google Play\u4e0a\u53d1\u5e03\u3002<\/p>\n<p>\u7531\u4e8e\u5728\u521b\u4e1a\u516c\u53f8\u62c5\u4efb\u4e00\u540d\u72ec\u7acb\u7684\u5de5\u7a0b\u5e08\u5de5\u4f5c\u4e86\u5927\u7ea63\u5e74\uff0c\u6211\u975e\u5e38\u559c\u6b22Ionic\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u4e00\u6b21\u6027\u6784\u5efaiOS\u548cAndroid\u5e94\u7528\u3002<\/p>\n<p>\u6709\u4e86AWS Amplify\uff0c\u60a8\u53ef\u4ee5\u52a0\u5feb\u901f\u5ea6\uff0c\u4ece\u524d\u7aef\u5230\u540e\u7aef\u4e00\u4eba\u5b8c\u6210\u3002<\/p>\n<p>\u6211\u6253\u7b97\u6574\u7406\u4e00\u4e0b\u5982\u4f55\u5728\u4f7f\u7528Ionic\u5f00\u53d1\u7684\u5e94\u7528\u7a0b\u5e8f\u4e2d\u96c6\u6210AWS Amplify\u7684\u6b65\u9aa4\u3002<\/p>\n<h1>\u786e\u8ba4\u64cd\u4f5c\u73af\u5883<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">macOS Catalina 10.15<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">VS Code<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">node.js v12.7.0<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">@angular\/core 8.1.2<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">@ionic\/angular 4.7.1<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">aws-amplify 1.2.4<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">aws-amplify-angular 4.7.1<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">@amplify\/cli 3.17.0<\/ul>\n<h1>\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Ionic\u9879\u76ee<\/h1>\n<p>\u9996\u5148\u4f7f\u7528Ionic CLI\u751f\u6210\u9879\u76ee\u3002<br \/>\n\u901a\u8fc7\u4f7f\u7528npx\uff0c\u5373\u4f7f\u6ca1\u6709\u5168\u5c40\u5b89\u88c5Ionic CLI\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code># CLI\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u958b\u59cb\r\n$ npx ionic start\r\n\r\n# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3092\u6307\u5b9a\r\n? Project name: AmplifyIonicChat\r\n\r\n# JS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u9078\u629e\uff1a\u4eca\u56de\u306fAngular\u3092\u5229\u7528\r\n? Framework: Angular\r\n\r\n# \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u9078\u629e\r\n? Starter template: blank\r\n\r\n# \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\r\n$ cd AmplifyIonicChat\r\n<\/code><\/pre>\n<p>\u5728\u8fd9\u4e2a\u65f6\u95f4\u70b9\u4e0a\uff0c\u76ee\u5f55\u7ed3\u6784\u5982\u4e0b\u6240\u793a\u3002<br \/>\n\u57fa\u672c\u4e0a\u4e0eAngular CLI\u751f\u6210\u7684\u76ee\u5f55\u7ed3\u6784\u76f8\u540c\u3002<\/p>\n<pre class=\"post-pre\"><code>$ tree -I node_modules\r\n.\r\n\u251c\u2500\u2500 angular.json\r\n\u251c\u2500\u2500 browserslist\r\n\u251c\u2500\u2500 e2e\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 protractor.conf.js\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 src\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.e2e-spec.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 app.po.ts\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 tsconfig.json\r\n\u251c\u2500\u2500 ionic.config.json\r\n\u251c\u2500\u2500 karma.conf.js\r\n\u251c\u2500\u2500 package-lock.json\r\n\u251c\u2500\u2500 package.json\r\n\u251c\u2500\u2500 src\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 app\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app-routing.module.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.component.html\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.component.scss\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.component.spec.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.component.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 app.module.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 home\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u251c\u2500\u2500 home.module.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u251c\u2500\u2500 home.page.html\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u251c\u2500\u2500 home.page.scss\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u251c\u2500\u2500 home.page.spec.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u2514\u2500\u2500 home.page.ts\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 assets\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 icon\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 favicon.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 shapes.svg\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 environments\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 environment.prod.ts\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 environment.ts\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 global.scss\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 index.html\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 main.ts\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 polyfills.ts\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 test.ts\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 theme\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 variables.scss\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 zone-flags.ts\r\n\u251c\u2500\u2500 tsconfig.app.json\r\n\u251c\u2500\u2500 tsconfig.json\r\n\u251c\u2500\u2500 tsconfig.spec.json\r\n\u2514\u2500\u2500 tslint.json\r\n<\/code><\/pre>\n<p>\u5728\u5b89\u88c5AWS Amplify JavaScript Framework\u4e4b\u524d\uff0c\u6211\u4eec\u5148\u8bd5\u7740\u8fd0\u884c\u4e00\u4e0b\uff0c\u53ea\u8981\u80fd\u591f\u786e\u8ba4\u8fd9\u4e2a\u5c31\u884c\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code># \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\r\n$ npx ionic serve\r\n<\/code><\/pre>\n<p>\u5728iOS\u8bbe\u5907\u4e0a\uff0c\u5f53\u7528\u6237\u6253\u5f00\u9ed8\u8ba4\u6d4f\u89c8\u5668\u65f6\uff0c\u5c06\u663e\u793a\u5e94\u7528\u7a0b\u5e8f\u3002<br \/>\n\u4ec5\u4ec5\u901a\u8fc7\u8fd9\u4e00\u6b65\u9aa4\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5f97\u5230\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u7684\u6a21\u677f\uff0c\u8be5\u6a21\u677f\u5728iOS\u8bbe\u5907\u4e0a\u5c06\u5e94\u7528iOS\u7684\u98ce\u683c\uff0c\u5728Android\u8bbe\u5907\u4e0a\u5c06\u5e94\u7528Material Design\u7684\u98ce\u683c\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/23-0.png\" alt=\"amplify_01.png\" \/><\/div>\n<h1>\u5b89\u88c5AWS Amplify JavaScript\u6846\u67b6<\/h1>\n<p>\u7531\u4e8eIonic\u5e94\u7528\u7a0b\u5e8f\u5df2\u7ecf\u51c6\u5907\u5c31\u7eea\uff0c\u6211\u4eec\u5c06\u4ece\u8fd9\u91cc\u5f00\u59cb\u5f15\u5165\u4e3b\u9898AWS Amplify\u3002<br \/>\n\u5b98\u65b9\u6587\u6863\u63d0\u4f9b\u4e86Angular \/ Ionic\u7684\u5f15\u5165\u65b9\u6cd5\uff0c\u6211\u4eec\u5c06\u6309\u7167\u8be5\u6587\u6863\u7684\u6307\u5f15\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n<h2>\u5b89\u88c5AWS Amplify\u76f8\u5173\u7684\u5305<\/h2>\n<p>\u9996\u5148\u5b89\u88c5\u4e0eAWS Amplify\u76f8\u5173\u7684\u8f6f\u4ef6\u5305\u3002\u6709\u4e00\u4e2a\u540d\u4e3aaws-amplify-angular\u7684\u8f6f\u4ef6\u5305\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u5b83\u3002<\/p>\n<pre class=\"post-pre\"><code>$ npm install aws-amplify aws-amplify-angular \r\n<\/code><\/pre>\n<h2>\u5199\u4e0b\u5728Angular 6\u53ca\u4ee5\u4e0a\u7248\u672c\u4e2d\u9700\u8981\u7684\u914d\u7f6e<\/h2>\n<p>\u9700\u8981\u8bbe\u7f6ewindow.global\u548cwindow.process\u3002\u6839\u636e\u6307\u793a\uff0c\u5c06\u4ee5\u4e0b\u914d\u7f6e\u6dfb\u52a0\u5230src\/polyfills.ts\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">(<\/span><span class=\"nb\">window<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nb\">global<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">(<\/span><span class=\"nb\">window<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nx\">process<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">env<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">DEBUG<\/span><span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span> <span class=\"p\">},<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<p>src\/polyfills.ts \u6700\u7d42\u60c5\u51b5\u5982\u4e0b\u3002Ionic CLI\uff08Angular CLI\uff09\u4e3a\u4e86\u65b9\u4fbf\u8bf4\u660e\u800c\u5199\u4e86\u5927\u91cf\u6ce8\u91ca\uff0c\u4f46\u4e3a\u4e86\u66f4\u6e05\u6670\u6613\u8bfb\uff0c\u6211\u4eec\u5c06\u5176\u5168\u90e8\u5220\u9664\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/zone-flags.ts<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">zone.js\/dist\/zone<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">(<\/span><span class=\"nb\">window<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nb\">global<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">(<\/span><span class=\"nb\">window<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nx\">process<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">env<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">DEBUG<\/span><span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span> <span class=\"p\">},<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<p>\u4ee5\u4e0b\u306f\u4e2d\u56fd\u8a9e\u3067\u306e\u540c\u7fa9\u8868\u73fe\u3067\u3059\uff1a\u987a\u4fbf\u8bf4\u4e00\u53e5\uff0c\u5728\u5b98\u65b9\u6587\u4ef6\u4e2d\uff0c<\/p>\n<blockquote><p>\u8bf7\u6ce8\u610f\uff0cAWS Amplify Angular \u7ec4\u4ef6\u5c1a\u672a\u652f\u6301 Ivy\u3002<\/p><\/blockquote>\n<p>\u5728\u4e0a\u9762\u5199\u7740\u3002\u770b\u8d77\u6765\u4f3c\u4e4e\u8fd8\u6ca1\u6709Ivy\u7684\u652f\u6301&#8230;<\/p>\n<h2>\u8c03\u6574TypeScript\u7684\u7f16\u8bd1\u9009\u9879<\/h2>\n<p>\u5728src\/tsconfig.app.json\u6587\u4ef6\u4e2d\u7684compilerOptions\u90e8\u5206\u4e2d\u6dfb\u52a0node\u5230types\u3002\u987a\u4fbf\u63d0\u4e00\u4e0b\uff0c\u8fd8\u6709\u4e00\u4e2a\u540d\u4e3asrc\/tsconfig.json\u7684\u6587\u4ef6\uff0c\u56e0\u6b64\u9700\u8981\u6ce8\u610f\u4e0d\u8981\u6df7\u6dc6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"extends\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\".\/tsconfig.json\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">\"outDir\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\".\/out-tsc\/app\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nl\">\"types\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"s2\">\"node\"<\/span><span class=\"p\">]<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nl\">\"include\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\"src\/**\/*.ts\"<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"nl\">\"exclude\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\"src\/test.ts\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"s2\">\"src\/**\/*.spec.ts\"<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0cAWS Amplify JavaScript Framework\u7684\u5b89\u88c5\u5df2\u7ecf\u5b8c\u6210\uff0c\u53ef\u4ee5\u5e94\u7528\u4e8eIonic\u5e94\u7528\u3002<\/p>\n<h1>\u6267\u884cAWS Amplify\u7684\u521d\u59cb\u8bbe\u7f6e<\/h1>\n<p>\u4f7f\u7528AWS Amplify CLI\u8fdb\u884c\u521d\u59cb\u8bbe\u7f6e\u3002\u521d\u59cb\u8bbe\u7f6e\u662f\u9488\u5bf9\u6bcf\u4e2a\u9879\u76ee\u9700\u8981\u8fdb\u884c\u7684\u64cd\u4f5c\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\"># Amplify CLI\u306e\u521d\u671f\u8a2d\u5b9a\u3092\u958b\u59cb<\/span>\r\n<span class=\"nv\">$ <\/span>npx amplify init\r\n\r\n<span class=\"c\"># \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3092\u6307\u5b9a<\/span>\r\n? Enter a name <span class=\"k\">for <\/span>the project AmplifyIonicChat\r\n\r\n<span class=\"c\"># \u74b0\u5883\u540d\u3092\u6307\u5b9a<\/span>\r\n? Enter a name <span class=\"k\">for <\/span>the environment dev\r\n\r\n<span class=\"c\"># \u30a8\u30c7\u30a3\u30bf\u3092\u6307\u5b9a<\/span>\r\n? Choose your default editor: Visual Studio Code\r\n\r\n<span class=\"c\"># \u958b\u767a\u306b\u4f7f\u3046\u8a00\u8a9e\u3092\u6307\u5b9a<\/span>\r\n? Choose the <span class=\"nb\">type <\/span>of app that you re building javascript\r\n\r\n<span class=\"c\"># \u958b\u767a\u306b\u4f7f\u3046\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u6307\u5b9a<\/span>\r\n? What javascript framework are you using ionic\r\n\r\n<span class=\"c\"># \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u6307\u5b9a<\/span>\r\n? Source Directory Path:  src\r\n\r\n<span class=\"c\"># \u30d3\u30eb\u30c9\u5f8c\u306e\u6210\u679c\u7269\u306e\u683c\u7d0d\u5148\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u6307\u5b9a<\/span>\r\n? Distribution Directory Path: www\r\n\r\n<span class=\"c\"># \u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u3092\u6307\u5b9a<\/span>\r\n? Build Command:  npm run-script build\r\n\r\n<span class=\"c\"># \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u8d77\u52d5\u30b3\u30de\u30f3\u30c9\u3092\u6307\u5b9a<\/span>\r\n? Start Command: ionic serve\r\n\r\n<span class=\"c\"># Amplify CLI\u304c\u4f7f\u3046AWS\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u3046<\/span>\r\n? Do you want to use an AWS profile? Yes\r\n\r\n<span class=\"c\"># \u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u3092\u6307\u5b9a\uff1a\u4eca\u56de\u306f\u500b\u4eba\u7528\u306eAWS\u306b\u7e4b\u304c\u308b\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u7528\u610f\u3057\u3066\u3042\u308b\u300cprivate\u300d\u3092\u6307\u5b9a<\/span>\r\n? Please choose the profile you want to use private\r\n<\/code><\/pre>\n<p>\u5f53\u6307\u5b9a\u4e86\u8fd9\u4e9b\u5185\u5bb9\u540e\uff0cCloudFormation\u5c06\u542f\u52a8\u5e76\u751f\u6210\u540e\u7aef\u6240\u9700\u7684\u8d44\u6e90\u3002<\/p>\n<p>\u5728\u8fd9\u91cc\u5c06\u521b\u5efa\u4ee5\u4e0b\u8d44\u6e90\u3002\u867d\u7136\u611f\u89c9\u5c31\u50cf\u662f\u5728\u95ee\u201c\u73b0\u5728\u6709\u4ec0\u4e48\u8d44\u6e90\u53ef\u7528\u5462\uff1f\u201d\uff0c\u4f46\u6211\u60f3\u77e5\u9053\u662f\u5426\u6709\u7279\u5b9a\u7684\u76ee\u7684\u2026\u2026<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">S3\u30d0\u30b1\u30c3\u30c8<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Cognito\u30d5\u30a7\u30c7\u30ec\u30fc\u30c6\u30c3\u30c9\u30a2\u30a4\u30c7\u30f3\u30c6\u30a3\u30c6\u30a3\u3067\u306e\u8a8d\u8a3c\u6e08\u307f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u5f15\u304d\u53d7\u3051\u308b\u30ed\u30fc\u30eb\uff08AuthRole\uff09<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Cognito\u30d5\u30a7\u30c7\u30ec\u30fc\u30c6\u30c3\u30c9\u30a2\u30a4\u30c7\u30f3\u30c6\u30a3\u30c6\u30a3\u3067\u306e\u672a\u8a8d\u8a3c\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u5f15\u304d\u53d7\u3051\u308b\u30ed\u30fc\u30eb\uff08UnauthRole\uff09<\/ul>\n<h1>\u4f7f\u7528AWS Amplify\u7684Authentication\u7c7b\u522b\u6765\u5b9e\u73b0\u7528\u6237\u8ba4\u8bc1\u3002<\/h1>\n<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u4f7f\u7528AWS Amplify CLI\u5728AWS\u4e91\u4e0a\u6784\u5efa\u540e\u7aef\u3002<\/p>\n<h2>\u5728Amplify CLI\u4e2d\u521b\u5efaAuthentication\u7c7b\u522b\u7684\u8bbe\u7f6e\u3002<\/h2>\n<p>\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u8bbe\u7f6eAWS Amplify\u7684Authentication\u7c7b\u522b\uff0c\u4ee5\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\u7684\u6ce8\u518c\u548c\u767b\u5f55\u529f\u80fd\u3002<\/p>\n<p>\u6211\u4eec\u5c06\u6309\u7167\u5b98\u65b9\u6587\u4ef6\u4e2d\u7684\u4ee5\u4e0b\u90e8\u5206\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\"># Amplify CLI\u3092\u4f7f\u3063\u3066Authentication\u30ab\u30c6\u30b4\u30ea\u3092\u8ffd\u52a0<\/span>\r\n<span class=\"nv\">$ <\/span>npx amplify add auth\r\n\r\n<span class=\"c\"># \u8a8d\u8a3c\u306e\u8a2d\u5b9a\u3092\u3069\u306e\u3088\u3046\u306b\u884c\u3046\u304b\u6307\u5b9a\uff1a\u4eca\u56de\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3092\u5229\u7528<\/span>\r\nDo you want to use the default authentication and security configuration? Default configuration\r\n\r\n<span class=\"c\"># \u30b5\u30a4\u30f3\u30a4\u30f3\u306b\u4f7f\u3048\u308b\u5c5e\u6027\u3092\u6307\u5b9a<\/span>\r\nHow <span class=\"k\">do <\/span>you want <span class=\"nb\">users <\/span>to be able to sign <span class=\"k\">in<\/span>? Username\r\n\r\n<span class=\"c\"># \u8ffd\u52a0\u306e\u8a2d\u5b9a\u3092\u3059\u308b\u304b\u3069\u3046\u304b\u3092\u6307\u5b9a<\/span>\r\nDo you want to configure advanced settings? No, I am <span class=\"k\">done<\/span><span class=\"nb\">.<\/span>\r\n<\/code><\/pre>\n<p>\u76ee\u524d\u4e3a\u6b62\uff0c\u8bbe\u7f6e\u5df2\u5b8c\u6210\u3002\u6b64\u65f6\uff0c\u8bbe\u7f6e\u5c1a\u672a\u5e94\u7528\u5230\u540e\u7aef\u3002<\/p>\n<h2>\u5c06\u8bbe\u7f6e\u5e94\u7528\u4e8e\u540e\u7aef<\/h2>\n<p>\u7136\u540e\uff0c\u5c06\u8bbe\u7f6e\u5b9e\u9645\u5e94\u7528\u5230\u540e\u7aef\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\"># \u5909\u66f4\u3092\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306b\u9069\u7528<\/span>\r\n<span class=\"nv\">$ <\/span>npx amplify push\r\n\r\n<span class=\"c\"># \u5909\u66f4\u5185\u5bb9\u304c\u51fa\u308b\u306e\u3067\u3001\u78ba\u8a8d\u3057\u3066\u5148\u3078\u9032\u3080<\/span>\r\nCurrent Environment: dev\r\n\r\n| Category | Resource name            | Operation | Provider plugin   |\r\n| <span class=\"nt\">--------<\/span> | <span class=\"nt\">------------------------<\/span> | <span class=\"nt\">---------<\/span> | <span class=\"nt\">-----------------<\/span> |\r\n| Auth     | amplifyionicchatd1aa1b6e | Create    | awscloudformation |\r\n\r\n? Are you sure you want to <span class=\"k\">continue<\/span>? <span class=\"o\">(<\/span>Y\/n<span class=\"o\">)<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u60a8\u5728\u7ba1\u7406\u63a7\u5236\u53f0\u4e0a\u8fdb\u884c\u786e\u8ba4\u65f6\uff0c\u60a8\u4f1a\u53d1\u73b0 Amazon Cognito \u5df2\u521b\u5efa\u4e86\u7528\u6237\u6c60\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/60-0.png\" alt=\"amplify_02.png\" \/><\/div>\n<h1>\u5c06\u8fde\u63a5\u4fe1\u606f\u5e94\u7528\u5230Ionic\u5e94\u7528\u7684\u540e\u7aef<\/h1>\n<p>\u5728\u6267\u884c\u4e4b\u524d\u7684 &#8220;npx amplify push&#8221; \u547d\u4ee4\u65f6\uff0c\u540e\u7aef\u7684\u8fde\u63a5\u4fe1\u606f\uff08\u5305\u62ecCognito\u7684\u7528\u6237\u6c60ID\u548c\u8eab\u4efd\u6c60ID\u7b49\uff09\u88ab\u8f93\u51fa\u5230\u540d\u4e3a &#8220;src\/aws-export.js&#8221; \u7684\u6587\u4ef6\u4e2d\u3002<\/p>\n<p>aws-export.js \u662f\u4e00\u4e2a\u7b80\u5355\u7684JS\u6587\u4ef6\uff0c\u5185\u5bb9\u5982\u4e0b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">awsmobile<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">aws_project_region<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ap-northeast-1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">aws_cognito_identity_pool_id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\uff1c\u30a2\u30a4\u30c7\u30f3\u30c6\u30a3\u30c6\u30a3\u30d7\u30fc\u30ebID\uff1e<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">aws_cognito_region<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ap-northeast-1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">aws_user_pools_id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\uff1c\u30e6\u30fc\u30b6\u30fc\u30d7\u30fc\u30ebID\uff1e<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">aws_user_pools_web_client_id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\uff1c\u30e6\u30fc\u30b6\u30fc\u30d7\u30fc\u30eb\u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID\uff1e<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">oauth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">awsmobile<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u8bf7\u52ff\u624b\u52a8\u4fee\u6539\u6b64\u6587\u4ef6\uff0c\u6839\u636e\u7b2c\u4e00\u884c\u7684\u6ce8\u91ca\u6240\u8ff0\uff0c\u5b83\u5c06\u5728\u4ee5\u540e\u6267\u884c\u7684 $ npx amplify push \u547d\u4ee4\u4e2d\u88ab\u8986\u76d6\u3002<\/p>\n<h1>\u521d\u59cb\u5316Amplify Framework<\/h1>\n<p>\u4e3a\u4e86\u5c06 Amplify Framework \u4e2d aws-exports.js \u4e2d\u7684\u914d\u7f6e\u4fe1\u606f\u52a0\u8f7d\u5230 src\/main.ts \u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5728\u5176\u5185\u5199\u5165\u4ee5\u4e0b\u7684 Amplify \u521d\u59cb\u5316\u5904\u7406\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">enableProdMode<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">platformBrowserDynamic<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser-dynamic<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app\/app.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">environment<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/environments\/environment<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u4ee5\u4e0b3\u884c\u3092\u8ffd\u52a0<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Amplify<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">awsconfig<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/aws-exports<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"nx\">Amplify<\/span><span class=\"p\">.<\/span><span class=\"nx\">configure<\/span><span class=\"p\">(<\/span><span class=\"nx\">awsconfig<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">enableProdMode<\/span><span class=\"p\">();<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nx\">platformBrowserDynamic<\/span><span class=\"p\">().<\/span><span class=\"nx\">bootstrapModule<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppModule<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>\r\n<\/code><\/pre>\n<p>\u987a\u4fbf\u63d0\u4e00\u53e5\uff0c\u5728\u5b98\u65b9\u6587\u6863\u4e2d\uff0cAmplify \u7684\u5bfc\u5165\u6e90\u88ab\u79f0\u4e3a @aws-amplify\/core\uff0c\u4f46\u662f\u76f4\u63a5\u5199\u8fd9\u4e2a\u5e76\u4e0d\u8d77\u4f5c\u7528\uff0c\u4f1a\u51fa\u73b0\u4ee5\u4e0b\u9519\u8bef\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/70-0.png\" alt=\"amplify_04.png\" \/><\/div>\n<p>\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0cAmplify \u73b0\u5728\u4ece aws-amplify \u8fdb\u884c\u52a0\u8f7d\u3002<\/p>\n<p>\u524d\u540e\u7aef\u7684\u8fde\u63a5\u5df2\u7ecf\u5b8c\u6210\u4e86\u3002<\/p>\n<h1>\u4e8b\u5148\u6574\u7406 Angular \u6a21\u5757<\/h1>\n<p>\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4f1a\u5148\u4e3a\u5c06\u6765\u505a\u597dAngular\u9879\u76ee\u7684\u51c6\u5907\u5de5\u4f5c\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u672a\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u306e\u3068\u304d\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u30da\u30fc\u30b8\u7fa4\u3092\u7ba1\u7406\u3059\u308b PublicModule \u3092\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u306e\u3068\u304d\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u30da\u30fc\u30b8\u7fa4\u3092\u7ba1\u7406\u3059\u308b ClosedModule \u3092\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u304b\u3089\u5229\u7528\u3059\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u307e\u3068\u3081\u305f SharedModule \u3092\u4f5c\u6210<\/ul>\n<h2>Angular\u7684\u201c\u6a21\u5757\u201d<\/h2>\n<p>\u5728Angular\u4e2d\uff0c\u60a8\u53ef\u4ee5\u5c06\u5e94\u7528\u7a0b\u5e8f\u5206\u5272\u6210&#8221;\u6a21\u5757&#8221;\u7684\u5355\u5143\u3002\u901a\u8fc7\u5c06\u9875\u9762\u7ec4\u4ef6\u521b\u5efa\u4e3a\u4e00\u4e2a\u6a21\u5757\uff0c\u53ef\u4ee5\u5728\u9700\u8981\u8be5\u9875\u9762\u65f6\u8fdb\u884c\u6a21\u5757\u7ea7\u522b\u7684\u5ef6\u8fdf\u52a0\u8f7d\uff08Lazy Loading\uff09\u3002<\/p>\n<p>\u5728\u6a21\u5757\u7684\u5b9a\u4e49\u4e2d\uff0c\u4f7f\u7528 @NgModule \u88c5\u9970\u5668\u3002<\/p>\n<p>\u5982\u679c\u60f3\u8981\u5728\u4e00\u4e2a\u540d\u4e3a\u6a21\u5757A\u7684\u6a21\u5757\u4e2d\u4f7f\u7528\u6a21\u5757B\uff0c\u9700\u8981\u5728\u6a21\u5757B\u7684\u5b9a\u4e49\u5904\u7684@NgModule\u58f0\u660e\u7684imports\u90e8\u5206\u6307\u5b9a\u6a21\u5757A\u3002<\/p>\n<p>\u5728Angular\u4e2d\uff0c\u5b58\u5728\u4e00\u4e2a\u9876\u7ea7\u6a21\u5757\u79f0\u4e3a AppModule\u3002<br \/>\n\u800c\u901a\u8fc7 $ ionic start \u547d\u4ee4\u9009\u62e9 Blank \u6a21\u677f\u521b\u5efa\u7684\u7a7a\u767d\u6a21\u677f\u4e2d\uff0c\u4e5f\u4f1a\u751f\u6210\u7528\u4e8e\u9996\u9875\u7684 HomeModule\u3002<\/p>\n<h2>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aPublicModule\u7684\u6a21\u5757\uff0c\u7528\u4e8e\u7ba1\u7406\u53ef\u4ee5\u5728\u672a\u767b\u5f55\u72b6\u6001\u4e0b\u8bbf\u95ee\u7684\u9875\u9762\u7ec4\u3002<\/h2>\n<p>\u4f7f\u7528Ionic CLI\u521b\u5efa\u6a21\u5757\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npx ionic g module pages\/public\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u8fd9\u4e2a\u547d\u4ee4\uff0c\u5c06\u521b\u5efa src\/app\/pages\/public\/public.module.ts\u3002\u5176\u5185\u5bb9\u5982\u4e0b\u6240\u793a\u3002\u7531\u4e8e\u6211\u4eec\u5c06\u5728\u7a0d\u540e\u6dfb\u52a0\u8def\u7531\uff0c\u6240\u4ee5\u5f53\u524d\u5c1a\u672a\u521b\u5efa\u4efb\u4f55\u5185\u5bb9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u3053\u3053\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u5b9a\u7fa9\u3092\u66f8\u3044\u3066\u3044\u304f<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">routes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">routes<\/span><span class=\"p\">)]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PublicModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aClosedModule\u7684\u6a21\u5757\u6765\u7ba1\u7406\u53ea\u80fd\u5728\u767b\u5f55\u72b6\u6001\u4e0b\u8bbf\u95ee\u7684\u9875\u9762\u96c6\u5408\u3002<\/h2>\n<p>\u521b\u5efa\u7c7b\u4f3c PublicModule \u7684\u6a21\u5757\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npx ionic g module pages\/closed\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u3053\u3053\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u5b9a\u7fa9\u3092\u66f8\u3044\u3066\u3044\u304f<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">routes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">routes<\/span><span class=\"p\">)]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ClosedModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u5c06PublicModule\u548cClosedModule\u6dfb\u52a0\u5230AppRoutingModule\u3002<\/h2>\n<p>\u6700\u5f8c\uff0c\u901a\u8fc7\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u8def\u7531\u5b9a\u4e49\u4e2d\u6ce8\u518cAppRoutingModule\uff0c\u53ef\u4ee5\u4f7fPublicModule\u548cClosedModule\u751f\u6548\u3002\u8fd9\u6837\uff0cPublicModule\u548cClosedModule\u4e2d\u7f16\u5199\u7684\u8def\u7531\u5c06\u751f\u6548\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PreloadAllModules<\/span><span class=\"p\">,<\/span> <span class=\"nx\">RouterModule<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Routes<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">routes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"c1\">\/\/ \u76f4\u4e0b\u3078\u306e\u30a2\u30af\u30bb\u30b9\u306f \/auth \u3078\u30ea\u30c0\u30a4\u30ec\u30af\u30c8<\/span>\r\n  <span class=\"p\">{<\/span> <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"na\">redirectTo<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">auth<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">pathMatch<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">full<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\r\n  <span class=\"c1\">\/\/ \u672a\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u753b\u9762\u7fa4\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/pages\/public\/public.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">m<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">PublicModule<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u753b\u9762\u7fa4\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/pages\/closed\/closed.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">m<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">ClosedModule<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">routes<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">preloadingStrategy<\/span><span class=\"p\">:<\/span> <span class=\"nx\">PreloadAllModules<\/span> <span class=\"p\">})<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">exports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">RouterModule<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppRoutingModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728Angular\u4e2d\uff0c\u6709\u4e00\u79cd\u79f0\u4e3a\u201c\u5b88\u536b\u201d\u7684\u673a\u5236\uff0c\u5b83\u53ef\u4ee5\u63a7\u5236\u662f\u5426\u5141\u8bb8\u901a\u8fc7URL\u8fdb\u884c\u9875\u9762\u8f6c\u6362\u3002\u901a\u8fc7\u5c06\u8fd9\u4e2a\u5b88\u536b\u653e\u5728PublicModule\u548cClosedModule\u4e0a\uff0c\u6211\u4eec\u53ef\u4ee5\u5f88\u597d\u5730\u63a7\u5236\u5728\u767b\u5f55\u72b6\u6001\u4e0b\u8bbf\u95ee\u6ce8\u518c\u8868\u5355\u65f6\u8fdb\u884c\u91cd\u5b9a\u5411\uff0c\u800c\u5728\u672a\u767b\u5f55\u72b6\u6001\u4e0b\u8bbf\u95ee\u6ce8\u518c\u8868\u5355\u65f6\u4e5f\u4f1a\u8fdb\u884c\u91cd\u5b9a\u5411\uff0c\u8fd9\u6837\u53ef\u4ee5\u5f88\u7b80\u6d01\u5730\u8fdb\u884c\u63a7\u5236\u3002<\/p>\n<h2>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aSharedModule\u7684\u6a21\u5757\uff0c\u7528\u4e8e\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u5171\u4eab\u4f7f\u7528\u3002<\/h2>\n<p>\u7531\u4e8e\u524d\u9762\u6240\u8ff0\uff0c\u6bcf\u4e2a\u9875\u9762\u90fd\u662f\u72ec\u7acb\u7684\u6a21\u5757\uff0c\u56e0\u6b64\u5c06\u5171\u4eab\u7684\u5904\u7406\u529f\u80fd\u653e\u5728\u5b83\u4eec\u7684\u6a21\u5757\u4e2d\u4f1a\u66f4\u52a0\u65b9\u4fbf\u3002<br \/>\n\u6211\u4eec\u5c06\u6240\u6709\u9875\u9762\u90fd\u4f1a\u4f7f\u7528\u7684IonicModule\u548cFormsModule\u7b49\u90fd\u653e\u5728SharedModule\u4e2d\uff0c\u7136\u540e\u5728\u6bcf\u4e2a\u9875\u9762\u7684\u6a21\u5757\u4e2d\u53ea\u9700\u5bfc\u5165\u8fd9\u4e2aSharedModule\u5373\u53ef\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npx ionic g module shared\r\n<\/code><\/pre>\n<p>\u751f\u6210\u5728 &#8220;src\/app\/shared\/shared.module.ts&#8221; \u8def\u5f84\u4e0b\u7684\u6587\u4ef6\u5b9e\u4f8b\u5df2\u7ecf\u521b\u5efa\u5b8c\u6210\u3002<\/p>\n<p>\u5185\u5bb9\u5982\u4e0b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">IonicModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@ionic\/angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FormsModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CommonModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/common<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AmplifyIonicModule<\/span><span class=\"p\">,<\/span> <span class=\"nx\">AmplifyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify-angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">modules<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"nx\">FormsModule<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nx\">IonicModule<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nx\">CommonModule<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"nx\">AmplifyIonicModule<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">modules<\/span><span class=\"p\">],<\/span>\r\n  <span class=\"na\">exports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">modules<\/span><span class=\"p\">],<\/span>\r\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AmplifyService<\/span><span class=\"p\">],<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">SharedModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u4e3a\u4e86\u4f7fimport\u80fd\u591f\u4f7f\u7528\u7edd\u5bf9\u8def\u5f84\u8fdb\u884c\u7f16\u5199\u3002<\/h2>\n<p>\u6574\u7406\u6e90\u4ee3\u7801\u5230\u76ee\u5f55\u4e2d\u65f6\uff0c\u5bfc\u5165\u8bed\u53e5\u53ef\u80fd\u4f1a\u53d8\u6210\u4ee5\u4e0b\u8fd9\u6837\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/..\/..\/..\/services\/myservice\/myservice.service<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u56e0\u4e3a\u8fd9\u6837\u4f1a\u5f88\u8f9b\u82e6\uff0c\u6240\u4ee5\u6211\u4f1a\u786e\u4fdd\u53ef\u4ee5\u901a\u8fc7\u9879\u76ee\u6839\u76ee\u5f55\u7684\u7edd\u5bf9\u8def\u5f84\u8fdb\u884c\u6307\u5b9a\u3002<\/p>\n<p>\u5728 tsconfig.json \u7684 compilerOptions \u4e2d\u6307\u5b9a paths\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"err\">\uff08...\u7565\uff09<\/span>\r\n    <span class=\"nl\">\"paths\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nl\">\"@\/*\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"s2\">\"src\/*\"<\/span><span class=\"p\">]<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"err\">\uff08...\u7565\uff09<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u53ea\u9700\u5199\u5165\u6b64\u8bbe\u7f6e\uff0c\u524d\u9762\u7684 import \u8bed\u53e5\u53ef\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u4e66\u5199\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/services\/myservice\/myservice.service`;\r\n<\/span><\/code><\/pre>\n<h2>\u8c03\u6574\u4e4b\u524d\u5df2\u901a\u8fc7\u811a\u624b\u67b6\u751f\u6210\u7684AppModule\u3002<\/h2>\n<p>\u7531\u4e8e\u7a0d\u540e\u8981\u5728 AppComponent \u4e2d\u4f7f\u7528 AmplifyService \u63d0\u4f9b\u7684 AWS Amplify\uff0c\u56e0\u6b64\u5728 AppModule \u4e2d\u4e5f\u5e94\u5bfc\u5165 SharedModule\u3002<\/p>\n<p>\u540c\u65f6\uff0c\u5220\u9664\u4e86\u5728\u6a21\u677f\u751f\u6210\u671f\u95f4\u88ab\u521b\u5efa\u7684\u65e0\u7528\u6a21\u5757\u7684\u5bfc\u5165\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RouteReuseStrategy<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">IonicModule<\/span><span class=\"p\">,<\/span> <span class=\"nx\">IonicRouteStrategy<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@ionic\/angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRoutingModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app-routing.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SharedModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/shared\/shared.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">],<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">SharedModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">IonicModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forRoot<\/span><span class=\"p\">(),<\/span>\r\n    <span class=\"nx\">AppRoutingModule<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">{<\/span> <span class=\"na\">provide<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RouteReuseStrategy<\/span><span class=\"p\">,<\/span> <span class=\"na\">useClass<\/span><span class=\"p\">:<\/span> <span class=\"nx\">IonicRouteStrategy<\/span> <span class=\"p\">}<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">bootstrap<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">{}<\/span>\r\n<\/code><\/pre>\n<h2>\u8c03\u6574\u539f\u5148\u751f\u6210\u7684\u9996\u9875\u3002<\/h2>\n<p>\u6700\u540e\uff0c\u5c06\u81ea\u52a8\u751f\u6210\u7684\u9996\u9875\uff08HomePage\uff09\u653e\u5165\u6574\u7406\u540e\u7684\u6a21\u5757\u7ed3\u6784\u4e2d\u3002<br \/>\n\u5728\u751f\u6210\u65f6\uff0c\u5c06\u539f\u672c\u4f4d\u4e8e src\/app\/home\/ \u7684 HomePage \u5168\u90e8\u5185\u5bb9\u79fb\u81f3 src\/app\/pages\/closed\/\u3002<\/p>\n<p>\u7136\u540e\uff0c\u5c06 src\/app\/pages\/closed\/home\/home.module.ts \u8c03\u6574\u5982\u4e0b\uff1a<br \/>\n\uff08\u5c06 FormsModule \/ IonicModule \/ CommonModule \u7684\u5bfc\u5165\u66ff\u6362\u4e3a SharedModule \u7684\u5bfc\u5165\uff09<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">HomePage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/home.page<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SharedModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/app\/shared\/shared.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">SharedModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">([{<\/span> <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"na\">component<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HomePage<\/span> <span class=\"p\">}])<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">HomePage<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">HomePageModule<\/span> <span class=\"p\">{}<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u540e\uff0c\u6211\u4eec\u5728ClosedModule\u4e2d\u5b9a\u4e49HomePage\u7684\u8def\u7531\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">routes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">home<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/home\/home.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">m<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">HomePageModule<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">routes<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">ClosedModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u5011\u7d50\u69cb\u8abf\u6574\u7684\u5de5\u4f5c\u8b8a\u5f97\u5f88\u591a\u3002\u5118\u7ba1\u9019\u7bc7\u6587\u7ae0\u7684\u4e3b\u89d2\u662fAWS Amplify\uff0c\u4f46\u6211\u9084\u662f\u60f3\u5beb\u5230\u4e00\u5b9a\u7a0b\u5ea6\u7684\u61c9\u7528\u7a0b\u5f0f\u64f4\u5c55\u6027\u914d\u7f6e\uff0c\u65e2\u7136\u6709\u9019\u500b\u6a5f\u6703\u3002<\/p>\n<h1>\u751f\u6210\u5904\u7406\u8ba4\u8bc1\u7684\u9875\u9762<\/h1>\n<p>\u7531\u4e8e\u6211\u521a\u521a\u6210\u529f\u5730\u5728\u540e\u7aef\u5efa\u7acb\u4e86AWS\u7684\u8eab\u4efd\u9a8c\u8bc1\u57fa\u7840\u8bbe\u65bdAmazon Cognito\uff0c\u73b0\u5728\u6211\u5c06\u4f7f\u521a\u521a\u521b\u5efa\u7684Ionic\u5e94\u7528\u7a0b\u5e8f\u80fd\u591f\u8fdb\u884c\u6ce8\u518c\u548c\u767b\u5f55\u3002<\/p>\n<p>AWS Amplify\u63d0\u4f9b\u4e86\u80fd\u591f\u5728\u5404\u4e2a\u6846\u67b6\u4e2d\u4e00\u952e\u5b9e\u73b0\u767b\u5f55\u529f\u80fd\u7684\u7ec4\u4ef6\uff0c\u8fd9\u6b63\u662f\u5b83\u7684\u5f3a\u5927\u4e4b\u5904\uff08\uff01\uff09<\/p>\n<p>\u5177\u4f53\u800c\u8a00\uff0c\u63d0\u4f9b\u4e86\u4e00\u4e2a\u540d\u4e3a\u7684\u7ec4\u4ef6\uff0c\u5c06\u5176\u653e\u7f6e\u5728\u5e94\u7528\u7a0b\u5e8f\u5185\uff0c\u5373\u53ef\u51fa\u73b0\u767b\u5f55\u8868\u5355\u3002<\/p>\n<p>\u5f53\u5c06\u8ba4\u8bc1\u96c6\u6210\u5230Web\u5e94\u7528\u7a0b\u5e8f\u4e2d\u65f6\uff0c<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u753b\u9762\u306f \/sign-up<\/ul>\n<\/li>\n<\/ul>\n<p>\u30b5\u30a4\u30f3\u30a4\u30f3\u753b\u9762\u306f \/sign-in<\/p>\n<p>\u30d1\u30b9\u30ef\u30fc\u30c9\u30ea\u30de\u30a4\u30f3\u30c0\u30fc\u306f \/password<\/p>\n<p>\u6211\u8ba4\u4e3a\u901a\u5e38\u4f1a\u5c06\u5404\u4e2aURL\u5206\u5f00\uff0c\u5c31\u50cf\u8fd9\u6837\u3002<\/p>\n<p>\u7136\u800c\uff0c\u7531\u4e8e\u672c\u6b21\u4f7f\u7528 \u7ec4\u4ef6\u8fdb\u884c\u8eab\u4efd\u9a8c\u8bc1\uff0c\u53ea\u9700\u8981\u4e00\u4e2a\u5904\u7406\u8eab\u4efd\u9a8c\u8bc1\u7684\u9875\u9762\u5c31\u8db3\u591f\u4e86\u3002<\/p>\n<h2>\u5275\u5efa\u4e00\u500b\u9801\u9762\u4f86\u8a2d\u7f6e\u8a8d\u8b49\u529f\u80fd\u3002<\/h2>\n<p>\u4f7f\u7528Ionic CLI\u6765\u51c6\u5907\u8ba4\u8bc1\u9875\u9762\u3002\u5982\u679c\u4f7f\u7528CLI\u6765\u751f\u6210\u9875\u9762\uff0c\u5219\u4f1a\u81ea\u52a8\u521b\u5efa\u6a21\u5757\u5e76\u542f\u7528\u5ef6\u8fdf\u52a0\u8f7d\u3002<\/p>\n<p>\u4e3a\u4e86\u5c06\u8ba4\u8bc1\u5904\u7406\u7684\u9875\u9762\u8bbe\u4e3a\u4ec5\u5728\u672a\u767b\u5f55\u72b6\u6001\u4e0b\u53ef\u89c1\uff0c\u6211\u4eec\u5c06\u5728\u5148\u524d\u521b\u5efa\u7684 PublicModule \u4e0b\u521b\u5efa\u9875\u9762\u6a21\u5757\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npx ionic g page pages\/public\/auth\r\n<\/code><\/pre>\n<p>\u8fd9\u6837\u4e0b\u9762\u7684\u6587\u4ef6\u5c31\u5b8c\u6210\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code>src\/app\/pages\/public\/auth\/auth.page.ts\r\nsrc\/app\/pages\/public\/auth\/auth.page.spec.ts\r\nsrc\/app\/pages\/public\/auth\/auth.page.html\r\nsrc\/app\/pages\/public\/auth\/auth.page.scss\r\nsrc\/app\/pages\/public\/auth\/auth.module.ts\r\nsrc\/app\/pages\/public\/auth\/auth-routing.module.ts\r\n<\/code><\/pre>\n<p>\u51fa\u4e8e\u8fd9\u4e2a\u539f\u56e0\uff0c\u6211\u4eec\u51b3\u5b9a\u5c06\u8def\u7531\u5668\u7684\u8bbe\u7f6e\u5199\u5728 auth.module.ts \u4e2d\uff0c\u56e0\u6b64\u6211\u4eec\u5c06\u5220\u9664 auth-routing.module.ts\u3002\u5173\u4e8e\u8eab\u4efd\u9a8c\u8bc1\u9875\u9762\u7684\u6a21\u5757 auth.module.ts\uff0c\u53ef\u4ee5\u6309\u4ee5\u4e0b\u65b9\u5f0f\u7f16\u5199\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SharedModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/app\/shared\/shared.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AuthPage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/auth.page<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">SharedModule<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">([{<\/span> <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span> <span class=\"na\">component<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AuthPage<\/span> <span class=\"p\">}]),<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AuthPage<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AuthPageModule<\/span> <span class=\"p\">{}<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u540e\uff0c\u5728 PublicModule \u4e2d\u6dfb\u52a0\u8def\u7531\u5b9a\u4e49\u4ee5\u4fbf\u5728 \/auth \u4e0a\u8bbf\u95ee\u6b64\u9875\u9762\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Routes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">RouterModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">routes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Routes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">auth<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">loadChildren<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/auth\/auth.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">m<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">AuthPageModule<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"nx\">RouterModule<\/span><span class=\"p\">.<\/span><span class=\"nx\">forChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">routes<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PublicModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95ee http:\/\/localhost:8100\/auth \uff0c\u4f60\u5c06\u770b\u5230\u4ee5\u4e0b\u5185\u5bb9\u7684\u9875\u9762\u3002\u73b0\u5728\/auth\u9875\u9762\u5df2\u7ecf\u51c6\u5907\u5c31\u7eea\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/138-0.png\" alt=\"amplify_03.png\" \/><\/div>\n<h2>\u5c06AWS Amplify\u63d0\u4f9b\u7684\u8ba4\u8bc1\u7ec4\u4ef6\u90e8\u7f72<\/h2>\n<p>\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u5c06 AWS Amplify \u63d0\u4f9b\u7684 \u7ec4\u4ef6\u653e\u7f6e\u5728\u6211\u4eec\u521b\u5efa\u7684 AuthPage \u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;ion-header&gt;<\/span>\r\n  <span class=\"nt\">&lt;ion-toolbar&gt;<\/span>\r\n    <span class=\"nt\">&lt;ion-title&gt;<\/span>auth<span class=\"nt\">&lt;\/ion-title&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/ion-toolbar&gt;<\/span>\r\n<span class=\"nt\">&lt;\/ion-header&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;ion-content&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"ion-padding\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;amplify-authenticator-ionic&gt;&lt;\/amplify-authenticator-ionic&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;\/ion-content&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u5982\u679c\u4f7f\u7528\u7eafAngular\u800c\u4e0d\u662fIonic\uff0c\u53ef\u4ee5\u4f7f\u7528\u7ec4\u4ef6\u3002\u800c\u5982\u679c\u4f7f\u7528Ionic\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e13\u95e8\u7684\u7ec4\u4ef6\u3002<\/p>\n<p>\u8fd9\u4e00\u4e2a\u64cd\u4f5c\u5c31\u53ef\u4ee5\u5b8c\u6210\u8ba4\u8bc1\u754c\u9762\u7684\u5b9e\u73b0\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/144-0.png\" alt=\"amplify_05.png\" \/><\/div>\n<h2>\u6211\u8bd5\u7740\u6ce8\u518c\u4e00\u4e0b\u3002<\/h2>\n<p>\u70b9\u51fb\u4f4d\u4e8e\u663e\u793a\u7684\u767b\u5f55\u9875\u9762\u5e95\u90e8\u7684\u201c\u521b\u5efa\u8d26\u6237\u201d\u9009\u9879\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/147-0.png\" alt=\"amplify_06.png\" \/><\/div>\n<p>\u7136\u540e\uff0c\u9875\u9762\u4f1a\u8df3\u8f6c\u5230\u6ce8\u518c\u9875\u9762\u3002<br \/>\n\u8df3\u8f6c\u7684\u610f\u601d\u662f\uff0c \u7ec4\u4ef6\u53ea\u662f\u5c06UI\u4ece\u767b\u5f55\u8868\u5355\u5207\u6362\u5230\u6ce8\u518c\u8868\u5355\uff0c\u4f46\u8def\u7531\u5e76\u6ca1\u6709\u6539\u53d8\u3002<\/p>\n<p>\u5728\u6ce8\u518c\u8868\u683c\u4e2d\u586b\u5199\u4fe1\u606f\u3002<br \/>\n\u9ed8\u8ba4\u8bbe\u7f6e\u8981\u6c42\u586b\u5199\u4ee5\u4e0b\u9879\u76ee\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30e6\u30fc\u30b6\u30fc\u540d<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30d1\u30b9\u30ef\u30fc\u30c9\uff08\u82f1\u6570\u5b57 + \u8a18\u53f7 \/ 8\u6587\u5b57\u4ee5\u4e0a\uff09<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u96fb\u8a71\u756a\u53f7\uff08 090 \u306e\u5148\u982d\u306e\u30bc\u30ed\u306f\u53d6\u308b\uff09<\/ul>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/151-0.png\" alt=\"amplify_07.png\" \/><\/div>\n<p>\u5f53\u70b9\u51fb\u201c\u521b\u5efa\u8d26\u6237\u201d\u6309\u94ae\u540e\uff0c\u5c06\u5728Cognito\u7528\u6237\u6c60\u4e2d\u521b\u5efa\u4e00\u4e2a\u8d26\u6237\u3002\u7cfb\u7edf\u8fd8\u9ed8\u8ba4\u63d0\u4f9b\u4e86\u90ae\u7bb1\u9a8c\u8bc1\u529f\u80fd\uff0c\u56e0\u6b64\u8bf7\u68c0\u67e5\u60a8\u8f93\u5165\u7684\u90ae\u7bb1\u5730\u5740\u7684\u6536\u4ef6\u7bb1\u3002<\/p>\n<p>\u6709\u4e00\u5c01\u7b80\u5355\u7684\u90ae\u4ef6\u9001\u5230\u4e86\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/154-0.png\" alt=\"amplify_08.png\" \/><\/div>\n<p>\u4e00\u65e6\u6ce8\u518c\uff0c \u7ec4\u4ef6\u4f1a\u81ea\u52a8\u5207\u6362\u5230\u4ee5\u4e0b\u7684\u7535\u5b50\u90ae\u4ef6\u5730\u5740\u786e\u8ba4\u7801\u8f93\u5165\u754c\u9762\uff0c\u8bf7\u8f93\u5165\u6536\u5230\u76846\u4f4d\u786e\u8ba4\u7801\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/156-0.png\" alt=\"amplify_09.png\" \/><\/div>\n<p>\u70b9\u51fb\u300c\u786e\u8ba4\u7801\u300d\u540e\uff0c\u6ce8\u518c\u8fc7\u7a0b\u5c06\u5b8c\u6210\u3002\u5b8c\u6210\u6ce8\u518c\u540e\uff0c\u9700\u8981\u91cd\u65b0\u767b\u5f55\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/158-0.png\" alt=\"amplify_10.png\" \/><\/div>\n<p>\u4f7f\u7528\u6ce8\u518c\u7684\u5e10\u6237\u4fe1\u606f\u767b\u5f55\u540e\uff0c \u7ec4\u4ef6\u7684\u754c\u9762\u5c06\u5207\u6362\u4e3a\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/160-0.png\" alt=\"amplify_11.png\" \/><\/div>\n<p>\u987a\u4fbf\u8bf4\u4e00\u53e5\uff0c\u4e0d\u65ad\u5728\u63a7\u5236\u53f0\u4e0a\u51fa\u73b0\u7684\u9519\u8bef\u662f\u56e0\u4e3a\u6211\u591a\u6b21\u8f93\u5165\u8d26\u6237\u4fe1\u606f\u65f6\u5f04\u9519\u4e86?<\/p>\n<p>\u901a\u8fc7\u4f7f\u7528AWS Amplify\uff0c\u6211\u4eec\u80fd\u591f\u5728Ionic\u5e94\u7528\u4e2d\u96c6\u6210\u8ba4\u8bc1\u7cfb\u7edf\u3002<br \/>\n\u5176\u5b9e\uff0c\u8ba4\u8bc1\u90e8\u5206\u76f8\u5f53\u590d\u6742\uff0c\u9700\u8981\u6839\u636e\u7528\u6237\u7684\u72b6\u6001\u6765\u663e\u793a\u4ee5\u4e0b\u7c7b\u4f3c\u7684\u754c\u9762\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306e\u958b\u901a\u78ba\u8a8d<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b5\u30a4\u30f3\u30a4\u30f3<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30d1\u30b9\u30ef\u30fc\u30c9\u30ea\u30de\u30a4\u30f3\u30c0\u30fc<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u30d1\u30b9\u30ef\u30fc\u30c9\u518d\u8a2d\u5b9a<\/ul>\n<p>\u4f7f\u7528AWS Amplify JavaScript Framework\u53ef\u4ee5\u5728\u4e00\u4e2a\u7ec4\u4ef6\u4e2d\u8f7b\u677e\u6784\u5efa\u8fd9\u4e9b\u529f\u80fd\uff0c\u975e\u5e38\u5f3a\u5927\u3002<\/p>\n<h1>\u5c06Amplify\u7684\u8ba4\u8bc1\u72b6\u6001\u540c\u6b65\u5230Ionic\u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002<\/h1>\n<p>\u597d\u7684\uff0c\u5728\u51c6\u5907\u9636\u6bb5\u4e2d\uff0c\u6211\u52aa\u529b\u521b\u5efa\u4e86 PublicModule \u548c ClosedModule\uff0c\u5e76\u5c06\u672a\u8ba4\u8bc1\u72b6\u6001\u548c\u8ba4\u8bc1\u72b6\u6001\u7684\u9875\u9762\u5206\u5f00\u3002<\/p>\n<p>\u53ef\u4ee5\u5728\u7ec4\u4ef6\u4e2d\u8fdb\u884c\u767b\u5f55\uff0c\u4f46\u6211\u60f3\u6839\u636eAmplify\u5185\u90e8\u7684\u767b\u5f55\u72b6\u6001\u6765\u66f4\u6539\u8def\u7531\u3002<\/p>\n<h2>\u5728AppComponent\u4e2d\u6dfb\u52a0\u4ee3\u7801\u4ee5\u76d1\u89c6Amplify\u7684\u8ba4\u8bc1\u72b6\u6001\u3002<\/h2>\n<p>\u4f5c\u4e3aIonic\u5e94\u7528\u7684\u6839\u7ec4\u4ef6\uff0c\u6211\u4eec\u6709\u4e00\u4e2a\u53eb\u505aAppComponent\u7684\u7ec4\u4ef6\uff0c\u6240\u4ee5\u6211\u5e0c\u671b\u5728\u90a3\u91cc\u76d1\u6d4bAmplify\u7684\u8ba4\u8bc1\u72b6\u6001\u5e76\u5c06\u5176\u5e94\u7528\u5230\u8def\u7531\u4e2d\u3002<\/p>\n<p>\u4f7f\u7528Ionic CLI\u521b\u5efa\u9879\u76ee\u540e\uff0cAppComponent\u4e2d\u5305\u542b\u4e86\u9488\u5bf9\u539f\u751f\u5e94\u7528\u7a0b\u5e8f\u7684\u542f\u52a8\u5c4f\u5e55\u548c\u72b6\u6001\u680f\u64cd\u4f5c\u5904\u7406\u7684\u4ee3\u7801\uff0c\u4f46\u7531\u4e8e\u672c\u6b21\u4e0d\u9700\u8981\u8fd9\u4e9b\u529f\u80fd\uff0c\u6211\u4eec\u4f1a\u5927\u80c6\u5730\u5c06\u5176\u5220\u9664\u3002<\/p>\n<p>\u6211\u53ea\u4f1a\u7528\u4e2d\u6587\u5b8c\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NavController<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@ionic\/angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AmplifyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify-angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.component.scss<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\r\n\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">navCtrl<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NavController<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">amplifyService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AmplifyService<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\r\n\r\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">amplifyService<\/span><span class=\"p\">.<\/span><span class=\"nx\">authStateChange$<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">(<\/span><span class=\"nx\">authState<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">switch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">authState<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">signedIn<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\r\n          <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navCtrl<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigateForward<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/home<\/span><span class=\"dl\">'<\/span><span class=\"p\">]);<\/span>\r\n          <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">signedOut<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\r\n          <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navCtrl<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigateForward<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/auth<\/span><span class=\"dl\">'<\/span><span class=\"p\">]);<\/span>\r\n          <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n      <span class=\"p\">}<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u6211\u4eec\u8ba2\u9605 Observable \u65f6\uff0c\u5982\u679c\u4e0d\u53ca\u65f6\u53d6\u6d88\u8ba2\u9605\uff0c\u5728\u4e0d\u518d\u9700\u8981\u65f6\u4f1a\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f\u3002\u4f46\u662f\uff0c\u5bf9\u4e8e AppComponent \u8fd9\u4e2a\u7ec4\u4ef6\u6765\u8bf4\uff0c\u7531\u4e8e\u5b83\u59cb\u7ec8\u5b58\u5728\u4e8e\u5e94\u7528\u7a0b\u5e8f\u7684\u6574\u4e2a\u751f\u547d\u5468\u671f\u4e2d\uff0c\u6240\u4ee5\u6211\u4eec\u5e76\u6ca1\u6709\u7279\u522b\u7f16\u5199\u53d6\u6d88\u8ba2\u9605\u7684\u5904\u7406\u3002<\/p>\n<p>\u8981\u5728Angular\u4e2d\u4f7f\u7528Amplify\uff0c\u53ef\u4ee5\u4eceaws-amplify\u5305\u4e2d\u5bfc\u5165Auth\u6216API\uff0c\u4f46\u662fAngular\u4f7f\u7528\u4e86\u5f3a\u5927\u7684\u4f9d\u8d56\u6ce8\u5165\uff08DI\uff09\u673a\u5236\u3002<\/p>\n<p>\u5728 aws-amplify-angular \u5305\u4e2d\uff0c\u63d0\u4f9b\u4e86 AmplifyService \u670d\u52a1\u7c7b\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f9d\u8d56\u6ce8\u5165\u64cd\u4f5c Amplify\u3002<\/p>\n<p>\u540c\u65f6\uff0cAngular\u4e0eRxJS\u7d27\u5bc6\u7ed3\u5408\u3002\u901a\u8fc7AmplifyService\uff0cAmplify\u5c06\u5185\u90e8\u7684\u767b\u5f55\u72b6\u6001\u53d8\u5316\u4ee5RxJS\u7684\u53ef\u89c2\u5bdf\u5bf9\u8c61\u7684\u5f62\u5f0f\u63d0\u4f9b\u7ed9\u6211\u4eec\uff08\u5373this.amplifyService.authState()\u7684\u90e8\u5206\uff09\u3002<\/p>\n<p>\u4ee5\u8fd9\u79cd\u72b6\u6001\u767b\u5f55\u65f6\uff0c\u5c06\u81ea\u52a8\u8f6c\u5230\u4e3b\u9875\u3002<\/p>\n<h2>\u6682\u65f6\u5728\u9996\u9875\u4e0a\u8bbe\u7f6e\u4e00\u4e2a\u767b\u51fa\u6309\u94ae<\/h2>\n<p>\u56e0\u4e3a\u6211\u60f3\u5c1d\u8bd5\u767b\u51fa\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u4f1a\u5728\u4e3b\u9875\u4e0a\u8bbe\u7f6e\u4e00\u4e2a\u767b\u51fa\u6309\u94ae\u3002\u7531\u4e8e\u6211\u6b63\u5728\u4f7f\u7528Ionic\uff0c\u6240\u4ee5\u53ea\u9700\u5728\u6807\u9898\u680f\u4e0a\u8bbe\u7f6e\u4e00\u4e2a\u5e26\u6709\u56fe\u6807\u7684\u6309\u94ae\u5c31\u80fd\u5b8c\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;ion-header&gt;<\/span>\r\n  <span class=\"nt\">&lt;ion-toolbar&gt;<\/span>\r\n    <span class=\"nt\">&lt;ion-title&gt;<\/span>\r\n      Ionic Blank\r\n    <span class=\"nt\">&lt;\/ion-title&gt;<\/span>\r\n\r\n    <span class=\"c\">&lt;!-- \u3053\u3053\u304b\u3089\u8ffd\u52a0 --&gt;<\/span>\r\n    <span class=\"nt\">&lt;ion-buttons<\/span> <span class=\"na\">slot=<\/span><span class=\"s\">\"end\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;ion-button<\/span> <span class=\"na\">slot=<\/span><span class=\"s\">\"icon-only\"<\/span> <span class=\"na\">(click)=<\/span><span class=\"s\">\"onSignOutButtonClicked()\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;ion-icon<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"log-out\"<\/span><span class=\"nt\">&gt;&lt;\/ion-icon&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/ion-button&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/ion-buttons&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- \u3053\u3053\u307e\u3067\u8ffd\u52a0 --&gt;<\/span>\r\n\r\n  <span class=\"nt\">&lt;\/ion-toolbar&gt;<\/span>\r\n<span class=\"nt\">&lt;\/ion-header&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;ion-content&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"ion-padding\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    The world is your oyster.\r\n    <span class=\"nt\">&lt;p&gt;<\/span>If you get lost, the <span class=\"nt\">&lt;a<\/span> <span class=\"na\">target=<\/span><span class=\"s\">\"_blank\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"noopener\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/ionicframework.com\/docs\/\"<\/span><span class=\"nt\">&gt;<\/span>docs<span class=\"nt\">&lt;\/a&gt;<\/span> will be your guide.<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;\/ion-content&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u63a5\u4e0b\u6765\uff0c\u5728src\/app\/pages\/closed\/home\/home.page.ts\u4e2d\u7f16\u5199\u767b\u51fa\u5904\u7406\u3002\u540c\u6837\u5730\uff0c\u901a\u8fc7\u6ce8\u5165AmplifyService\u5e76\u4f7f\u7528\u63d0\u4f9b\u7684\u65b9\u6cd5\uff0c\u53ef\u4ee5\u8f7b\u677e\u5b8c\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AmplifyService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify-angular<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-home<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">home.page.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">home.page.scss<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n<span class=\"p\">})<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">HomePage<\/span> <span class=\"p\">{<\/span>\r\n\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">amplifyService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AmplifyService<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\r\n\r\n  <span class=\"nx\">onSignOutButtonClicked<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">amplifyService<\/span><span class=\"p\">.<\/span><span class=\"nx\">auth<\/span><span class=\"p\">().<\/span><span class=\"nx\">signOut<\/span><span class=\"p\">();<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u6837\u7684\u8fd0\u4f5c\u65b9\u5f0f\u53ef\u4ee5\u7b26\u5408\u8981\u6c42\u3002\u611f\u89c9\u4e0d\u9519\uff0c\u5bf9\u5427\uff01<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/184-0.gif\" alt=\"signin-sign-out.mov.gif\" \/><\/div>\n<p>\u6211\u5011\u5df2\u7d93\u6210\u529f\u5c07Amplify Framework\u96c6\u6210\u5230Ionic\u61c9\u7528\u7a0b\u5f0f\u4e2d\u3002<\/p>\n<h1>\u7ee7\u7eed\u5728\u540e\u7eed\u7684AWS AppSync\u8bbe\u7f6e\u548c\u8bf7\u6c42\u4e2d\u8fdb\u884c\u3002<\/h1>\n<p>\u603b\u7ed3\u5230\u76ee\u524d\u4e3a\u6b62\u7684\u5de5\u4f5c\uff0c<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Ionic CLI\u3092\u4f7f\u3063\u3066Ionic\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Amplify CLI\u3092\u4f7f\u3063\u3066\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306bAmazon Cognito\u3092\u69cb\u7bc9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Amplify Framework\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Amplify\u63d0\u4f9b\u306e \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3063\u3066\u8a8d\u8a3c\u5468\u308a\u3092\u30b5\u30af\u30c3\u3068\u69cb\u7bc9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Amplify\u304c\u6301\u3064\u8a8d\u8a3c\u72b6\u614b\u3092Angular\u5074\u3067\u76e3\u8996\u3057\u3066\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u5207\u308a\u66ff\u3048\u308b<\/ul>\n<p>\u6210\u4e3a\u3002<\/p>\n<p>\u6211\u6700\u60f3\u5199\u7684\u90e8\u5206\u662f\u4f7f\u7528AWS AppSync\u521b\u5efaGraphQL API\uff0c\u5e76\u4eceAWS Amplify JavaScript Framework\u8c03\u7528\u5b83\u7684\u90e8\u5206\uff0c\u4f46\u662f\u7531\u4e8e\u51c6\u5907\u6b65\u9aa4\u6bd4\u9884\u671f\u591a\uff0c\u6240\u4ee5\u6211\u60f3\u5148\u5728\u8fd9\u4e2a\u9636\u6bb5\u505c\u4e0b\u6765\u3002<\/p>\n<p>\u7531\u4e8e\u8fd9\u662f\u6211\u5728Qiita\u7684\u9996\u6b21\u5c1d\u8bd5\uff0c\u6240\u4ee5\u6211\u5bf9\u8fd9\u4e2a\u5927\u6982\u7684\u611f\u89c9\u6709\u4e9b\u4e0d\u5b89\uff0c\u4f46\u662f\u6211\u51b3\u5b9a\u52c9\u5f3a\u5199\u4e24\u5929\uff0c\u5e0c\u671b\u80fd\u572812\u670817\u65e5\u7684\u6587\u7ae0\u4e2d\u63d0\u4f9b\u7eed\u7bc7\u3002<\/p>\n<p>\u5927\u81f4\u4e0a\uff0c\u6211\u8ba1\u5212\u4f7f\u7528AWS AppSync\u642d\u5efaAPI\uff0c\u5236\u4f5c\u4e00\u4e2a\u5b9e\u65f6\u540c\u6b65\u7684\u804a\u5929\u5e94\u7528\u7a0b\u5e8f\u3002<br \/>\n\u4f5c\u4e3aAppSync\u7684\u7ec3\u4e60\u9898\u76ee\uff0c\u804a\u5929\u5e94\u7528\u7a0b\u5e8f\u7ecf\u5e38\u88ab\u63d0\u53ca\u3002<br \/>\nawslabs\u4e0a\u4e5f\u6709\u4e00\u4e2a\u540d\u4e3aChatQL\u7684Angular+AppSync\u793a\u4f8b\u9879\u76ee\u3002<\/p>\n<p>\u8ba1\u5212\u4e2d\u7684\u4e0b\u4e00\u6b65\u5b9e\u73b0\u5c06\u503e\u5411\u4e8e\u804a\u5929\u5e94\u7528\u7a0b\u5e8f\uff0c\u4f46\u672c\u6587\u7684\u5185\u5bb9\u6211\u6253\u7b97\u8bbe\u8ba1\u5f97\u76f8\u5bf9\u901a\u7528\u3002<\/p>\n<p>\u5982\u679c\u5728AWS Amplify\u4e0a\u53ef\u4ee5\u5feb\u901f\u5f00\u53d1\u540e\u7aef\uff0c\u800c\u4e14\u5728Ionic\u4e0a\u4e5f\u53ef\u4ee5\u5feb\u901f\u5f00\u53d1\u524d\u7aef\uff0c\u4f60\u4e0d\u89c9\u5f97\u68a6\u60f3\u4f1a\u66f4\u52a0\u5e7f\u9614\u5417\uff1f<\/p>\n<p>\u660e\u5929\u5c06\u7531@moaible4qiita\u5927\u4eba\u4e3b\u6301AWS Amplify Advent Calendar\u7684\u5185\u5bb9\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u521d\u6b21\u89c1\u9762\u3002\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u53c2\u52a0 Advent Calendar\uff01\u5927\u7ea6\u4e00\u5e74\u524d\u5f00\u59cb\u63a5\u89e6 AWS Amplify\uff0c\u56e0\u4e3a\u5b83 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39537","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528aws-amplify\u548cionic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\" \/>\n<meta property=\"og:description\" content=\"\u521d\u6b21\u89c1\u9762\u3002\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u53c2\u52a0 Advent Calendar\uff01\u5927\u7ea6\u4e00\u5e74\u524d\u5f00\u59cb\u63a5\u89e6 AWS Amplify\uff0c\u56e0\u4e3a\u5b83 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528aws-amplify\u548cionic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-16T00:20:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T10:23:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/23-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u9896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u9896\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/\",\"name\":\"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-16T00:20:15+00:00\",\"dateModified\":\"2024-04-29T10:23:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\",\"name\":\"\u79d1, \u9896\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u9896\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528aws-amplify\u548cionic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f","og_description":"\u521d\u6b21\u89c1\u9762\u3002\u8fd9\u662f\u6211\u7b2c\u4e00\u6b21\u53c2\u52a0 Advent Calendar\uff01\u5927\u7ea6\u4e00\u5e74\u524d\u5f00\u59cb\u63a5\u89e6 AWS Amplify\uff0c\u56e0\u4e3a\u5b83 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528aws-amplify\u548cionic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-16T00:20:15+00:00","article_modified_time":"2024-04-29T10:23:12+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b2737434c4406c806eb\/23-0.png"}],"author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/","name":"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-16T00:20:15+00:00","dateModified":"2024-04-29T10:23:12+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528AWS Amplify\u548cIonic\u7ed3\u5408\u5f00\u53d1\u80fd\u591f\u4ee5\u95ea\u7535\u822c\u7684\u901f\u5ea6\u5f00\u53d1\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e","name":"\u79d1, \u9896","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","caption":"\u79d1, \u9896"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8aws-amplify%e5%92%8cionic%e7%bb%93%e5%90%88%e5%bc%80%e5%8f%91%e8%83%bd%e5%a4%9f%e4%bb%a5%e9%97%aa%e7%94%b5%e8%88%ac%e7%9a%84%e9%80%9f%e5%ba%a6%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39537"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39537\/revisions"}],"predecessor-version":[{"id":86884,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39537\/revisions\/86884"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}