@Nefcanto ... some thoughts on the base of your ideas:

• you probably need your own custom project's template ... I think that Angular DevKit (Schematics) would be useful for you to set-up exactly what you need https://github.com/angular/devkit and probably it would be interesting also to look around Nwrl Nx Workspace (monorepo concept) ... https://nrwl.io/nx
• ... the same from the file-system architecture point of view
• actually you can't load just a component separately ... but because the definition of a module with one component inside is just 8 lines of code more (and it could be a single one file) ... it is probably not relevant at all
• using TypeScript is a must ... you can't use JS if you want to work effectively ... no other chance and if you follow other people reactions around the world it is just a reality ... it would be hard to find a person who wants to torture himself to use JS ... it is just a non-sense
• you don't need to use Angular CLI or Webpack at all ... there are many other options like Rollup, Closure Compiler, SystemJS Builder, ... to mention only the most-named ones
• you can even use some custom logic which leads to separating Angular libs code out of apps and use them as external libs from external CDNs or your own servers and more effectively use proxy caches, browser caches, ... even cross many apps and share the same libs without duplication, ...
• probably the best could be to create your own extracted and custom shared Angular lib which would contain only those parts of standard Angular libs which are necessary only for your set of apps ... which would be an equivalent of tree-shaking process on a standalone app's level (this is what would be probably used in Angular Elements ... because it is the same case)

actually you can't load just a component separately

Technically it's possible, I have a demo in https://trotyl.github.io/ng-component-loader-demo/ , for example https://trotyl.github.io/ng-standalone-components-demo/temperature.js is a single component and could be loaded directly.

But doing so gets little benefit as NgModule can be easily integrated by router.

@trotyl ... lol, you always surprise me. 😄

specially those imports at the top and all those decorators and exports at the end of each file and ...

@Nefcanto Those are totally JavaScript. TypeScript is a superset of JavaScript, but these are the inherited JavaScript features. There're demos without using TypeScript like: https://github.com/shuhei/babel-angular2-app/blob/master/src/app.js, you'll find little difference. But without AOT support (which is highly based on TypeScript), it not performant in runtime.

@tortyl, Angular has architecture, style guide, and everything a good clean codebase needs, but only for ONE project. Do you understand that?

What if there is 100 projects and I need ALL of them to have the same set of dependencies? How to control or enforce that? How to prevent deviation in many projects? How to make sure that developer 1 uses the same version of say X, and developer 2 to 100 also use the same version? How do you manage that? What if I want to remove testing from all projects, cause we can't afford testing costs? What if I don't need that AOT fanciness and I'm cool and OK with the performance issues, because I gain business-value somewhere else? What if I want the TypeScript to be configured the same across ALL projects?

You probably don't understand that, because you have not experienced it. Most developers work only on one project and can't perceive the context from the eyes of a company that has MORE than ONE simple single project.

When it comes to discipline and corporate standards, Angular becomes a true pain in the ass, because it works in one and only one way. Change it and bugs start to appear. You can't centralize things easily. Like I'll give you an example.

.NET projects are built using MSBuild and are configured via special XML files called .csproj for C# language. Now if you as a company want to serve 200 websites for 200 customers, and you want to make sure that only one Excel library is used to export data (because you've done R&D and you've spent money on that and you don't want each developer to waste time benchmarking libraries against each other), then you can easily create a special type of files called target files. Like you can create ExcelConfiguration.targets in a shared environment and ask developers to include that targets file in their build configuration. See? That's how a company works. That's way more savings than you can even imagine.

We have a SPL on .NET platform, and we manage to run more than 100 applications, only using a team of less than 9 developers. That's competition. That's business-value right there. Yet to manage 100 web-apps using Angular, we probably need at least 25 developers. Do you know why? Because each developer in .NET can manage at least 20 application based on all the improvements and infrastructure that we have made in our SPL, yet we can't get the same things in Angular.

@tortyl in Google I/O 2017 I heard them saying that we have more than 6 million applications both on Google Play and App Store. Can you believe that? 6 millions. That's not a joke anymore. Many companies are working in the field of creating low-cost applications in high-volumes for special type of customers. Let's think about WordPress for example. There are thousands of businesses out there which are OK if they have a website made with WordPress and they don't need to spend a huge amount of money to setup their own teams and create highly sophisticated and customized web sites.

That's our business. We create applications (web, android and iOS) for these types of companies. Yet to make them happy, we need to reduce costs. To reduce costs, we need to extract similar functionalities from many projects and control them somehow from a central place. We need to follow don't repeat yourself pattern. That's possible in Android Studio via Android Modules and gradle build system. That's possible in Visual Studio via dll files and MSBuild configuration. Yet that's somehow impossible in Angular.

If we could write angular in simple JavaScript terms in old fashion of web like including js files in head, etc, then we would benefit from it.

The main reason we're moving to angular is because of the overall market trend. That's all. Developers are switching and it's getting harder to find developers for older technologies. Customers hear about it and get into the hype and ask for Material Design. And so many more factors that push us to go towards Angular. Yet it's not good at all for creating many many more applications with single standard.

@Nefcanto You have severe misunderstanding between Angular and Angular CLI.

• Angular is just a framework and has no idea how you would use it.
• Angular CLI is a tool to help you quickly setup an Angular development environment.

Angular has architecture, style guide, and everything a good clean codebase needs, but only for ONE project.

That's what Angular CLI provides (except Style Guide which is an abstract principle), if you want a custom project structure, you're welcomed to create your own, but Angular CLI is only designed for SPA usage only.

What if there is 100 projects and I need ALL of them to have the same set of dependencies?

You could search for term "micro frontend", that's what you're looking for.

@Nefcanto ... the more I think about it, the more I am convinced that Nwrl Nx Workspace (monorepo concept) is a concept that should interested you. Your arguments are exactly those reasons why it ever came into being.

Generally the Nx Workspace concept is something what took much wider experiences from Google monorepo concepts that Google is applying internally for many years and on a lot of larger apps portfolio ... there are probably hundreds of apps, maybe thousands. They are fighting with the same types of problems but with hundreds and hundreds of developers around the world.

@trotyl then why angular.io starts with Angular CLI? I searched and I couldn't find a section on how to create an Angular application without Angular CLI.

I think the point you mentioned might be helpful. Can you guide me in the right direction on that? Is there examples on how to create an Angular app without Angular CLI?

@mlc-mlapis I'm so thankful for the link you introduced and yeah, you're right. They have the same concerns. It's just that when it comes to business, law also comes into the scene. We try to somehow do what they've done, but with multiple repos. If we can't, we definitely give it a try cause as you said they are very close in mindset to what we need.

@Nefcanto Some facts:

• The first stable Angular version lands in 2016-09-15T02:32:24.032Z;
• The first stable Angular CLI version lands in 2017-03-24T03:08:08.615Z;
• angular.io added CLI quickstart in 2016-06-08 (docs(cli-quickstart): add cli 5 min quickstart angular.io#1606) in addition with the non-CLI parts;
• angular.io migrates examples to Angular CLI in 2017-09-22 (build(aio): migrate examples to CLI #19248);
• angular.io migrates docs to Angular CLI has not been done yet (List of updates needed for CLI docs #19510);

Angular CLI is here to save time and reducing the learning curve, but not for forbidding your creativity.

You can find non-CLI example everywhere (https://github.com/angularclass/awesome-angular), but if you only want an out-of-box well-maintenance production-ready project template, then it will certainly be hard. Of course nx is a good example.

This is a general topic which we are hoping to address in the futrue, but as such it is not really actionable. I am going to close this but do continue to have discussion here.

@tortyl, based on your guideline that Angular is not Angular CLI, we've already started R&D to create our own infrastructure for Angular. Here's what we intend to do:

• Load UMD modules via old school head script reference
• Create an object model for android concepts in C#. That is each application has many modules, and one and only one root module. Each module can have many components, and only the root module can have one and only one root component. Each component is loaded via a route change probably, and so on.
• Creating boilerplate codes for module and component definitions, and also for bootstrapping the root module, via C# and injecting that code into the HTTP response
• Creating a convention in our SPL, so that our developers would only be engaged in creating views and components and spend zero time on keeping projects in sync

Of course we know that this path might not be feasible, or even if feasible we would definitely lose some benefits and Angular like AOT compilation, or flexibility of having multiple router-outlet for deep linking and similar scenarios. Yet the business-value we gain would be much more.

based on your guideline that Angular is not Angular CLI

By saying that I mean you should raise specific actionable feature request (for specific repo) rather than abstract support request like:

• Angular CLI should provide support for lib development ([RFC] Library Support and Boilerplate Comment Thread angular-cli#6510);
• Angular Compiler (AOT) should support JavaScript files (AOT compilation for JS #11700);
• Better webpack ejection support (Eject to custom webpack configuration file angular-cli#6731);
• Better documentation for schematics;

The official tooling won't be able to cover everyone's advanced requirements, but can still be made use of.

Of course we know that this path might not be feasible, or even if feasible we would definitely lose some benefits and Angular like AOT compilation, or flexibility of having multiple router-outlet for deep linking and similar scenarios.

AOT and routing are feasible for individual build process (unless dropping TypeScript usage), but making custom AOT tooling support would indeed require knowledge about Angular compiler and JavaScript building tools, so it's depending on you whether it's worthy or not.

@Nefcanto ...

• It should be certainly possible to load UMD dynamically ... when it is really necessary and not statically.

Load UMD modules via old school head script reference

• and the best would be to create a shareable UMD which contains only necessary parts on the base of your apps' code ... then loading it in <head> section has all advantages.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}