Project Structure Angular ^5.0.0 & Angular/cli@latest ( PWA & NgRx )

3 min readDec 20, 2017

So, there are the problems that I always ask on the internet regarding on the proper structure of the project or Angular project and with a bunch of researches, I came up to a project structure with the help of other libraries and generator that will help us on structuring our NgRx & PWA apps.

Today, I’m gonna share to you structure that I came up with, applying the best practices from our creators. So I hope this will help all of us in the future. :)

Many of the Angular apps today uses NgRxto build their state management concepts. So I would like to start with creating a project with angular/cli@latest .

ng new <project-name> --routing --style=scss --verbose --service-worker

for us to automatically start with a service worker in our app, then set up our universal app:

ng generate universal <name>ng build --app=<name>

and then our most awaited app-shell :

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

It is important to have a core module or folder in our application project. Our services ( singleton services ) should live here.

app/
   core/
       services/

and now for our NgRx generator for us to same from typing a lot of boilerplate. On this I did use [https://github.com/kmathy/ngx-reduxor] to save time. Thanks to Kevin MATHY.

So your app should be something like this.

app/
   core/
       services/
           auth/p
               auth.service.ts
               auth.service.spec.ts
       store/
           auth/
               auth.<effects,reducers,actions>.ts
           all-effects.ts
           app.store.ts
           store-reduxor.module.ts

So to make all the features like auth,admin live together i put them inside the feature/ folder, and put all the static components/pages into static module, and all of my dumb.components, pipes, directives, helpers, scss are in shared folder. So the app should look something like this:

app/
    app-shell/*    
    core/
        services/*
        store/
            all-effects.ts
            app.store.ts
            store-reduxor.module.ts    
    features/
        lazy-loaded-pages or containers    
    shared/
        components/*
        directives/*
        pipes/*
        helpers/*
        scss/*       
    static/
        static-routing.ts
        static.module.ts

Notice that my store folder/module lives inside the core because I only have one store with different feature-storeforFeature inside the store.

Now, for the import simplicity here is my setup thanks to Jecelyn Yeen and Tomas Trajan on this trick. It really made things a lot easier.

In .angular-cli.json add this property:

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              "./stylings"
            ]
        }

    }]
}

So instead of importing your styles like this ../../../scss/variables you now just have to use this @import 'variables';

and for importing enviroments/* I added this in tsconfig.json

"baseUrl": "src", "paths": {    "@app/*": ["app/*"],    "@env/*": ["environments/*"],    "@core/*": ["app/core/*"],    "@shared/*": ["app/shared/*"]}

So I can just import enviroment as follows:

import { environment as env } from '@env/environment';....ServiceWorkerModule.register('/ngsw-worker.js', { enabled: env.production }),

don’t forget to add node as types in tsconfig.app.json :

{    "extends": "../tsconfig.json",    "compilerOptions": {        "outDir": "../out-tsc/app",        "baseUrl": "./",        "module": "es2015",        "types": [            "node"        ]    }}

You may now focus on your development with ease. :) I hope this’ll help. Adios!

For references:

Let me know if you have some ideas. :)

Project Structure Angular ^5.0.0 & Angular/cli@latest ( PWA & NgRx )

Written by Lex Caraig