2017-10-19 265 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