Angular2重定向到根文件夹

Question

I am new to Angular 2 and trying to create my first application. I am following this tutorial to develop first application. I created application as suggested and my main files are:

systemjs.config.js

 (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: '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/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.ts', defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this); 

main.ts

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

app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } 

And I am initializing angular from following code in index.html

  <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> // import the 'app' module to boostrap the application System.import('app') .catch(function(err){ console.error(err); }); </script> 

My project folder name is myangular. So, My request is http://localhost/myangular/index.html

Problem

As you can see in below image, Third request moved to root of localhost(Apache server). Here dashboard of default page of Apache. This result in error.

Please help me where I am missing configuration.
Thanks in advance.

Answer 1

I had the same problem, fixed by changing <base href="/"> to <base href="/myangular/"> (index.html). In my case, I have to keep the "/" after the folder name.