We are working as two teams on an application with two different work spaces. One work space is main project and another work space was getting exported as module to our private npm repository, From there we are getting that our module through our package.json. One problem we are facing every time is ,If we want to test the module with main app we are pushing to repo and getting it again and again. By this we are wasting so much time in development phase. Is there any way we can avoid this.
Look into using a mono repo. Mono repos were added in Angular 6 and enhanced in Angular 7 where your lib can be in the same project as the main app. You will need to run up a new Angular 7.
I read a good post about it on Reddit the other day but am at work and can't get to Reddit to link to the article. Have a browse of http://reddit.com/r/angular2
Found it: https://nezhar.com/blog/up-and-running-library-development-with-angular-7/
Related
I'm using create react app and recently added a service worker so as to make it a PWA. It was very easy and seemed to work great. However, now whenever I build a new version of my app I get the following error on the initial load of the website:
I believe the problem is that when I build my app the file names are randomly generated and don't match the old ones. The PWA is using the old index.html trying to fetch the old files which don't exist anymore.
What is the best way of fixing this?
It turns out that the js file is too large to be precached. There are two approaches to solving the problem:
split the bundle into smaller chunks (each <5mb)
eject from create react app and increase the maximumFileSizeToCacheInBytes
You can read more in this StackOverflow answer:
Create React App serviceworker is not including one of the generated files
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application
I would like to make more use of market-standards and therefore trying to start building my front-end with Angular 2, instead of my custom JS MVC-framework. However I feel getting stuck with Angular because of the things below. To describe my issues, I use a very basic example of a PHP-website with 2 simple modules.
In my current PHP-project I have 2 separate (non interrelated) modules, lets say a contact-module and a review-module, they are on the same page.
On the client side both modules download JSON-data and post JSON-data to the PHP-webservice running on port 80.
Question 1
Is it correct that for both (non interrelated) modules I need to create an Angular 2 app? So creating 2 Angular apps?
Question 2
Do you have to run per module an instance of "npm start", so that on save it will keep transpiling my project-files? This will lead to having many "cmd prompts" with "npm start" running in the background right? Now its only 2 cmd prompts, but what if my site contains 10 modules doing ASYNC-activity?
Question 3
Is it possible to share the JS-library files with various apps and within various sites?
So that it does not download all the 16.000 JS-files every time you try to do some simple ASYNC-download of JSON-data and add it to the DOM?
If yes, how?
So:
C:\angular\ -> JS-Library (containing 16.000 files.... :|)
C:\sites\site1\ -> uses C:\angular\
C:\sites\site1\contact-module\ -> uses C:\angular\
C:\sites\site1\review-module\ -> uses C:\angular\
etc.
C:\sites\site2\ -> uses C:\angular\
etc.
C:\sites\site3\ -> uses C:\angular\
etc.
How to share all those 16.000 files in the Angular JS-libraries within multiple modules & projects?
Per Angular 2 app it downloads via "npm install" more than 16.000 files....., even for the most simple application you can develop!
By having 2 simple modules, it will download 32.000 files & loading 100's of files in my webbrowser for just running 2 simple modules? (sorry but really thinking WTF!! What a waste and what an overkill, right?)
Ok, maybe you can JS-pack all those JS-files later on and combine it into 1 file. But still is this not overkill?
So, can I not for example share 1 Angular library with multiple Apps? Then it "only" requires 16.000 files...
Let's say you create 5 websites. For every website you have to add 16.000 JS-files, only because you need to do some simple ASYNC-request and add the JSON-date to your DOM. For this activity you already need to download 80.000 files (5 * 16.000)!
If it is also necessary to have several modules in a website requiring to do ASYNC-activity, like here the contact-module and the review-module, then it can easily become downloading millions of the same JS-files and using an awful lot of resources. And for every module to work having to use "npm install" and "nmp start" everytime to just work and see the results.. Having 10 "cmd prompt" screens running in the background to make this basic activity possible.
And all of this for just downloading some plain JSON-data from PHP-webservice and put it nicely into the dom?
Question 4
My main question, is the above the right / recommended approach? Not to start a discussion on how should you exactly use it, but is this a common way of working for PHP-website development and using Angular 2 for the frond-end? Or is there a better way of working?
Note, I am aware that PHP is in this scenario irrelevant, of course it can also be C# or JAVA as a back-end. But its to make the example more concrete.
Question 5
Then using the recommended TypeScript you will have to use "npm start" to transpile your files to JS and then it will run on localhost:3000.
I'm developing my sites in PHP and using Xampp on localhost port 80. Any experience of people that use Angular 2 for their front-end for their PHP-projects? How do you configure it so that it will refresh your localhost:80 page when you change something in your TS-file? And what if you have multiple (non interrelated) modules for which you use another Angular App? It cannot run twice on the same port right?
Any help is highly appreciated, thanks in advance.
I think the problem with your understanding is that you're mixing everything into one question: back-end (PHP), front-end (Angular), development setup (npm) etc. I'll try to give short answers to each of your questions.
Question 1
No, I wouldn't do create two angular applications. If you'll have a separate page for each module, you can use router to enable navigation without page reload.
Question 2
This depends on how you setup your development process. Usually, with modern building systems like webpack, you can configure module dependencies and how often each must built. This all can be managed through one command line instance.
Question 3
npm downloads 16000 files because it downloads sources along with built files. You'll use one built version in the production.
Question 4
I usually separate front-end and back-end development into different projects and treat them as completely separate applications communicating through REST interface.
Question 5
For usage of typescript, you'll have to use preprocessors which will be run by your building system. Try to google setting up angular 2 with webpack and a lot will be clearer to you.
I am trying to get all my JavaScript projects in one frame-instance of WebStorm. The reasons for this are good:
I can refactor across all projects
I can find usages across all projects
Up until now we have had to open/reopen each project, and just hope that when we change something in project A it won't have an effect in project B. Unfortunately as the number of projects have grown, we have been getting so many errors because we can't safely refactor or 'see' the effects of a change we want to make.
The WebStorm people say that you can just add more content roots, and a 'content root' can be seen like a project.
Fine. But that still means you can only have one deployment configuration.
I'll explain :
I have two projects projectA and projectB. They both live on the web server at /projectA and /projectB respectively. They both use a common project called /ProjectCommon that needs to be deployed to BOTH /projectA and /projectB respectively.
If I set up the mappings like this :
I get an error message, or exclamation marks. The deploy of the ProjectCommon works only on the first instance it comes across (ie. it never deploys to my projectB).
This is incredibly frustrating because it seems like I almost got to multi-project functionality in WebStorm, but now we have to go back to single windows for each project... opening ....re-opening ... * sigh *
Anyone have an idea where you can have a multi-project setup in Webstorm with deployment capabilities? Eclipse can do it, so I don't see why WebStorm can't.
it's not currently possible to have the same local path mapped to multiple deployment paths. Please vote for WI-5839