{"id":3699,"date":"2020-05-12T14:14:24","date_gmt":"2020-05-12T06:14:24","guid":{"rendered":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/?p=3699"},"modified":"2020-05-12T14:14:27","modified_gmt":"2020-05-12T06:14:27","slug":"%e6%8a%8a%e6%95%8f%e6%84%9f%e8%a8%ad%e5%ae%9a%e7%9a%84%e5%85%a7%e5%ae%b9%e8%b7%9f-angular-%e7%a8%8b%e5%bc%8f%e5%88%86%e9%9b%a2","status":"publish","type":"post","link":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/2020\/05\/%e6%8a%8a%e6%95%8f%e6%84%9f%e8%a8%ad%e5%ae%9a%e7%9a%84%e5%85%a7%e5%ae%b9%e8%b7%9f-angular-%e7%a8%8b%e5%bc%8f%e5%88%86%e9%9b%a2\/","title":{"rendered":"\u628a\u654f\u611f\u8a2d\u5b9a\u7684\u5167\u5bb9\u8ddf Angular \u7a0b\u5f0f\u5206\u96e2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u4ee5\u6211\u7528\u904e Django \/ Docker \u7684\u7d93\u9a57\uff0c\u4e00\u822c\u90fd\u662f\u5229\u7528\u74b0\u5883\u8b8a\u6578\u4f86\u4f5c\u5206\u96e2\uff0c\u7a0b\u5f0f\u5728\u57f7\u884c\u6642\uff0c\u6703\u53bb\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\u4f86\u7576\u4f5c\u8a2d\u5b9a\uff0c\u76e1\u91cf\u4e0d\u4f9d\u9760\u8a2d\u5b9a\u6a94\uff0c\u9032\u800c\u9054\u5230 <a href=\"https:\/\/12factor.net\/\">12 factor<\/a> &#8211; \u00a0<a href=\"https:\/\/12factor.net\/config\">config<\/a> \u7684\u8981\u6c42\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5230\u4e86 Angular \uff0c\u5c31\u9700\u8981\u505a\u51fa\u8abf\u6574\u3002Angular \u662f\u9700\u8981\u5148\u9032\u884c\u5efa\u7f6e\u7522\u51fa javascript \/ html \/ css \uff0c\u518d\u628a\u9019\u4e9b\u7522\u51fa\u7684\u6a94\u6848\u653e\u5230\u7db2\u9801\u4f3a\u670d\u5668\uff0c\u700f\u89bd\u5668\u518d\u53bb\u4e0b\u8f09\uff0c\u6240\u4ee5\u5b8c\u5168\u6c92\u8fa6\u6cd5\u4f7f\u7528\u74b0\u5883\u8b8a\u6578\u4f5c\u70ba\u8a2d\u5b9a\uff0c\u5fc5\u9808\u8981\u628a\u8a2d\u5b9a\u5beb\u5230\u6a94\u6848\u88e1\uff0c\u518d\u505a\u5efa\u7f6e\u3002\u90a3\u8a2d\u5b9a\u5beb\u5230\u6a94\u6848\u7684\u8a71\uff0c\u5176\u5be6\u6211\u5011\u90fd\u77e5\u9053\uff0c\u9019\u4e9b\u654f\u611f\u8a2d\u5b9a\u5167\u5bb9\u4e0d\u9069\u5408\u653e\u5230 git repository\uff0c\u5373\u4f7f\u662f private repository\uff0c\u9019\u6a23\u6703\u6709\u5b89\u5168\u4e0a\u7684\u98a8\u96aa\u3002\u90a3\u9019\u6a23\u5c31\u5169\u96e3\u4e86\u554a\uff1f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8aaa\u4f86\u5f88\u5999\uff0c\u6211\u662f\u89ba\u5f97\u5b98\u65b9\u65e9\u5c31\u61c9\u8a72\u6709\u6bd4\u8f03\u597d\u7684\u4f5c\u6cd5\u4e86\uff0c\u4f46\u662f\uff0c\u4e26\u6c92\u6709\u3002\u4e0d\u7ba1\u600e\u9ebc\u6a23\uff0c\u6211\u9084\u662f\u627e\u5230\u89e3\u6c7a\u65b9\u6cd5\u4e86\uff0c\u57fa\u672c\u4e0a\u8ddf\u6211\u60f3\u7684\u4e5f\u5dee\u4e0d\u591a\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/itnext.io\/github-actions-hide-and-set-angular-environment-variables-e753d06d16a8\">GitHub Actions: Hide And Set Angular Environment Variables<\/a><\/li><li><a href=\"https:\/\/medium.com\/@ferie\/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c\">How to pass environment variables at building time in an Angular application using .env files<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u5169\u7bc7\u6587\u7ae0\u7684\u4f5c\u6cd5\u5927\u540c\u5c0f\u7570\uff0c\u9019\u908a\u4f5c\u7c21\u55ae\u7684\u8aaa\u660e\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\u79fb\u9664 src\/environment\/environment.ts<\/li><li>\u65b0\u589e\u4e00\u500b\u8173\u672c\uff0c\u9019\u500b\u8173\u672c\u6703\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\uff0c\u4e26\u7522\u751f\u4e00\u500b\u65b0\u7684 src\/environment\/environment.ts<\/li><li>\u4fee\u6539 package.json<ol><li>\u5728 scripts \u88e1\u589e\u52a0 config\uff0c\u9019\u500b config \u6703\u53bb\u57f7\u884c\u6b65\u9a5f 2 \u7684\u8173\u672c\uff0c\u7528\u4ee5\u7522\u751f environment.ts<\/li><li>\u4fee\u6539 scripts \u88e1\u7684 start \/ build\uff0c\u5728\u57f7\u884c\u539f\u4f86\u7684\u6307\u4ee4\u524d\uff0c\u5148\u57f7\u884c npm run config \u53bb\u7522\u751f environment.ts<\/li><\/ol><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0b\u9762\u5169\u500b\u7247\u6bb5\u662f\u95dc\u9375\u7684\u6539\u52d5\u90e8\u5206\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\n\/\/ set-env.ts\n\/\/ \u653e\u5728\u5c08\u6848\u6839\u76ee\u9304\u4e0b\nimport { writeFile } from 'fs';\nimport { name, version } from '.\/package.json';\n\n\n\/\/ Configure Angular `environment.ts` file path\nconst targetPath = '.\/src\/environments\/environment.ts';\n\n\n\/\/ \u8f09\u5165 colors \u6a21\u7d44\uff0c\u4e3b\u8981\u662f\u7528\u4f86\u986f\u793a\nconst colors = require('colors');\n\n\n\/\/ \u53ef\u4ee5\u628a\u654f\u611f\u5167\u5bb9\u653e\u5230 .env \u6a94\u6848\u88e1\uff0cnodejs \u6703\u628a\u5167\u5bb9\u8b80\u51fa\u4f86\uff0c\u653e\u5230\u74b0\u5883\u8b8a\u6578\u88e1\n\/\/ \u4e5f\u53ef\u4ee5\u5728\u57f7\u884c npm run \u4e4b\u524d\uff0c\u5148\u8a2d\u5b9a\u597d\u74b0\u5883\u8b8a\u6578\nconst result = require('dotenv').config();\nif (result.error) {\n\u00a0 \/\/ throw result.error;\n}\n\n\n\/\/ \u539f\u4f86 environment.ts \u88e1\u7684\u5167\u5bb9\uff0c\u628a\u8a72\u66ff\u63db\u7684\uff0c\u7528 template literals \u4f86\u66ff\u63db\n\n\/\/\u00a0https:\/\/developer.mozilla.org\/zh-TW\/docs\/Web\/JavaScript\/Reference\/Template_literals\nconst envConfigFile = `export const environment = {\n\u00a0\u00a0production: ${process.env.PRODUCTION},\n\u00a0\u00a0VERSION: '${version}\u2019,\n};\n\n`;\n\n\n\/\/ \u986f\u793a\nconsole.log(colors.magenta('The file `environment.ts` will be written with the following content: \\n'));\nconsole.log(colors.grey(envConfigFile)); writeFile(targetPath, envConfigFile, (err) => {\n\u00a0\u00a0if (err) {\n\u00a0\u00a0\u00a0\u00a0throw console.error(err);\n\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0console.log(colors.magenta(`Angular environment.ts file generated correctly at ${targetPath} \\n`));\n\u00a0\u00a0}\n});<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ package.json\n\/\/ \u53ea\u6458\u9304\u91cd\u8981\u7684\u90e8\u5206\n{\n\u00a0 \u201cscripts\u201d: {\n\u00a0\u00a0\u00a0\u00a0\"config\": \"ts-node -O '{\\\"module\\\": \\\"commonjs\\\"}' .\/set-env.ts\",\n\u00a0\u00a0\u00a0\u00a0\"start\": \"npm run config &amp;&amp; ng serve\",\n\u00a0\u00a0\u00a0\u00a0\"build\": \"npm run config &amp;&amp; ng build\u201d\n\u00a0 }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4ee5\u6211\u7528\u904e Django \/ Docker \u7684\u7d93\u9a57\uff0c\u4e00\u822c\u90fd\u662f\u5229\u7528\u74b0\u5883\u8b8a\u6578\u4f86\u4f5c\u5206\u96e2\uff0c\u7a0b\u5f0f\u5728\u57f7\u884c\u6642\uff0c\u6703\u53bb\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\u4f86\u7576\u4f5c\u8a2d\u5b9a\uff0c\u76e1\u91cf\u4e0d\u4f9d\u9760\u8a2d\u5b9a\u6a94\uff0c\u9032\u800c\u9054\u5230 12 factor &#8211; \u00a0config \u7684\u8981\u6c42\u3002 \u5230\u4e86 Angular \uff0c\u5c31\u9700\u8981\u505a\u51fa\u8abf\u6574\u3002Angular \u662f\u9700\u8981\u5148\u9032\u884c\u5efa\u7f6e\u7522\u51fa javascript \/ html \/ css \uff0c\u518d\u628a\u9019\u4e9b\u7522\u51fa\u7684\u6a94\u6848\u653e\u5230\u7db2\u9801\u4f3a\u670d\u5668\uff0c\u700f\u89bd\u5668\u518d\u53bb\u4e0b\u8f09\uff0c\u6240\u4ee5\u5b8c\u5168\u6c92\u8fa6\u6cd5\u4f7f\u7528\u74b0\u5883\u8b8a\u6578\u4f5c\u70ba\u8a2d\u5b9a\uff0c\u5fc5\u9808\u8981\u628a\u8a2d\u5b9a\u5beb\u5230\u6a94\u6848\u88e1\uff0c\u518d\u505a\u5efa\u7f6e\u3002\u90a3\u8a2d\u5b9a\u5beb\u5230\u6a94\u6848\u7684\u8a71\uff0c\u5176\u5be6\u6211\u5011\u90fd\u77e5\u9053\uff0c\u9019\u4e9b\u654f\u611f\u8a2d\u5b9a\u5167\u5bb9\u4e0d\u9069\u5408\u653e\u5230 git repository\uff0c\u5373\u4f7f\u662f private repository\uff0c\u9019\u6a23\u6703\u6709\u5b89\u5168\u4e0a\u7684\u98a8\u96aa\u3002\u90a3\u9019\u6a23\u5c31\u5169\u96e3\u4e86\u554a\uff1f \u8aaa\u4f86\u5f88\u5999\uff0c\u6211\u662f\u89ba\u5f97\u5b98\u65b9\u65e9\u5c31\u61c9\u8a72\u6709\u6bd4\u8f03\u597d\u7684\u4f5c\u6cd5\u4e86\uff0c\u4f46\u662f\uff0c\u4e26\u6c92\u6709\u3002\u4e0d\u7ba1\u600e\u9ebc\u6a23\uff0c\u6211\u9084\u662f\u627e\u5230\u89e3\u6c7a\u65b9\u6cd5\u4e86\uff0c\u57fa\u672c\u4e0a\u8ddf\u6211\u60f3\u7684\u4e5f\u5dee\u4e0d\u591a\u3002 GitHub Actions: Hide And Set Angular Environment Variables How to pass environment variables at building time in an Angular application using .env files \u9019\u5169\u7bc7\u6587\u7ae0\u7684\u4f5c\u6cd5\u5927\u540c\u5c0f\u7570\uff0c\u9019\u908a\u4f5c\u7c21\u55ae\u7684\u8aaa\u660e\uff1a \u79fb\u9664 src\/environment\/environment.ts \u65b0\u589e\u4e00\u500b\u8173\u672c\uff0c\u9019\u500b\u8173\u672c\u6703\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\uff0c\u4e26\u7522\u751f\u4e00\u500b\u65b0\u7684 src\/environment\/environment.ts \u4fee\u6539 package.json &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/2020\/05\/%e6%8a%8a%e6%95%8f%e6%84%9f%e8%a8%ad%e5%ae%9a%e7%9a%84%e5%85%a7%e5%ae%b9%e8%b7%9f-angular-%e7%a8%8b%e5%bc%8f%e5%88%86%e9%9b%a2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;\u628a\u654f\u611f\u8a2d\u5b9a\u7684\u5167\u5bb9\u8ddf Angular \u7a0b\u5f0f\u5206\u96e2&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[5],"tags":[167],"class_list":["post-3699","post","type-post","status-publish","format-standard","hentry","category-idea","tag-angular"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2MOxp-XF","_links":{"self":[{"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/posts\/3699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/comments?post=3699"}],"version-history":[{"count":1,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/posts\/3699\/revisions"}],"predecessor-version":[{"id":3700,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/posts\/3699\/revisions\/3700"}],"wp:attachment":[{"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/media?parent=3699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/categories?post=3699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ellery.no-ip.info\/wp\/thinkingmore\/wp-json\/wp\/v2\/tags?post=3699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}