As a beginner, I have installed angular cli, npm etc all the stuff and I am able to add some components to it. But It is incomplete until we use some backend. I am in .net background. Till now, I was using MVC but now I am migrating to .net core.
Well, Angular2 and .net core are two different apps. Now I have angular-2 app. How can I add this app in a .net core web application?
And usually we use CLI commands to add components and other things. So, when I will add angular app in .net core app, how can i be able to add components automatically?
Feels like I need to add my 2c here.
Angular2+ & Asp.Net Core 2+ is a perfect match for developing long lasting applications.
Saying that, don't get fooled that Microsoft would be your friend here. Don't try to use VS build in Angular template or Microsoft.AspNetCore.SpaTemplates package, as it will lead to you into rabbit hole of whole bunch of issues(just look at all questions about it on this site).
From my own experience of trying different approaches, create empty Asp.Net Web API project and create Angular app in it with Angular-CLI tool. From this point you can use angular-cli & dotnet cli for very enjoyable and productive experience.
Follow all steps in this blog from Levi Fuller and you'll get up and running in no time.
You should build an API and then communicate with it from your Angular application.
Take a look at this tutorial, it covers the basics concepts:
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api
Or in case that you want to integrate your application as a new project inside your solution, take a look at this one:
https://www.pluralsight.com/guides/microsoft-net/using-angular-2-with-asp-net-core
If you are using Asp Core, your best bet is to use its spa templates here
You can install it using
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
To start a new project with angular
dotnet new angular
Now the problem here is you want to integrate the angular cli with the asp core. I'm assuming that you want to use the angular cli commands to quickly generate a component. From a fresh angular project, look for angular-cli.json and copy paste it to the root of your asp project. Then update your package.json and add #angular/cli in the devDepencies like this
"devDependencies": {
"#angular/cli": "^1.0.0",
"webpack": "^2.6.0"
}
You can now run this command
ng g c my-component
Make sure that you run the npm install again and rerun the dotnet run / dotnet watch run if it didn't work.
Create the ASP.Net core application, Create the Angular project using cli. Build and copy the angular project to www folder. You can add the components using the command prompt. Create the api in .Net core application and call it from angular
Related
The bounty expires in 4 days. Answers to this question are eligible for a +400 reputation bounty.
muttley91 wants to draw more attention to this question:
Kind of stuck with this one, looking to get more eyes on it
I created an ASP.NET Core app with Angular as instructed via this guide. I'm publishing it to Azure using the GitHub Action support, which was generated by Azure and then I modified to get it to work. I've got it working for my app but only the API seems to publish, and at the designated endpoint URLs. This makes sense since I had to modify the workflow to indicate the API project directly. How can I publish the Angular app (in the UI project) to Azure as well with this same workflow?
Here is the repo for reference: https://github.com/rarDevelopment/rardk-web-dotnet
The workflow: https://github.com/rarDevelopment/rardk-web-dotnet/blob/main/.github/workflows/main_rardkweb.yml
and the API sample endpoint can be seen running here: https://rardkweb.azurewebsites.net/WeatherForecast
the Angular app will get published via npm run build , it says so also in the guide you linked, here
The publish process takes more time than it does for just an ASP.NET Core project, since the npm run build command gets invoked when publishing.
In dotnet static files are stored within the project's web root directory.
Your angular project should be configured to publish the result of npm run build in the web root directory (www) of your dotnet project.
When the built Angular app is in the www directory, then you build/publish the dotnet project, which needs to be configured (see the guide examplecode) to serve static files.
i need asp.netcore web api with authentication (ApplicationDbContext i.e.identity default database context ). i feel comfortable with visual studio as back-end.
2.i need react-redux app with authentication(front-end) working independently that start with "npm start". i feel good with vs code. on the front-end i want to add react-redux and redux-thunk to implement my course website front end. i have been in struggle for a week to achieve this.i tried with vs templates but when ever i install react-redux the user management fails and the client app does not start.tried, web application,api and web application with restful templates.
if someone have better idea to accomplish my task . my overall problem is to create a website that can present online courses.the teachers could add course material and student can access.
Try running npm install before your create-react-app script.
If that doesn't work, deleting "node_modules" folder and running npm install.
If that doesn't work, you can always try setting up your react environment manually (For example, as in this great tutorial here)
Worst-case, you can always use react just client-side only, and although this becomes difficult due to most online tutorials being server-side, at least you can get started and not be blocked on your project.
Source: I googled ;)
I'm developing a CLI that needs to generate angular components as well as
creating other files in a separate module. So, the project that the CLI will assist in would ideally call ng generate to handle the angular side of things, and then use fs-extra to go into the other module and add files. It's for a CMS SPA editor where the angular code and CMS code live in the same project.
So, am I able to run a different CLI's commands inside of my node CLI that I'm developing, or do I need to manually create all the files that ng generate is going to create along with the other files I'm creating at the same time?
The Angular Schematics are the smarts behind the Angular CLI. You can use the schematics to build your own CLI leveraging the features of Angular Schematics. That way you will still get all of the ng generate functionality.
See these articles for more information on the CLI schematics:
https://brianflove.com/2018/12/11/angular-schematics-tutorial/
https://github.com/angular/angular-cli
I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.
I have just updated my project to work with Angular 5, and I have got a NodeJS setup on my hosting so I want to create an Angular Universal Application, I would like to convert my current Angular 5 project into a working Angular Universal project that I can setup on my hosting.
The only thing I found on this so far is this;
Convert Angular 4 web app to Angular Universal app
I followed this and It gave me errors, I imagine due to the quick changing nature of Angular that the answer is most likely outdated, so I was wondering the best way to convert it.
Should I just use the starter seed and do the tedious work of adding all my code?
The best way to do this for me personally was add in all my components, services, modules into the universal-starter project, ensure I remove hammerjs or import it properly (for Material 2). I converted most of my components to have .module so I could use their lazy loading (not forgetting to add these paths properly in my routing file and in the static lazy loading path)
It only took a few hours and alot of that was just bug testing/fixing so it was pretty easy all in all.
I had the same issue several weeks ago. There is a Wiki on how to implement Universal into an Angular CLI project : https://github.com/angular/angular-cli/wiki/stories-universal-rendering
Maybe that helps you out.
I found it the easiest to take the current Angular Universal Starter Kit and import all my Modules into a fresh installation. As the new starter is for Angular 5 CLI I hope it's future proof. We will see…
I wrote a starter kit for MEAN applications with Angular Universal for Angular 5 and you can clone my repository at GitHub here: https://github.com/Stanza987/mean-starter-kit. It provides all the instructions you need to get started. For your specific app, you can just delete the MongoDB part (Mongoose and the out of server.js, node_src/config/database) and npm uninstall mongoose and be able to integrate your project in.