[英]Angular CLI in ASP.NET Core 2 Angular template?
I know the basics of Angular and ASP.NET Core 2, but not on the level that would allow me to understand how this template works. 我知道Angular和ASP.NET Core 2的基础知识,但不是能让我理解这个模板是如何工作的。
I tried generating components using Angular CLI in Visual Studio Code, however, it says I don't have the CLI. 我尝试在Visual Studio Code中使用Angular CLI生成组件,但是,它说我没有CLI。 I think it's the webpack thingy that keeps the CLI and allows all the cool stuff that comes with the template, but is there a way to use the CLI despite that?
我认为这是保持CLI并允许模板附带的所有酷炫内容的webpack,但有没有办法使用CLI,尽管如此? Or do I have, for example, generate components manually by creating the files and adding dependecies?
或者,我是否通过创建文件和添加依赖项手动生成组件?
I can't find any documentation on the template or a tutorial that would use it. 我找不到关于模板或使用它的教程的任何文档。
First of all after installing angular cli globally: 首先在全局安装angular cli之后:
npm install @angular/cli@latest -g
You have to first create an angular project outside your main project with this command: 您必须首先使用以下命令在主项目外创建一个角度项目:
ng new hello-world
Now, go to project directory and copy .angular-cli.json
file into the root of your main dot net core project. 现在,转到项目目录并将
.angular-cli.json
文件复制到主dot net core项目的根目录中。 Then you have to edit this part of the file: 然后你必须编辑文件的这一部分:
"root" : "src"
change to"root" : "ClientApp"
"root" : "src"
更改为"root" : "ClientApp"
Next, you have to install angularCli dev in your root of your project: 接下来,您必须在项目的根目录中安装angularCli dev:
cd DotNetCoreProject
npm install @angular/cli@latest --save-dev
Everythings was done! 万事万物都完成了!
Now, go to your component directory of your project: 现在,转到项目的组件目录 :
cd ClientApp/app/components
and make your component in component directory in terminal: 并在终端的组件目录中创建您的组件:
ng gc MyComponent --module='app.module.browser.ts'
The visual studio supports Angular CLI with Asp.Net Core project in the newest version of Angular project template in asp.net core 2.1. Visual Studio在asp.net core 2.1中最新版本的Angular项目模板中支持Angular CLI和Asp.Net Core项目。
If using ASP.NET Core 2.0, install the latest version of Angular project template: 如果使用ASP.NET Core 2.0,请安装最新版本的Angular项目模板:
1.1. 1.1。 Open the visual studio
打开视觉工作室
1.2. 1.2。 Go to tools -> NuGet Package Manager -> Package Manager Console and run this command:
转到工具 - > NuGet包管理器 - >包管理器控制台并运行以下命令:
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates dotnet new - 安装Microsoft.DotNet.Web.Spa.ProjectTemplates
If you have ASP.NET Core 2.1, there's no need to install it. 如果您有ASP.NET Core 2.1,则无需安装它。
Create an empty folder for your project and run cmd as administrator and navigate to this folder(alternatively, press Alt + D in an empty folder and write cmd as administrator). 为项目创建一个空文件夹并以管理员身份运行cmd并导航到此文件夹(或者,在空文件夹中按Alt + D并以管理员身份写入cmd)。
Create a new angular project with below commands: 使用以下命令创建一个新的角度项目:
dotnet new angular -o my-new-app dotnet new angular -o my-new-app
cd my-new-app cd my-new-app
The Angular app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns. 位于ClientApp子目录中的Angular应用程序旨在用于所有UI问题。
If you haven't installed the angular-cli package, run 'npm install -g @angular/cli' command. 如果尚未安装angular-cli软件包,请运行'npm install -g @ angular / cli'命令。
The test-component added to solution explorer 测试组件添加到解决方案资源管理器中
Run each of Angular CLI commands: 运行每个Angular CLI命令:
Good Luck 祝好运
in .angular-cli.json in part "apps" replace "./src" to "src" 在.angular-cli.json中,部分“apps”将“./src”替换为“src”
"apps": [ { "root": "src", "outDir": "dist",
“apps”:[{“root”:“src”,“outDir”:“dist”,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.