I have created an APP using Angular 8 and deployed on Azure as a web app (AppService) on windows OS.
I have created an AppSetting called MyAppSetting. When I tried to access the app setting in angular 8 as process.env.APPSETTING_MyAppSetting or process.env.MyAppSetting, it is showing as undefined.
How to access app setting values in Angular 8 deployed on Azure?
wDon't believe this is possible with straight up Angular is a client-side framework. Since it's a frontend framework running in the context of the browser, it doesn't have access to the environment variables on the server. Angular 8 template does include environment.ts that can be used as work around. The following blog posts shows how you can make use of file.
https://medium.com/#zaheeer1/angular-6-compile-time-vs-run-time-environments-180c86c3d2e2
https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/
One option that might work though is server side rendering. I'm no angular expert but https://blog.jeremylikness.com/blog/2018-09-19_serverside-rendering-ssr-with-angular-in.net-core-2.1-part-three/ demonstrates using Angular with Angular Univesral and dotnet core to implement service side rendering.
Related
For an example, I have one angular ui project that fetches values and perform operations.
I have one backend API project in .Net Core and now I want to reuse angular ui project with node js.
Is it possible?
How to configure it and which are the main points to take care that angular project support both.
How can I deploy it?
Angular is a client side application that run's in clients browser, as long as the REST API or service you connect has Same API endpoints and same object models and authentication etc everything will work as intended.
REST is platform independent like the web services and also language independent. It doesn't matter if you use .Net Core or some nodejs framework.
Once the angular application is build ( ng build --prod) you get a bundled application files in dist folder you can host these files in any web sever just like you host normal html file.
The only change you have to make in the the Angular application will be to change the host URL (if there is any change) normally configured in environments folder
Take help of environment file and change the api as per your requirement.
I currently have access to an standard cPanel shared hosting, without SSH
I have an angular application running there https://www.rednots.com
However now I need the app to have server side rendering for Facebook share, I've been using Universal toolkit from https://github.com/maciejtreder/ng-toolkit and it works great in local
Now my issue is: can I deploy the Universal app the same way I've deployed the Angular client side app by uploading the dist folder? Do I need node.js installed in the server and run commands? Or is it any workaround so I don't need to use commands?
ng-toolkit is using lambda functions and api gateways to be used by the services.
Technically speaking you only need to deploy the dist folder and everything should work out of the box since you mentioned that you already tested it locally and it works which means that the lambda functions are already deployed and the services are pointing to AWS gateway properly.
I have a multi-tenant Angular 4 and .Net core 2.0 application.
I have hosted .Net core API in IIS with deployment time debugging and for that I have followed this link.
https://learn.microsoft.com/en-us/aspnet/core/publishing/development-time-iis-support
With this configuration in IIS, I can access my API any time and if I want to debugg it, I can run it in VS.
Now, Is it possible to run Angular app directly with IIS. I mean is there any way that npm start will directly open app in specific IIS url like app.myapp.local, and not at localhost:4200
what I have did so far?
I have added one folder in wwwroot/myapp, and I have pointed it to Default web site in IIS.
then, I am building my app with ng build, copying all content of dist folder to wwwroot/myapp.
Is there any proper way in Angular, to handle this kind of scenario?
this question is not same as this Deploy angular application on IIS
because as I specified, I want to start my app in debugging mode at specific URL without building it, So please don't add it in duplicate without understanding question.
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 am working on a food purchase web app. The app has already been launched on mobile (Android). Now we want to build a web version.
The backend of this app was built using Node, Angular and Firebase.
I would like to know if I can only use Angular 2 (without Node.js) for the web application. What the web app will basically do is to:
User authentication
Consume Backend API
Checkout, after purchase
My major concern is, do I need Node.js for anything? Or is Angular 2 just enough for my frontend development and deployment?
Angular is your front end.
Nodejs is your backend.
Firebase is a cloud backend that I assume you're handling your user Authentication in....it's easier than DIY if you aren't backend savvy.
Depending on what Node is doing, then you might be able to remove node and rely entirely on Firebase(big maybe...).....I suggest not touching anything becuase you clearly aren't a backend engineer. Node is probably hosting your app's API and/or connecting to your database.
Yes, you can switch to a different backend from node like PHP or .Net and it will work with Angular2. You will need some sort of backend(Angular2 is 100% front End).