ASP.NET Core 2 Angular模板中使用Angular CLI？

Question

我了解Angular和ASP.NET Core 2的基础知识，但还不足以理解这个模板是如何工作的。

我尝试使用Angular CLI在Visual Studio Code中生成组件，但是它显示我没有安装CLI。我认为这是webpack的原因，它保持了CLI并允许所有与模板一起使用的酷炫工具，但是否有办法绕过它仍然使用CLI呢？或者例如创建文件并添加依赖项来手动生成组件？

我找不到任何关于该模板的文档或教程。

- Nech

---

你安装了CLI吗？ npm install @angular/cli --global 据我所记得，模板项目中没有包含CLI（至少在核心1.0的第一个模板版本中没有）。 - Brivvirs

是的，我试过了。但是，当我安装它并尝试使用“ng g c temp”这样的命令来创建组件时，会出现错误提示：“无法在.angular-cli.json中找到任何应用程序”。如果我从不同项目中复制现有的angular-cli.json文件，则会出现“找不到新组件的NgModule”的错误。 我可能错过了一些必要的设置步骤... VS2017列出了84个关于缺少@angular/core和其他相关内容的错误。 - Nech

https://dev59.com/eFYO5IYBdhLWcg3wI-Zw - R. Richards

Answer 1

首先，在全局安装angular cli之后：

npm install @angular/cli@latest -g

您需要使用以下命令在主项目之外创建一个angular项目：

ng new hello-world

现在，转到项目目录，并将 .angular-cli.json 文件复制到您的主dot net core项目的根目录。

然后，您需要编辑该文件的以下部分：

"root" : "src" 更改为 "root" : "ClientApp"

接下来，您需要在项目的根目录中安装angularCli dev：

cd DotNetCoreProject

npm install @angular/cli@latest --save-dev

一切都已完成！

现在，转到您的项目的组件目录：

cd ClientApp/app/components

并在终端中的组件目录中创建您的组件：

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

- Ashkan Rahmani

---

如果您进行以下更改，则可以避免需要指定“--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中。 - John Pankowicz

@JohnPankowicz，这个方法已经不再适用了，至少需要将其他的.module文件移动到子文件夹中。 - RSinohara

Answer 2

最新版本的Asp.Net Core项目模板中支持使用Angular CLI，Visual Studio可以进行集成。

1. 如果使用ASP.NET Core 2.0，请安装最新版的Angular项目模板：

   1.1. 打开Visual Studio

   1.2. 转到工具 -> NuGet包管理器-> 包管理器控制台并运行此命令：

   dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates

如果您有ASP.NET Core 2.1，则无需安装。

2. 为项目创建一个空文件夹，并以管理员身份运行cmd并导航到该文件夹（或在空文件夹中按Alt + D并输入管理员cmd）。

3. 使用以下命令创建新的Angular项目：

   dotnet new angular -o my-new-app
   cd my-new-app

Angular应用程序位于ClientApp子目录中，旨在用于所有UI相关事项。

4. 使用“cd ClientApp”命令进入ClientApp文件夹。

如果您还没有安装angular-cli软件包，请运行“npm install -g @angular/cli”命令。

5. 运行“npm install”命令安装node_modules。

6. 运行“ng g c testComponent”命令（一个Angular-CLI命令）创建一个testComponent。

测试组件添加到解决方案资源管理器中

运行每个Angular CLI命令：

祝你好运！

Microsoft

Angular CLI

- Iman Bahrampour

---

很好的解释，但恐怕对我没有用。我已经将我的asp.net core项目中的模板更新到最新的SPA Angular模板。我可以看到由困难生成的模板应用程序。我已经更新了angular CLI并从clientAPP目录执行了npm install，但不幸的是，所有生成的cli命令仍然会带回“无法在.angular-cli.json中找到任何应用程序”的错误消息。这让我不得不手动操作所有组件。我发现所有这些前端框架工具都比它们值得的痛苦多了！ - Jim Taliadoros

@Jim Taliadoros. 您好，能否上传项目的Angular-cli.json文件吗？ 请使用以下命令更新angular-cli包： 1-npm uninstall -g angular-cli 2-npm cache clean 3-npm install -g @angular/cli@latest - Iman Bahrampour

Answer 3

在 .angular-cli.json 文件中，将 "apps" 部分的 "./src" 替换为 "src"。

"apps": [ { "root": "src", "outDir": "dist",

- Алексей Пастушенко