Skip to content

Instantly share code, notes, and snippets.

@doggy8088
Last active March 13, 2024 10:22
Show Gist options
  • Save doggy8088/15e434b43992cf25a78700438743774a to your computer and use it in GitHub Desktop.
Save doggy8088/15e434b43992cf25a78700438743774a to your computer and use it in GitHub Desktop.
Angular 17 開發環境說明

Angular 17 開發環境說明

為了能讓大家能夠順利的建立起 Angular 17 開發環境,以下是需要安裝的相關軟體與安裝步驟與說明。

Angular LOGO

[ 作業系統 ]

  • Windows 10 以上版本
  • Mac OS X 10.6 以上版本

[ 瀏覽器 ]

畢竟 Angular 是一套純前端的開發框架,最終的成本一定是網頁的型態呈現,所以你必須要有一個瀏覽器來進行測試,以下是我們建議的瀏覽器:

請下載 Angular 官方推出的 Angular DevTools 瀏覽器擴充套件,目前支援 Chome extensionFirefix Add-ons 版本。

[ 安裝 Git 工具 ]

如果你是第一次使用 Git 版控,請開啟命令提示字元終端機視窗,並輸入以下指令進行設定,這是使用 Git 之前的必要步驟

  • 設定您的名稱: git config --global user.name {您的名稱}
  • 設定電子郵件: git config --global user.email {您的電子郵件}

[ 安裝 Node.js 工具 ]

我們在 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 v17 的 Node.js 執行環境,必須要安裝 v18.13.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.13.0 或以上版本!

[ 安裝 Angular CLI 工具 ]

開發 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

    image

    如果你身處離線環境(air-gapped network),請參考我的 前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件 文章進行安裝。

  • 驗證安裝結果的指令

    ng version

    確認 Angular CLI 為 17.0.8 以上版本

    ng version

[ 驗證 Angular CLI 執行 ]

  • 請依據下列步驟測試 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. 🎉 字樣,就代表設定成功!👍

    image

[ 開發工具 ]

開發 Angular 應用程式的工具,我們建議使用 Visual Studio Code 為主要的開發工具,請記得安裝或更新至最新版。

除此之外,也請安裝以下幾個重要的擴充套件:

  1. 安裝 Angular Extension Pack 擴充套件

    由於同名的擴充套件好幾套,請務必安裝作者為 Will 保哥 的版本!

  2. 安裝 Prettier - Code formatter 擴充套件

    進階設定請參考 設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格 文章進行設定。

[ 調整 Windows 輸入法設定 ]

如果你使用 Windows 作業系統來開發 Angular 應用程式,使用 Visual Studio Code 工具時,有三個相當重要的鍵盤快速鍵,經常會被中文版的 Windows 作業系統內建的「微軟新注音」輸入法給干擾,導致怎樣都無法用鍵盤按出好用功能。

  • Ctrl + Space

    在各種開發工具中,這個快速鍵通常用來觸發 IntelliSense 輸入建議。

    但是當系統切換到 中文 語言時,主要用來啟用/停用中文輸入法。

  • Ctrl + ,

    在許多應用程式的快速鍵中,這個快速鍵通常用來開啟 設定 視窗。

    但是當系統切換到 中文 語言時,無論你切換到中文或英文模式,都會輸出「全形逗點」。

  • Ctrl + .

    在各種開發工具中,這個快速鍵通常用來觸發 Code Actions 或 Quick Fixes 等程式碼重構建議。

    但是當系統切換到 中文 語言時,無論你切換到中文或英文模式,都會輸出「全形句點」。

詳細內容請參考 開發者必學的多語言輸入法設定技巧:使用 Windows PowerShell 快速建立 文章進行設定。

新手入門學習資源

  1. 熟悉 Angular CLI 命令列工具

    我在 2022/5/12 有舉行過一場將近 2 小時的直播分享,主題是《新手老手都該學會的 Angular CLI 命令列工具應用技巧》,內容深入淺出,建議大家可以花點時間看看! 👍

    新手老手都該學會的 Angular CLI 命令列工具應用技巧

  2. TypeScript 新手指南

    這是一本免費的電子書,本書 TypeScript 新手指南 的原文來自於簡體中文的 TypeScript 入门教程 專案,並將其內容翻譯為正體中文版。

    建議多利用 TypeScript: TS Playground 來體驗 TypeScript 開發。

常見問題解答

  1. 使用 npm 安裝套件時都會出現「指定的路徑、檔名,或是兩者都太長。完整的檔名必須少於 260 個字元,並且目錄名稱必須少於 248 個字元」錯誤訊息怎麼辦?

  2. 請問我公司因為需要設定代理伺服器 (Proxy Server) 才能上網,請問要做那些設定才好呢?

  3. 請問我的 tsc -v 所回傳的版本一直都是舊版,執行 npm install -g typescript 也執行好幾次了,為什麼會這樣呢?

  4. 如何將 npm 升級到最新版本

    Node.js 的套件管理器 npm 會連同 Node.js 一併安裝,一般來說都不需要手動升級 npm 版本

    網路上常見的 npm 升級方法,基本上都不適用於 Windows 平台,如果你想要在 Windows 單獨升級 npm 版本,建議你直接升級 Node.js 版本即可,不要真的去升級 npm 版本。其他作業系統平台可以透過 npm i -g npm@latest 直接進行升級。

    如果真的想在 Windows 單獨升級 npm 的話,也可參考 npm-windows-upgrade 的說明進行升級。

@jinntser
Copy link

jinntser commented Jul 12, 2019

Node.js 的最低版本 官方文件 是寫 v10.9+,若用 NVM 管理 Node.js 版本的話最新 stable 版本似乎只到 v10.14.1

@doggy8088
Copy link
Author

@jinntser 沒錯,我已經調整了文件,修改為 至少需要 v10.9 以上版本,多謝!

@hsuchihting
Copy link

保哥您好,
想請問使用 Angular 開發專案,開發環境建議使用 Win10 還是 OS 比較推薦呢?
還是要看團隊開發習慣與專案內容?

@doggy8088
Copy link
Author

@hsuchihting 要用 Windows 10 或 macOS 都沒差,都可以開發,看個人習慣即可。

@winsonexe
Copy link

保哥,可以分享你現在vscode的設定檔嗎? 好像跟以前的不太一樣,謝謝。

@doggy8088
Copy link
Author

@winsonexe 我的 VSCode 經常在改設定,當然不太一樣 😅

你想看什麼的設定啊?

@winsonexe
Copy link

@winsonexe 我的 VSCode 經常在改設定,當然不太一樣 😅

你想看什麼的設定啊?

喔喔,不好意思是使用者設定檔settings.json

@doggy8088
Copy link
Author

保哥,可以分享你現在vscode的設定檔嗎? 好像跟以前的不太一樣,謝謝。

{
    "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
}

@xavier-che
Copy link

請問12版本,是不再像以前版本那樣開著終端機和顯示錯誤訊息嗎?
剛嘗試安裝版本12,發現終端機自動關掉但仍可以開啟port 4200,不過卻無法看到詳細錯誤資訊了
不曉得這是12的特性還是我有設定上的問題,謝謝!

@doggy8088
Copy link
Author

@xavier-che 應該是你誤會了,關掉應該是連不上才對,你應該是有另一個視窗正在執行中。

@xavier-che
Copy link

@xavier-che 應該是你誤會了,關掉應該是連不上才對,你應該是有另一個視窗正在執行中。

所以我的狀況是不正常的! 好,那我來述說一下我安裝12的心路歷程。
我的OS為Win10,Node.js為12.14.1,CLI已經用npm更新到12。
其他專案的版本號為11.2.11,但仍然可以用終端機成功compile,並無出現我所述說的狀況。

最一開始是將某個專案從版本9更新到12,爾後執行ng serve --open,終端機顯示compile成功(Browser application bundle generation complete. ..... ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **)。但奇怪的是,並非像先前一樣會自動開啟視窗,於是我手動打開瀏覽器,並前往localhost:4200,畫面顯示「無法連上這個網站」。

想說可能是版本號一次跳太多了,導致有些地方出錯,所以我就創建新的專案(ng new)。
創建好後,一樣執行ng serve --open,結果依然,是無法成功開啟:4200的。
但我發現了一件事,每當我執行compile,在compile結束前,我的趨勢科技(防毒軟體)總會跳出訊息,於是我前往查看log,
發現在「行為監控」的選項中,出現了「惡意程式行為封鎖」,而該程式為「C:\Program Files\nodejs\node.exe」。
於是我從趨勢科技的設定中,特例允許這項程式的執行,然後再重新compile一次,結果成功自動跳出:4200的視窗,但終端機卻自動關掉了。
就算終端機關掉,我仍然可以操作網頁,也可以在程式中進行修改儲存,網頁也會自動重新compile。(當然在工作管理員的背景處理程序,是有執行Node.js:server side Javascript,必須手動結束這個程序,:4200才會被關閉。在應用程式中並沒有顯示命令提示字元等程式)

不曉得有沒有其他人也遇到和我一樣的狀況,莫非我運氣真的很差,屬於個案QQ,
因為版本11或更早的專案是可以成功執行的,趨勢科技也沒有阻擋,只有在12遇到這個狀況,也找不到相關解決方法。

@xavier-che
Copy link

後記:
將Node.js更新到14.17.0後,問題依然沒有解決。

目前解決方式:
啟動專案時,指令只下 「ng serve」(拿掉--open,即compile後不自動開啟網頁),則不須另外設定趨勢科技,即可成功compile並且不會自動關掉命令提示字元視窗。
但每每在compile時總會出現「5 unchanged chunks」的提示(專案為乾淨且由指令ng new新創建的)

以上給跟我遇到一樣問題的人參考,若有更好的解決方式也歡迎提供,謝謝!

@doggy8088
Copy link
Author

看來是防毒軟體造成的問題,這之前也很多人遇過,你應該不是個案。我都用 Windows 10 內建的防毒軟體,沒有這個問題。

@xavier-che
Copy link

Angular釋出補丁版本12.0.1了
更新後一切都正常了!
ng serve --open 可以成功compile且跳出網頁,命令提示字元視窗也不會關閉

@doggy8088
Copy link
Author

@xavier-che 你說的沒錯,還真的是個 Bug,哈 😅

@crazy-hour-ai
Copy link

使用
brew install node 會出現一下問題。
Warning: The post-install step did not complete successfully
You can try again using:
brew postinstall node

但是執行了
brew postinstall node
node -v
會出現一下問題。
-bash: node: command not found

目前只能到官網下載node 安裝

@doggy8088
Copy link
Author

@crazy-hour-ai 能裝成功就好,你的問題應該只是環境變數沒有設定好而已,也許環境有點亂,需要整理一下。

@jjjhong91
Copy link

如果公司沒辦法連對外網路,要如何將 Angular 相關的套件完整下載下來,然後透過資料交換方式至公司私人網路,然後上傳至自己架設的私有 registry (proget)?

@stormchen
Copy link

請問一下按照文件在Windows 10安裝angular在做ng new dwmo1時會有以下error,是否有解決方式?


CREATE demo1/tsconfig.app.json (277 bytes)
CREATE demo1/tsconfig.spec.json (287 bytes)
CREATE demo1/.vscode/extensions.json (134 bytes)
CREATE demo1/.vscode/launch.json (490 bytes)
CREATE demo1/.vscode/tasks.json (980 bytes)
CREATE demo1/src/main.ts (256 bytes)
CREATE demo1/src/favicon.ico (15086 bytes)
CREATE demo1/src/index.html (304 bytes)
CREATE demo1/src/styles.css (81 bytes)
CREATE demo1/src/app/app.component.html (20239 bytes)
CREATE demo1/src/app/app.component.spec.ts (942 bytes)
CREATE demo1/src/app/app.component.ts (314 bytes)
CREATE demo1/src/app/app.component.css (0 bytes)
CREATE demo1/src/app/app.config.ts (235 bytes)
CREATE demo1/src/app/app.routes.ts (80 bytes)
CREATE demo1/src/assets/.gitkeep (0 bytes)

  • Installing packages (npm)...'npm' ���O�����Υ~���R�O�B�i��檺�{���Χ妸�ɡC
    × Package install failed, see above.
    The Schematic workflow failed. See above.
    PS D:\SVN source\MyApp> ng version


    / \ _ __ __ _ _ | | __ _ _ __ / | | | |
    / △ \ | '
    \ / _ | | | | |/ _ | '
    | | | | | | |
    / ___ | | | | (
    | | || | | (| | | | || | | |
    // __| ||_, |_,||_,|| _|||
    |___/

Angular CLI: 17.1.0
Node: 20.10.0
Package Manager: npm
OS: win32 x64

Angular: undefined
...

Package Version

@angular-devkit/architect 0.1701.0 (cli-only)
@angular-devkit/core 17.1.0 (cli-only)
@angular-devkit/schematics 17.1.0 (cli-only)
@schematics/angular 17.1.0 (cli-only)

PS D:\SVN source\MyApp> node -v
v20.10.0
PS D:\SVN source\MyApp>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment