2017-02-08 68 views
0

我正嘗試將基於舊的angular2快速入門的應用程序遷移到新的(具有新的文件夾層次結構)。404 GET/app - Angular2快速入門

當打到npm start我得到404 GET /app錯誤。 它一提的是我的app.module.ts文件/app/modules/app/app.module.ts

下放在我試圖改變沒有運氣路徑,但我還是懷疑,它的東西,是關係到我的配置是很重要的。

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/modules/app/app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

systemjs.config.js:

/** 
* 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: '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', 
     '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: { 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <base href="/"> 
    <title>Tic Tac Toe</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 

    <!-- Polyfill(s) for older browsers --> 
    <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/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 

    <body> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html> 

的package.json:

{ 
    "name": "myApp", 
    "version": "1.0.0", 
    "description": "myApp", 
    "scripts": { 
    "build": "tsc -p src/", 
    "build:watch": "tsc -p src/ -w", 
    "build:e2e": "tsc -p e2e/", 
    "serve": "lite-server -c=bs-config.json", 
    "serve:e2e": "lite-server -c=bs-config.e2e.json", 
    "prestart": "npm run build", 
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
    "pree2e": "npm run build:e2e", 
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
    "preprotractor": "webdriver-manager update", 
    "protractor": "protractor protractor.config.js", 
    "pretest": "npm run build", 
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
    "pretest:once": "npm run build", 
    "test:once": "karma start karma.conf.js --single-run", 
    "lint": "tslint ./src/**/*.ts -t verbose" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "~2.4.6", 
    "@angular/compiler": "~2.4.6", 
    "@angular/core": "~2.4.6", 
    "@angular/forms": "~2.4.6", 
    "@angular/http": "~2.4.6", 
    "@angular/platform-browser": "~2.4.6", 
    "@angular/platform-browser-dynamic": "~2.4.6", 
    "@angular/router": "~3.4.6", 

    "angular-in-memory-web-api": "~0.2.1", 
    "systemjs": "0.20.2", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.3", 
    "zone.js": "^0.7.4" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.1.0", 
    "lite-server": "^2.2.2", 
    "typescript": "~2.1.5", 

    "canonical-path": "0.0.2",  
    "tslint": "^4.4.2", 
    "lodash": "^4.16.4", 
    "jasmine-core": "~2.5.2", 
    "karma": "^1.4.1", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.0.0", 
    "rimraf": "^2.5.4", 

    "@types/node": "^7.0.5", 
    "@types/jasmine": "^2.5.36"  
    }, 
    "repository": {} 
} 

回答

3

更改systemjs.config.js

package項改變appapp: {main: 'app/modules/app/app.module', defaultExtension: 'js'}

如果你有地方創建了應用的捆綁,你應該指向app關鍵該捆綁而不是app.module

+1

其實只是: 應用:{main:'modules/app/app.module',defaultExtension:'js'} – ohadinho