how to set up asp.net angular 2 project using Angu

问题:

I set up angular 2 project using angular-cli and it works prefect with me. there is any way of add this project to asp.net core in visual studio

回答1:

I would move the Angular 2 project into the root of the ASP.NET Core project, and then move the contents of the Angular project's src folder into wwwroot - and rename any reference to the src folder.

This fits nicely together since wwwroot is for the client application, and Angular 2 is exactly that.

回答2:

2017-06-16 Now that the players in this scenario have matured, my favorite solution for setting this up is Rick Strahl's AlbumViewer application. He has used it as a sample for his numerous blog posts on ongoing development of both technologies. It is the cleanest and most adaptable solution so far. It uses the Angular cli tool (built on top of Webpack) to run all development and production workflow.

The development is done in a separate website project in the solution and the production build process copies the contents of the Angular dist folder to wwwroot for the final production build. Clean, simple and easy to follow.

This is the best answer I have seen to this question so far. Combine angular-cli with asp.net core

From the research I have done on the subject, the two are not making it easy to develop each other in the same environment.

回答3:

I think you have to put cli project in a root of asp project, then set cli build output to wwwroot. Then you'll have to configure npm tasks bindings to make cli build running with asp build and another tasks for tests. That will let you use cli project on a build server (but you still have to configure build server to have npm and node, to update cli global and local packages the way described on their GitHub page. To be able to run project in debug side by side with asp debugging, you may need to manually ng serve during development and to set up CORS for asp app as ng serve will run on different address. You can use conditional enabling of CORS in asp configuration using environment checking.

回答4:

I separated my Angular2 app from my asp.net MVC core web application. If you want, you can put them in your MVC application, this is your personal decision to separate them or not, this solution works well with angular-cli or web-pack.

1- Use angular-cli(ng new your-app-name) or clone your web-pack from Git.

2- Create one new class library on your solution or you can create a folder in your existing ASP.Net MVC Core project. then copy all downloaded files from previous step.

3- find .angular-cli.json and edit "outDir". You need to enter your MVC Core wwwroot folder.

"apps": [
    {
      "root": "src",
      "outDir": "../Web.UI/wwwroot/app" //!if you separated your angular app from your MVC project,
      "outDir": "../wwwroot/app" //!if you have your angular and mvc app in a same project,
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.candidate.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app_andidate",
      "styles": [ "share/css/material.scss" ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
}

4- Open a command and drive into your Angular directory or project and use this command to publish your angular into MVC wwwroot/app directory.

5- You can use this command to publish your app in debug mode.

ng build --dev

and this command to publish your app in relese mode

ng build --output-hashing none --prod --aot 

6- create an Action in your MVC controller. I created a controller called AppController and my views/App/Index.cshtml is like this.

@section Heads{
    <base href="/App/Index/">
}
@section Scripts{
    <script type="text/javascript" src="/app/inline.bundle.js"></script>
    <script type="text/javascript" src="/app/polyfills.bundle.js"></script>
    <script type="text/javascript" src="/app/vendor.bundle.js"></script>
    <script type="text/javascript" src="/app/main.bundle.js"></script>
}
<app-root>Loading...</app-root>

You can use your views/Home/Index.html to host your angular app, if you need.

To avoid using a command I created 2 .bat files

1 - DebugBuild.bat

%cd%
ng build --dev

2 - ReleaseBuild.bat

%cd%
ng build --output-hashing none --prod --aot

Now you can simply dbclick on .bat file to publish your Angular app. Also you can run Angular application by using ng serve or npm start command from angular directory.