Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 11 開發環境說明

Angular 11 開發環境說明

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

[ 作業系統 ]

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

[ 套件管理器 ( Mac OS X Only ) ]

[ 瀏覽器 ]

知名的 Angular 偵錯套件 Augury 目前尚未支援 Angular 9/10/11 Ivy 版本。你可以定期關注 Augury 官網或 GitHub 相關議題。

[ 安裝 Git 工具 ]

首次使用 Git 必須做的設定 (必要設定)

  • 請開啟命令提示字元或終端機視窗,並輸入以下指令進行設定,這是使用 Git 之前的必要步驟
    • 設定您的名稱: git config --global user.name 您的名稱
    • 設定電子郵件: git config --global user.email 您的電子郵件

[ 開發工具 ]

[ 安裝 Node.js 工具 ]

  • 建議安裝 Node.js v14.16.0 LTS 以上版本 (至少需要 v12.13 以上版本)
    • 如果是 Windows 用戶,若使用 Chocolatey 的話,可以用 choco install nodejs-lts -y 指令安裝
    • 如果是 Windows 用戶且已使用 Chocolatey 安裝,可以用 choco upgrade nodejs-lts -y 指令升級
    • 如果是 Mac 用戶,若使用 Brew 的話,可以用 brew install node 指令安裝
  • 驗證安裝結果的指令
    • node -v
      • 確認為 v14.16.0 或以上版本
    • npm -v
      • 確認為 v6.14.11 以上版本
  • 離線安裝注意事項

[ 安裝 Angular CLI 工具 ]

  • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X),並執行以下指令安裝 npm 套件 (這個動作會執行 1 ~ 3 分鐘):

    npm install -g @angular/cli

    如果是 macOS 環境,可能需要使用 sudo npm install -g @angular/cli 命令才能成功安裝。

    由於預設 Visual Studio Code 在 Windows 10 下,預設會用 Windows PowerShell 開啟終端機模式。如果你想在 Windows PowerShell 下執行 ng 命令,必須先執行以下命令才可以正常執行:

    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

    image

  • 驗證安裝結果的指令

    • ng version
      • 確認 Angular CLI 為 11.2.3 以上版本

[ 驗證 Angular CLI 執行 ]

  • 請依據下列步驟測試 Angular CLI 是否可以正常執行:

    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
    • 建立 demo1 專案資料夾與 Angular 專案骨架,請執行下列指令:
      • ng new demo1 --routing --style css --strict=false
      • 這個過程會建立 Angular 專案檔案,自動加入 Git 版控,並自動安裝所有 npm 相依套件!
    • 進入 demo1 目錄
      • cd demo1
    • 啟動 Angular 開發伺服器並自動開啟網頁 ( http://localhost:4200/ )
      • npm startng serve --open
  • 畫面上只要出現 demo1 app is running! 字樣,就代表設定成功!👍

    image

常見問題解答

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

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

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

  4. 若是用 Mac OS X 電腦,覺得每次安裝 global npm 模組都要打 sudo 很麻煩的話,可以建議用以下命令重裝 node 與 npm
    參考文章:How to use npm global without sudo on OSX

    brew install node --without-npm
    mkdir "${HOME}/.npm-packages"
    echo NPM_PACKAGES="${HOME}/.npm-packages" >> ${HOME}/.bashrc
    echo prefix=${HOME}/.npm-packages >> ${HOME}/.npmrc
    curl -L https://www.npmjs.org/install.sh | sh
    echo NODE_PATH=\"\$NPM_PACKAGES/lib/node_modules:\$NODE_PATH\" >> ${HOME}/.bashrc
    echo PATH=\"\$NPM_PACKAGES/bin:\$PATH\" >> ${HOME}/.bashrc
    echo source "~/.bashrc" >> ${HOME}/.bash_profile
    source ~/.bashrc
  5. 如何將 npm 升級到最新版本

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

    網路上常見的 npm 升級方法,基本上都不適用於 Windows 平台,你必須參考 npm-windows-upgrade 的說明進行升級動作。

    1. 安裝 npm-windows-upgrade 套件

      npm install --global --production npm-windows-upgrade

    2. 執行升級動作

      npm-windows-upgrade --npm-version latest

    其他平台可以透過 npm i -g npm@latest 直接進行升級動作。

@passerbyid

This comment has been minimized.

Copy link

@passerbyid passerbyid commented May 11, 2017

使用 homebrew 安裝 node 建議用 brew install node@6,不然會裝到 7。

@karocksjoelee

This comment has been minimized.

Copy link

@karocksjoelee karocksjoelee commented May 11, 2017

不是很了解 MAC 使用者開發Angular 4 要用 Homebrew的原因 ...

@jeffwu85182

This comment has been minimized.

Copy link

@jeffwu85182 jeffwu85182 commented May 15, 2017

@passerbyid 其實裝到 7 也是可以的,安裝 6 或 7 都可以正常執行 Angular CLI。

@karocksjoelee Homebrew 屬於非必要的安裝項目,主要是方便管理需要用到的環境套件,像是 node.js, git, nvm, ... 等,當然也能直接安裝 git 或 node.js,因此若有使用 Homebrew 的話,就直接透過指令安裝與管理也是可以的。

@roycrxtw

This comment has been minimized.

Copy link

@roycrxtw roycrxtw commented Jul 22, 2017

很清楚的說明!! Thanks

@litaksang

This comment has been minimized.

Copy link

@litaksang litaksang commented Dec 9, 2017

我用VS code mac community 7.3 ,文中所述的extension都不能裝?

@doggy8088

This comment has been minimized.

Copy link
Owner Author

@doggy8088 doggy8088 commented Jul 11, 2018

@litaksang 這些 extension 都只能安裝在 Visual Studio Code 喔!

@jinntser

This comment has been minimized.

Copy link

@jinntser jinntser commented Jul 12, 2019

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

@doggy8088

This comment has been minimized.

Copy link
Owner Author

@doggy8088 doggy8088 commented Jul 12, 2019

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

@hsuchihting

This comment has been minimized.

Copy link

@hsuchihting hsuchihting commented Aug 5, 2020

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

@doggy8088

This comment has been minimized.

Copy link
Owner Author

@doggy8088 doggy8088 commented Aug 5, 2020

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

@winsonexe

This comment has been minimized.

Copy link

@winsonexe winsonexe commented Mar 2, 2021

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

@doggy8088

This comment has been minimized.

Copy link
Owner Author

@doggy8088 doggy8088 commented Mar 2, 2021

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

你想看什麼的設定啊?

@winsonexe

This comment has been minimized.

Copy link

@winsonexe winsonexe commented Mar 4, 2021

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

你想看什麼的設定啊?

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

@doggy8088

This comment has been minimized.

Copy link
Owner Author

@doggy8088 doggy8088 commented Mar 5, 2021

保哥,可以分享你現在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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment