2017-10-19 262 views
5

我知道Angular和ASP.NET Core 2的基礎知識,但並不能讓我理解這個模板的工作原理。ASP.NET Core 2中的Angular CLI角模板?

我嘗試使用Visual Studio代碼中的Angular CLI生成組件,但是它說我沒有CLI。我認爲它是保持CLI並允許模板附帶的所有酷炫東西的webpack thingy,但是有沒有辦法使用CLI?或者,我是否有通過創建文件和添加依賴來手動生成組件?

我找不到任何有關該模板或使用它的教程的文檔。

+1

你安裝CLI? 'npm install @ angular/cli --global' 據我記得模板項目沒有包括CLI(至少在第一個模板版本的核心1.0) – Brivvirs

+0

我做過,是的。但是,當我安裝它並嘗試像「ng g c temp」這樣的命令來創建組件時,出現錯誤,提示「無法在'.angular-cli.json中找到任何應​​用程序」。如果我從一個不同的項目複製現有的angular-cli.json文件,我會得到「找不到新組件的NgModule」。 我可能錯過了此模板中需要的一些設置步驟...... VS2017列出了有關缺少@ angular/core和不同相關事項的84個錯誤。 – Nech

+1

https://stackoverflow.com/questions/46268181/i-cant-add-new-component-with-angular-cli-in-asp-net-core-spas –

回答

4

首先,全球範圍內安裝角CLI後:

npm install @angular/[email protected] -g

你要你用這個命令主要項目之外首先創建一個角項目:

ng new hello-world

現在,轉到項目目錄並將.angular-cli.json文件複製到您的主要dot網絡核心項目的根目錄中。 然後,你必須編輯這個文件的這一部分:

"root" : "src"變化"root" : "ClientApp"

接下來,你必須在你的項目的根目錄來安裝angularCli開發:

cd DotNetCoreProject

npm install @angular/[email protected] --save-dev

一切都完成了!

現在,去你的項目的組件目錄

cd ClientApp/app/components

,並讓您的組件在組件目錄在終端:

ng g c MyComponent --module='app.module.browser.ts'

+2

你可以避免需要指定「--module = 'app.module.browser.ts'「,如果您還進行以下更改:將app.module.shared.ts重命名爲app.module.ts。在app.module.browser.ts和app.module.server.ts中更改對此文件的引用。現在你可以只寫「ng g c MyComponent」,導入將顯示在app.module.ts中。 –

+0

@JohnPankowicz這不工作了,至少不是沒有移動其他.module文件到一個子文件夾 – RSinohara

0

在.angular-cli.json部分 「應用程序」 替換 「./src」 到 「SRC」

「應用」:[{ 「根」: 「SRC」, 「OUTDIR」 :「dist」,

3

該visual studio支持帶有Asp的Angular CLI。網絡核心項目 在角項目模板在asp.net 2.1核心的最新版本。

  1. 如果使用ASP.NET 2.0的核心,安裝最新版本的角項目 模板:

    1.1。打開Visual Studio的

    1.2。去工具 - > NuGet包管理器 - >程序包管理器控制檯,並運行此命令:

    DOTNET新--install Microsoft.DotNet.Web.Spa.ProjectTemplates

如果你有ASP.NET核心2.1,就沒有必要進行安裝。

  • 爲項目創建一個空的文件夾,並運行CMD作爲管理員和導航到 該文件夾(或者,按下Alt + d中的空文件夾和寫CMD作爲管理員) 。

  • 創建下面的命令一個新的角度項目:

    DOTNET新的角度-o我的新應用程序內
    CD我的新應用程序內

  • 的角度應用,駐留在ClientApp子目錄, 旨在用於所有UI的擔憂。

  • 轉到ClientApp文件夾 'CD ClientApp' 命令。
  • 如果您還沒有安裝angular-cli軟件包,請運行'npm install -g @ angular/cli'命令。

    enter image description here

  • 運行 'NPM安裝' 命令用於安裝node_modules。
  • enter image description here

  • 運行 '納剋剋碳testComponent' 用於創建testComponent命令(一個角-CLI命令)。
  • enter image description here

    加入到溶液探險

    enter image description here

    運行每個角CLI命令的檢測成分:

    enter image description here

    好運

    Microsoft

    Angular CLI