#Angular Folder Structure

1 messages · Page 1 of 1 (latest)

robust stratus
#

I've been looking around for a few days trying to understand the best structure to build an application in Angular in. I've come across a few different methods and different ways people tend to do it.

Angular has some rough structural guidelines but for some reason they do not feel great.. I was just curious if anyone has tried and tested ways they have done?
Link for reference of structural guidelines by Angular: https://angular.io/guide/styleguide#overall-structural-guidelines

spiral sail
#

These guidelines are outdated, there are plans but not done yet.

nocturne wave
spiral sail
robust stratus
#

Interesting, I was going to approach with modularity such as ?:
Modules -

  • MarketingModule { All frontend related pages }
    -- marketing.module.ts
    -- pages { any related to Marketing }
    -- layout
    -- services
    -- interceptors
    -- guards
  • DashboardModule { All dashboard related pages }
    -- dashboard.module.ts
    -- pages { any related to Dashboard }
    -- layout
    -- services
    -- interceptors
    -- guards

Shared -

  • components
  • utils
  • pipes

As I think I only plan on having 2 modules { pretty sure how this works }
One for frontend marketing pages, one for backend dashboard pages.
Both will replicate the same in terms of folder structure
Then will have a shared standard folder which holds reusable components, utilities, pipes, third party libraries as such

Not entirely 100% sure of this as of yet. but a log of articles kept saying in laymens terms "Depending on your project will determine how your application structure would be. It will adapt from simplicity to your project."

I have heard a lot about this "App, Core, Feature, Shared" module approach too

spiral sail
robust stratus
spiral sail
robust stratus
spiral sail
#

A redirection banner will be add to the .io in 2 weeks

robust stratus
#

I used the VisualStudio 2022 "Add Project"
Standalone TypeScript Angular
Project
Which comes out at - Just curious why this still has Module architecture in place

image.png
#

Only reason I ask is I started added some of the files and removing others in mine like a numpty

spiral sail
robust stratus
spiral sail
#

That's weird indeed, there's a AppModule file created by Visual Studio?

robust stratus
#

There "Was" before I started amending, along with the app.routes.module.ts

spiral sail
#

I'd say that's a bug.

#

You can create a standalone project with angular CLI : npx -p @angular/cli@latest ng new project-name

#

Or check if your Visual Studio version is up to date.

robust stratus
#

Running through diagnosis now 🙂

spiral sail
#

Standalone here means not with ASP.NET. That's confusing though

robust stratus
spiral sail
robust stratus
#

But then that creates -

image.png
#

So is it possible it's "Standalone" unless you tick that checkbox

spiral sail
#

What's your goal, just to create an Angular project?

robust stratus
#

Indeed, Already built my API side of things in .NET. Just need the frontend client which was Angular

#

But wanted nicely tucked in to the Solution

spiral sail
#

Then you open the created project with Visual Studio

robust stratus
#

Sorry to be a bother - I couldn't get the Angular project to function and run simultaneously through my vs solution.

I take it this is more for "external" from the vs solution.

Just querying - Is there much to upgrade from this current version to upgrade manually?

spiral sail
#

Sorry I don't really get it.
Btw a Microsoft employee told me he will escalate the confusion about 'standalone' internally on Monday

robust stratus
# spiral sail Sorry I don't really get it. Btw a Microsoft employee told me he will escalate t...

That's great news.

So I was not able to integrate the standalone Angular Project into my VS Solution, so reverted back to the version that VS provides through the method I shown I was creating the project through. This is due to the Project being able to be "Multiple-Startup" this way.

I was curious if there was any way to upgrade my current version manually to remove the modules as they are not used in latest versions, or is this not the case?

Are the Modules removed in the v18 of angular that is supposedly experimental at present?

#

So just to recap what I mean -
I have a solution, of which I want to integrate Angular. But the Angular coming along with VS is outdated due to still including Modules.

Is there a manual way to upgrade the project I have here integrated { created from VS }

image.png
#

Apologies, it's probably me not understanding everything