Follow up to MVC5 and NG2.0

I’ve been asked to do a little more in depth post about the structure of my application that goes with the gulp file I posted.

In a nutshell it’s pretty much this

MVC5(Asp.net 4.x)PROJECT
|\
| app\
|      |ALL TYPESCRIPT FOLDERS ( SOURCE CONTROLLED )
|      |ALL SASS FOLDERS ( SOURCE CONTROLLED )
|\
| lib\ < Nothing here is source controlled, it is part of the project so that publish works
|       \spa\app.js <– this file is generated from ALL TYPESCRIPT FOLDERS
|       \css\ <— Generated by gulp to include any CSS from the gulp script
|       \js\ <– Generated by gulp to include any 3rd party vendor js
|\
|  \Controllers\ <– where your normal MVC controllers go
|\
|  \Views\ <– Where normal Views go
|\
|  \Content\ <– where I store staticly served items

For this project I keep all of my images/svg's and such in Content. All of my Typescript is stored with the \app folder. The gulp Tasks/watch will compile all of this and store it into \lib\spa\app.js meaning the only file I end up referencing is app.js and the files within \lib\js\ for my entire application as far as the JS goes. The CSS will all be within \lib\css\ and those files will be referenced as normal within their link tags.

This gulp script also has SCSS/sass in it, those files would also go under the /app folder. The gulp file is designed to pick up any scss files and then it puts a single file called app.css in the /Content folder ( so link href="~/Content/app.css" ).

Now remember, from my old post, I do not have visual studio compiling the TS at all. This is because for some ( unknown to me at the time of writing ) VS +TS will not compile the modules correctly. I want to say it has something to do with the decorators and attributes but i'm not certain.

The following is my System.Configs for the application as well. I do not know how "correct" this is, but it does work.

        System.config({
            defaultJSExtensions: true,
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                },
                angular2: { defaultExtension: false },
                rxjs: {

                    defaultExtension: false
                }
            },
            map: {
                    'rxjs':"rxjs"

                }
        });
        System.import('lib/spa/app.js')
            .then(null, console.error.bind(console));

the above config will allow modules to be loaded from the angular 2 and rxjs modules and any modules needed by your application to be loaded as they already are from the app.js

System.Js is still something I need to better wrap my head around.