I want to utilize Angular 4 in my ASP.NetCore 1.1 project, within Visual Studio 2017 (read as: *.csproj file)
Previously with ASP.NET Core 1.0 and Visual Studio 2015, you could simply add AngularJS (1.x.x) into the project.json as a dependency and it would wire itself in.
Now, with ASP.NetCore and VS2017, the project.json file has gone away, and the only documentation I can find refers to STARTING an Angular 4 project by using the CLI and using the CLI to generate a NEW angular app. I don't really want a new project or have to refactor everything I have created to provide a service to a separate UI project. I just want to augment my app with some added client-side UI experience.
Any suggestions?
Update
This questions has been getting a lot of views and the information is of little help so I'm providing this update.
Visual Studio 2017 (*.csproj)
Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: Use the built in template! Best option IMO.
Asp.Net Core 1.X + Angular (v2.0~v4.0)
Create VS Project.
Create Angular Project via Angular CLI
Configuration and setup details : Link
Visual Studio 2015 (project.json)
Tooling: up to version -preview2 - No further updates, all new .NET Core features will be moving to VS 2017
Asp.Net Core 1.X + Angular (v2.0~v4.0)
Asp.Net Core Template Pack
Note: I wouldn't endorse a bad VS Plugin, Mads Kristensen does good work.
Configuration and setup details : Blog post
Asp.Net Core 1.X + AngularJS (~1.5)
Configuration and setup details : Microsoft Tutorial
Asp.Net MVC 5 + AngularJS (~1.5)
Pluralsight Blog Guide
Notes: There are many other ways to get Angular to work with ASP.Net / .NetCore projects such as NPM, Bower, NuGet, etc. I tried to highlight the ones which are simple and actually work. Also these are in line with the direction Microsoft is moving in, according to the Pluralsight blog post above.
[i am aware you didn't ask this specifically but just wanted to share a thought which is very relevant in my opinion]
I was at the exactly the same point a few months ago and i decided going with angular cli. and i thank God i made that decision.
Uncomparably more clear and it actually put things how they should be: .net core web api backend and completely separated angular client. just exactly the same as you wouldn't put your iphone/android app into VS solution, there is no real reason to put angular one neither.
UPDATE
Either use MVC with Razor, OR use Angular as a SPA, and if you use Angular, use the Angular CLI.
And if you use angular, feed data into it with asp.net (core) Web Api as a REST backend
I can see how this is confusing, but dee zg is correct. You're going to want two separate projects. One will be the .net core backend api (REST) and the other will be the Angular 2 spa. There will be a complete separation.
With AngularJS, you could just drop in the js file into a razor view and call it a day. However, with Angular 2/4 and React, it's best to host each project in it's own solution. This might seem silly at the beginning, but when you build out your api, it can be easily future proofed by having the capability of also being consumed by mobile apps, desktop apps, etc.
I know there is a dotnet spa services angular cli powershell command for .net core, but it is really kind of a mess and actually outputs invalid html that could possibly be detrimental to SEO, etc. It's best, IMO, to just use the angular CLI in a separate project.
When it comes to production, you'll host the .net core api and the angular 2 projects separately.
It’s not totally clear to me what you mean by "Add Angular 4 to an ASP.NET Core Project", but one way to do this is the following:
Create an Angular 4 project (using angular-cli).
Create an ASP.NET Core project (using .NET Core CLI) in the same directory as the Angular project.
Adjust the webpack.config.js file (which is part of the angular-cli installation) in order to automatically put bundled files in the wwwroot directory (webpack will be responsible for this).
On my blog, I have a detailed tutorial demonstrating this approach.
I have been working on a Angular 4(SPA) and .Net core web api. You can check out the repository and you might get a better understanding.
I had to find solutions to many areas like authentication, authorisation, social login, MongoDB connector e.t.c
Hope this would save time for someone stumbling on this.
https://github.com/Sathya-B/Angular-.NetCore-MongoDB
I am using Angular 6 and ASP.NET CORE 2.1 but this might work on Angular 4.
CREATE A NEW ANGULAR PROJECT IN VS2017:
Create a new Web App in VS. The folder name should not contain '.' since
Angular will not accept it. For example: DatingApp-SPA. And then select 'Blank'.
Close VS so that it will not lock the folder for any permission
Navigate to the base path of the project folder.
Run 'ng new DatingApp-SPA'. This will add Angular goodies to the existing DatingApp-SPA project.
Open the solution again on VS.
CREATE A NEW COMPONENT:
Open command prompt and navigate to the project folder
Run the command:
ng generate component component-name-with-lowercase
This will generate the .html, .spec.ts, .ts, .css files and update the app.module.ts
CREATE A NEW SERVICE:
Open command prompt and navigate to the project folder
Run the command:
ng generate service _component-name-with-lowercase_
This will generate the .ts and .spec.ts by default in the \app folder. We can move these files on another folder like \app\_services
Related
I am new to Visual Studio and ASP.NET and I am watching a tutorial by Mosh Hamedani on MVC development. The tutorial is a couple of years old, but when he creates a new ASP.NET MVC project, it has an App_Start folder with a RouterConfig.cs file, and also a Global.asax file. Both of these things are missing from a project created in Visual Studio 2022, and thus the tutorials are failing because of lack of proper routing.
Is there a way to get Visual Studio to create this older project setup, or to get access to these files and folders, or will this tutorial be totally useless to me?
You have to choose: Web Application ASP.NET (.NET Framework)
And then, MVC or API web
you can just add new folder in your project for routeconfig.cs for the routing purpose
and for global.asax can be added manually
.net core stillhave some basic framework function and for further info you can go to microsoft official site .net docs.
you are following a .net framework tutorial and you are working on a .net core project, create the project again and choose:
Web Application ASP.NET (.NET Framework)
then you can choose MVC
I Have Net 5 asp.net core app hosted on server, with a lots of sub projects. In Asp.Net MVC 5 i was able to update these projects just by simply overwriting the dlls on host server. but it seems in net core this functionality is not working.
does net core not support this feature? this is a very big project and i cant always publish & upload whole projects whenever their is a small change in a single module.
i am using inprocess hosting, if that helps. i tried using app_offline to take application offline and then putting just the dlls but unfortunately it didn't worked.
Yes. It's called publish. Right click on the project, click on publish and link it with your ISS server.
*Edit
My bad didn't read full question...
I've been working in ASP.Net WebForms for the last 10 years and am trying to move myself into some more current technologies. I therefore am just doing a small Todo list project with the following outcomes.
Setup a central SQL DB
Create an ASP.Net Core Web API project to handle data requests
Have a ASP.Net Core MVC project that has a web interface
Create a PWA application to install on both iOS and Android
I have completed steps 1 and 2. I have got to step 3 and not sure how to configure the MVC app. I have a few questions around how I should set this up.
Please note that I have setup the Web API project with .Net Core 3.1 and have used Entity Framework and so therefore have a DB Context.
Should I house the MVC project in the same solution as the Web API project.
If I do house the MVC project in the same solution should I be calling the DBContext directly (c# not javascript) from the WebAPI (setup as a reference) or should I be calling the Web API controllers directly?
If I do house the MVC project and the web API project in the same solution - when I go to deploy this real world will I be able to separate the 2 projects as different hosts so that my WPA can get to the Web API.
Should I have the MVC project completetly seperated and consume the WebAPI project as an external project.
Thanks
2.
This can be organized in many ways. I can tell you how I would proceed.
(Assuming you are moving to .net core world).
I will try to describe how to organize your solution in separate projects, and I will assume you want to use entity-framework, repository and unit of work patterns for DB access.
I would create the following projects in my solution:
one .NET Standard project to hold only models (entities and DTO's) - name it "YourNamespace.Models"
one .NET Standard project to hold repository and unit of work contracts/interfaces - name it "YourNamespace.Contracts"
one .NET Standard project to be your data access layer - name it "YourNamespace.DAL". This is where you install EF Core, where you would have your entities configurations (if using Fluent API), your migrations would be here also (if needed), your repositories implementations, as well as the unit of work and database context.
one .NET Standard project for your services - name it "YourNamespace.Services"
one API project for your API controllers/REST services - name it "YourNamespace.TodoAPI"
one MVC project for MVC controllers - name it "YourNamespace.TodoMVC"
This structure is nice for using dependency injection for your services and anything else you need.
Make sure to select the Multiple Startup Projects option under Set StartUp Projects (right-click on your solution).
Select both API and MVC as startup projects.
Something similar is described here
I have recently started a .net core project and I was wondering what the structure of typical projects are like?
I can see in some other web apps that they have things like account.website.com or analytics.website.com. Are these subdomains their own web projects under the same solution?
If so, How do they point the users to these links from app.website.com to account.website.com?
Currently this is the structure of my web project:
AppOne.Admin
AppOne.App
AppOne.ClassLibrary
AppOne.Data
I am unsure of how to link my Admin to App in terms of using #Url.Action() or RedirectToAction. Is that possible?
Basically I want to add Vuejs (newest) to already existing ASP .NET Core 2.0 MVC project and then return Views from endpoints like /test, where those Views are using Vue scripts from wwwroot/js
So far I tried:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new vue
But I'd really want to have an empty project, as minimal amount of "js-not-wrtten-by-me" in project.
Thanks in advance.
PS: If I want to create content dynamically, then using endpoints via Controller isn't proper way to do that?
I use the new Vue cli 3 to scaffold a project inside .NET core solution. You can, for instance, put it inside a ClientApp folder. You will see something like this also with .NET spa templates. Once created, change the output of the files to build files to the wwwroot folder. Once there, you reference those files in your .cshtml page and you're all done.
I was writing my own webpack configuration and set up before but the new Vue cli makes all this not really worth it anymore.
EDIT: For everyone building multi-page applications and not SPA's, you can also take a look at the following example.
GitHub: https://github.com/danijelh/aspnetcore-vue-typescript-template
Use LibMan, download libraries similar to npm, but is written in C#.