為了能讓大家能夠順利的建立起 Angular 18 開發環境，以下是需要安裝的相關軟體與安裝步驟與說明。
- Windows 10 以上版本
- Mac OS X 10.6 以上版本
畢竟 Angular 是一套純前端的開發框架，最終的成本一定是網頁的型態呈現，所以你必須要有一個瀏覽器來進行測試，以下是我們建議的瀏覽器：
請下載 Angular 官方推出的 Angular DevTools 瀏覽器擴充套件，目前支援 Chome extension 與 Firefix Add-ons 版本。
- Windows
- Mac
如果你是第一次使用 Git 版控，請開啟命令提示字元或終端機視窗，並輸入以下指令進行設定，這是使用 Git 之前的必要步驟：
- 設定您的名稱:
git config --global user.name {您的名稱} - 設定電子郵件:
git config --global user.email {您的電子郵件}
我們在 Angular 官網的 Version compatibility 頁面可以看到不同的 Angular 版本其實有匹配的 Node.js 版本，太新的 Node.js 不能用，太舊也不能用。
我們通常在開發 Angular 一段時間後，多少都會面臨到需要維護不同專案採用不同 Angular 版本的狀況，這時候你就會需要管理多個不同版本的 Node.js 執行環境，這時候就可以考慮使用 NVM (Node Version Manager) 工具來管理多個不同的 Node.js 版本。
- 如果是 Windows 用戶，請到 nvm-windows 下載
nvm-setup.exe進行安裝 - 如果是 macOS/Linux/WSL 用戶，請到 nvm 執行安裝命令。
若要支援 Angular v18 的 Node.js 執行環境，必須要安裝 v18.19.0 LTS 以上版本，若要透過 nvm 安裝 LTS 最新版(v20)，你可以這樣安裝：
-
Windows
nvm install 20 nvm use 20
請注意：在 Windows 使用 nvm-windows 安裝 Node.js 時，必須以系統管理員身分執行「命令提示字元」或 PowerShell 命令列環境。
-
macOS / Linux / WSL
nvm install 20 nvm use 20 nvm alias default 20請注意：在 macOS / Linux / WSL 使用 nvm 安裝 Node.js 時，是不需要使用到
sudo命令的。
最後，我們要驗證一下你的環境目前安裝的 Node.js 為哪個版本？
node -v請確認為 v18.19.0 或以上版本！
開發 Angular 應用程式時，我們會使用到 Angular CLI 命令列工具，這個工具可以幫助我們快速建立 Angular 專案骨架，並且可以幫助我們快速建立元件、服務、模組等等的程式碼。
-
安裝 Angular CLI 工具可以開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)，並執行以下指令安裝
@angular/cli這個 npm 套件 (這個動作會執行 1 ~ 2 分鐘左右)：npm install -g @angular/cli
由於預設 Visual Studio Code 在 Windows 10 下，預設會用 Windows PowerShell 開啟終端機模式。如果你想在 Windows PowerShell 下執行
ng命令，必須先執行以下命令才可以正常執行：Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
如果你身處離線環境(air-gapped network)，請參考我的 前端工程研究：如何在企業內部使用「完全離線」的方式安裝 npm 套件 文章進行安裝。
-
驗證安裝結果的指令
ng version
確認 Angular CLI 為
18.0.1以上版本
-
請依據下列步驟測試 Angular CLI 是否可以正常執行：
-
開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
-
先準備一個英文命名的資料夾，最好是一個空白資料夾
例如：
C:\Projects你必須確保 Angular 專案所在路徑不能有空白字元或中文字元！
-
建立
demo1專案資料夾與 Angular 專案骨架，請執行下列指令：這個過程會建立 Angular 專案檔案，自動加入 Git 版控，並自動安裝所有 npm 相依套件！
ng new demo1 --ssr=false --style=css
-
進入 demo1 目錄
cd demo1 -
啟動 Angular 開發伺服器並開啟網頁 http://localhost:4200/
npm start
或改用以下指令啟動開發伺服器並自動開啟網頁
ng serve --open
-
-
畫面上只要出現
Congratulations! Your app is running. 🎉字樣，就代表設定成功！👍
開發 Angular 應用程式的工具，我們建議使用 Visual Studio Code 為主要的開發工具，請記得安裝或更新至最新版。
除此之外，也請安裝以下幾個重要的擴充套件：
-
安裝 Angular Extension Pack 擴充套件
由於同名的擴充套件好幾套，請務必安裝作者為 Will 保哥 的版本！
-
安裝 Prettier - Code formatter 擴充套件
進階設定請參考 設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格 文章進行設定。
如果你使用 Windows 作業系統來開發 Angular 應用程式，使用 Visual Studio Code 工具時，有三個相當重要的鍵盤快速鍵，經常會被中文版的 Windows 作業系統內建的「微軟新注音」輸入法給干擾，導致怎樣都無法用鍵盤按出好用功能。
-
Ctrl + Space在各種開發工具中，這個快速鍵通常用來觸發 IntelliSense 輸入建議。
但是當系統切換到 中文 語言時，主要用來啟用/停用中文輸入法。
-
Ctrl + ,在許多應用程式的快速鍵中，這個快速鍵通常用來開啟 設定 視窗。
但是當系統切換到 中文 語言時，無論你切換到中文或英文模式，都會輸出「全形逗點」。
-
Ctrl + .在各種開發工具中，這個快速鍵通常用來觸發 Code Actions 或 Quick Fixes 等程式碼重構建議。
但是當系統切換到 中文 語言時，無論你切換到中文或英文模式，都會輸出「全形句點」。
詳細內容請參考 開發者必學的多語言輸入法設定技巧：使用 Windows PowerShell 快速建立 文章進行設定。
-
install.angular.tw -
vscode.angular.tw轉址到 Angular Extension Pack VS Code 擴充套件
-
devtools.angular.tw轉址到 Angular DevTools 瀏覽器擴充套件 (Chrome/Edge)
-
fb.angular.tw -
yt.angular.tw -
ts.angular.tw轉址到 TypeScript 新手指南 免費電子書
-
cli.angular.tw轉址到 新手老手都該學會的 Angular CLI 命令列工具應用技巧 教學影片
-
rx6.angular.tw轉址到 RxJS 6 新手入門 教學影片
-
熟悉 Angular CLI 命令列工具
我在 2022/5/12 有舉行過一場將近 2 小時的直播分享，主題是《新手老手都該學會的 Angular CLI 命令列工具應用技巧》，內容深入淺出，建議大家可以花點時間看看！ 👍
-
TypeScript 新手指南
這是一本免費的電子書，本書 TypeScript 新手指南 的原文來自於簡體中文的 TypeScript 入门教程 專案，並將其內容翻譯為正體中文版。
建議多利用 TypeScript: TS Playground 來體驗 TypeScript 開發。
-
使用 npm 安裝套件時都會出現「指定的路徑、檔名，或是兩者都太長。完整的檔名必須少於 260 個字元，並且目錄名稱必須少於 248 個字元」錯誤訊息怎麼辦？
-
請問我公司因為需要設定代理伺服器 (Proxy Server) 才能上網，請問要做那些設定才好呢？
-
請問我的
tsc -v所回傳的版本一直都是舊版，執行npm install -g typescript也執行好幾次了，為什麼會這樣呢？ -
如何將 npm 升級到最新版本
Node.js 的套件管理器
npm會連同 Node.js 一併安裝，一般來說都不需要手動升級 npm 版本。網路上常見的 npm 升級方法，基本上都不適用於 Windows 平台，如果你想要在 Windows 單獨升級 npm 版本，建議你直接升級 Node.js 版本即可，不要真的去升級 npm 版本。其他作業系統平台可以透過
npm i -g npm@latest直接進行升級。如果真的想在 Windows 單獨升級 npm 的話，也可參考 npm-windows-upgrade 的說明進行升級。
{ "window.zoomLevel": 0, "explorer.openEditors.visible": 0, "workbench.sideBar.location": "right", "workbench.iconTheme": "vscode-icons", // "workbench.sideBar.location": "right", // 需下載安裝 Fira Code 字型 (安裝 OTF 格式) // https://github.com/tonsky/FiraCode/releases // 需下載客製化過的 Microsoft YaHei Mono 字型 // https://github.com/doggy8088/MicrosoftYaHeiMono-CP950 "editor.fontFamily": "'Fira1 Code Retina', 'Microsoft YaHei Mono', 'Fira Code', Consolas, 'Courier New', monospace, 細明體, 'Source Code Pro', 'Noto Mono', '文泉驛等寬正黑', 'Noto Sans Mono CJK TC Regular'", // 要啟用連體字型(Fira Code)必須將以下設定打開 "editor.fontLigatures": true, "editor.renderIndentGuides": false, "editor.multiCursorModifier": "ctrlCmd", "editor.minimap.enabled": false, "editor.wordWrap": "on", // 停用擴充功能建議功能 (這塊很占空間) "extensions.ignoreRecommendations": true, "prettier.singleQuote": true, "typescript.preferences.quoteStyle": "single", "typescript.referencesCodeLens.enabled": true, "typescript.updateImportsOnFileMove.enabled": "always", "movets.skipWarning": true, "git.enableCommitSigning": false, "git.enableSmartCommit": true, "git.confirmSync": false, "files.associations": { "dockerfile.*": "dockerfile", "dockerfile_*": "dockerfile", "dockerfile-*": "dockerfile", "*.csproj": "msbuild", "*.bazelrc": "shellscript" }, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe", "auto-rename-tag.activationOnLanguage": [ "html", "xml", "php" ], "todohighlight.include": [ "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss", "**/*.cs" ], "docker.languageserver.diagnostics.instructionJSONInSingleQuotes": "warning", "terminal.integrated.shellArgs.windows": [ "-NoLogo" ], "breadcrumbs.enabled": true, "explorer.confirmDragAndDrop": false, "msbuildProjectTools.experimentalFeatures": [], "msbuildProjectTools.nuget.includePreRelease": true, "msbuildProjectTools.nuget.newestVersionsFirst": true, "msbuildProjectTools.logging.seq.level": "Verbose", "markdown-preview-enhanced.breakOnSingleNewLine": true, "editor.tabCompletion": "on", "editor.suggest.localityBonus": true, "git.rebaseWhenSync": true, "git.alwaysShowStagedChangesResourceGroup": true, "markdown.preview.openMarkdownLinks": "inEditor", "yaml.format.enable": true, "yaml.format.singleQuote": true, "yaml.validate": false, "sync.gist": "583a09cd9e5deda41b10ea916fb94522", "sync.autoDownload": false, "sync.autoUpload": false, "sync.forceDownload": false, "sync.quietSync": false, "sync.removeExtensions": true, "sync.syncExtensions": true, "search.showLineNumbers": true, "workbench.editor.highlightModifiedTabs": true, "todohighlight.isEnable": true, "git.autofetch": true, "diffEditor.ignoreTrimWhitespace": false, "html.format.preserveNewLines": false, "html.format.wrapAttributes": "aligned-multiple", "editor.cursorSmoothCaretAnimation": true, "javascript.updateImportsOnFileMove.enabled": "always", // "workbench.startupEditor": "readme", "workbench.list.horizontalScrolling": true, "files.trimTrailingWhitespace": true, "editor.trimAutoWhitespace": false, "latex-workshop.view.pdf.viewer": "tab", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration", "workbench.list.keyboardNavigation": "filter", "latex-workshop.message.update.show": false, "eslint.validate": [ "javascript", "typescript" ], "[markdown]": { "editor.defaultFormatter": "yzhang.markdown-all-in-one", "editor.minimap.enabled": false, "editor.quickSuggestions": { "other": false, "comments": false, "strings": false } }, "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "update.mode": "manual", "workbench.tips.enabled": false, "workbench.editor.showIcons": false, "workbench.statusBar.feedback.visible": false, "terminal.integrated.showExitAlert": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "gremlins.characters": { "0003": { "description": "end of text", "level": "warning" }, "00a0": { "description": "non breaking space", "level": "info" }, "200b": { "zeroWidth": true, "description": "zero width space", "level": "error" }, "200c": { "zeroWidth": true, "description": "zero width non-joiner", "level": "warning" }, "200d": { "zeroWidth": true, "description": "zero width non-joiner", "level": "warning" }, "200e": { "zeroWidth": true, "description": "left-to-right mark", "level": "error" }, "201c": { "description": "left double quotation mark", "level": "warning" }, "201d": { "description": "right double quotation mark", "level": "warning" }, "202c": { "zeroWidth": true, "description": "pop directional formatting", "level": "error" }, "202d": { "zeroWidth": true, "description": "left-to-right override", "level": "error" }, "202e": { "zeroWidth": true, "description": "right-to-left override", "level": "error" }, "fffc": { "zeroWidth": true, "description": "object replacement character", "level": "error" } }, "peacock.favoriteColors": [ { "name": "Angular Red", "value": "#b52e31" }, { "name": "Auth0 Orange", "value": "#eb5424" }, { "name": "Azure Blue", "value": "#007fff" }, { "name": "C# Purple", "value": "#68217A" }, { "name": "Gatsby Purple", "value": "#639" }, { "name": "Go Cyan", "value": "#5dc9e2" }, { "name": "Java Blue-Gray", "value": "#557c9b" }, { "name": "JavaScript Yellow", "value": "#f9e64f" }, { "name": "Mandalorian Blue", "value": "#1857a4" }, { "name": "Node Green", "value": "#215732" }, { "name": "React Blue", "value": "#00b3e6" }, { "name": "Something Different", "value": "#832561" }, { "name": "Vue Green", "value": "#42b883" } ], "team.showWelcomeMessage": false, "explorer.incrementalNaming": "smart", "editor.codeLens": false, "markdown.links.openLocation": "beside", "todo-tree.highlights.enabled": true, "todo-tree.highlights.defaultHighlight": { "foreground": "#b04f00", "background": "#d9cf04", "type": "text-and-comment" }, "todo-tree.filtering.excludeGlobs": [ "**/*.md" ], "workbench.colorTheme": "Visual Studio Light", "extensions.showRecommendationsOnlyOnDemand": true, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "editor.codeActionsOnSave": { "source.fixAll": true }, "omnisharp.enableRoslynAnalyzers": true, "omnisharp.enableEditorConfigSupport": true, "editor.linkedEditing": true, "workbench.editor.untitled.labelFormat": "name", "editor.minimap.renderCharacters": false, "terminal.integrated.rendererType": "canvas", "editor.accessibilitySupport": "off", "vsicons.dontShowNewVersionMessage": true }