Can't get Angular2 + gulp project to work

Question

I followed the Angular 2 quickstart guide, which worked fine. But I reaaallly dislike the ts compiler they use and also don't want billions of dependencies I don't need in my node_modules folder. So I decided I was gonna build my own angular 2 project from scratch using gulp for the compiling/uglifying/concatting of my typescript code into 1 file.

Now when I run my application I see "Loading..." instead of "Hello world!".

And in my console I get the following errors:

GET http://localhost:3000/app/main.js 404 (Not Found) (zone.js:138)

Error: (SystemJS) XHR error (404 Not Found) loading ((index):37)

Im guessing something is going wrong here with my SystemJS and/or the compiling of typescript. It is looking for a 'main.js' even though I only have a 'main.ts'.

In the quickstart guide there was indeed a 'main.js' in my app folder, as a result of the compiled typescript. But since I'm using gulp, all my compiled stuff goes into a separate folder, with a separate name, so I have no 'main.js'.

At this point I can't find any solutions online and I'm already starting to miss Angular 1, so any help would be more than welcome.

I would be happy to provide any of my code if needed, but my app folder, systemjs.config.js and tsconfig.json are exactly the same as the quickstart guide.

UPDATE

This is what my systemjs.config.js looks like, as I expect that's where the problem lies. It seems to be looking for .module and .component files, but I only have 1 file: 'app.min.js' that contains all the code. Is this wrong?

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist/app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './app.min.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

Your problem isn't that you need to recreate you project with angular cli... Your project is saying that it cant find your main.js file or in other words your main.ts file. In angular 2 your compiler npm takes those .ts files and converts them into .js or javascript files. So the error you had

GET http://localhost:3000/app/main.js 404 (Not Found) (zone.js:138)

is basically saying it cant reference your main.ts file. a few things you could try would be

1. Is your main.ts file actually located within your app folder? Based on your error that is where you project believes it needs to be.
2. What is your index.html looking for when you start your application? for example you should have a script that looks something like this...

<script> System.import('app').catch(function(err){ console.error(err) }); </script>

The important part to note is the ('app') part. this is the file path that will be referenced to go find your main.ts

3.Make sure that ('app') is actually referencing the correct path location to you main.ts. To find out simply navigate to your systemjs.config.js file and look for something like this...

map: {
  app: 'app/components',

Simply change the path of the app to where every you have placed you main.ts file. In this example I would have to have my main.ts located under my components folder.

Edit

ok this is my last edit:

it is important that you understand that your typescript is not whats actually being compiled, if you have split your .js files into another folder, then that is what you need to be pointing at for your app path definition. I also wanted to add this as a note. Don't be afraid of npm and node_modules. angular 2 is bulky only in development when it comes to actually deploying your project, angular will shave your project to and extremely reasonable size you can reference other questions on SO found here

Answer 2

If you want to start a new project, here's what you should do :

---

Install angular-cli :

npm i -g angular-cli

---

Create a new project :

ng new yourNewProjectName --style=scss

(You can remove scss or replace it by either "less" or "sass". Default : "css").

---

Go to your project :

cd yourNewProjectName

---

Start the project :

ng serve

Go to http://localhost:4200

---

Happy play with angular2 !