CODEWITHSUNDEEP
angularroutessubdirectory
Danny908
Danny908

Reputation: 531

How change Angular 2 directories routes?

I'm getting started with Angular 2, I've been working with the Quickstart proyect from the official documentation, but I don't like how everything is mixed in the 'app' folder so I make some folder inside this and change the routes but I get this error in the console

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

This is the structure of the proyect: enter image description here

This are the changes that I made in the routes:

main/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from '../module/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

module/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from '../components/app_component/app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Upvotes: 2

Views: 1649

Answers (2)

Bean0341
Bean0341

Reputation: 1697

Typically it is somewhat bad practice to sub out all those components to their own folders. you want to keep all your components in one folder and map that folder location out. your problem is that the path http://localhost:3000/app/main.js does not exist. its actually http://localhost:3000/app/main/main.js you need to define this somewhere. Probably your index.html, it should look like this 

<script>
       System.import('app/main')
        .then(null, console.error.bind(console));
</script>

or in you systemjs like this

 map: {
      app: 'app/main',

Upvotes: 0

Bruno Jo&#227;o
Bruno Jo&#227;o

Reputation: 5545

This config is set in main.ts file and this file should be placed right inside app/ folder and not in a subfolder called main. This file is the main app and it is responsable for telling the index.html file where to look for the application files.

You have two options here:

1 - Place the main.ts file in app/main.ts

2 - Change your systemjs.config.js to point to your main file folder

...
packages: {
  app: {
    main: './main/main.js', // here you can set the new folder
    ...
  },
...

Upvotes: 1

Related Questions