app.module 404 (Not Found)

[dalenguyen]

Hi,

I just run npm install and npm start. However, after that it shows the 404 Not found error. Together with these errors below.

Error: (SystemJS) XHR error (404 Not Found) loading http://dalex.me/src/app/app.module Error: XHR error (404 Not Found) loading http://dalex.me/src/app/app.module at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://dalex.me/node_modules/zone.js/dist/zone.js:1190:29) [<root>] at Zone.runTask (http://dalex.me/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://dalex.me/node_modules/zone.js/dist/zone.js:416:38) [<root>] Error loading http://dalex.me/src/app/app.module as "./app/app.module" from http://dalex.me/src/main.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://dalex.me/node_modules/zone.js/dist/zone.js:1190:29) [<root>] at Zone.runTask (http://dalex.me/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://dalex.me/node_modules/zone.js/dist/zone.js:416:38) [<root>] Error loading http://dalex.me/src/app/app.module as "./app/app.module" from http://dalex.me/src/main.js at addToError (http://dalex.me/node_modules/systemjs/dist/system.src.js:122:78) [<root>] at linkSetFailed (http://dalex.me/node_modules/systemjs/dist/system.src.js:695:21) [<root>] at http://dalex.me/node_modules/systemjs/dist/system.src.js:495:9 [<root>] at Zone.run (http://dalex.me/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>] at http://dalex.me/node_modules/zone.js/dist/zone.js:679:57 [<root>] at Zone.runTask (http://dalex.me/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at drainMicroTaskQueue (http://dalex.me/node_modules/zone.js/dist/zone.js:529:35) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://dalex.me/node_modules/zone.js/dist/zone.js:420:25) [<root>]

Could you please take a look at this?

[andonyns]

I have the same problem right now when I run the code. Are you using version 0.7.7?

[oscarfuquen]

Could you post the system.js.config and packages.json

[dalenguyen]

It worked now. I had to make some changes according to my local address: app folder in systemjs.config.js, base and location from index.html, templateUrl and styleUrls from Components

[mukul2k5]

hi what changes you made can you post it too.

[jnyanendra]

Please check and modify below lines in systemjs.config.js

1. 'npm:': '/node_modules/'
2. 'app': '/src/app',
3. loader: '/src/systemjs-angular-loader.js'

[XerO00]

1] 18.03.17 12:34:02 404 GET /src/app/boot.js

Getting this error and tried everything here are the files which i used

Package.json

{
"name": "angular-firstapp",
"version": "1.0.0",
"description": "The TypeScript Definition Manager",
"main": "dist/bin.js",
"bin": {
"typings": "dist/bin.js"
},
"files": [
"dist/",
"typings.json"
],
"scripts": {
"start": "concurrently "npm run tsc:w" "npm run lite" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc-w",
"typings": "typings"
},
"repository": {
"type": "git",
"url": "git://github.com/typings/typings.git"
},
"keywords": [
"typings",
"typescript",
"definition",
"declaration",
"package",
"manager",
"typed"
],
"author": {
"name": "Blake Embrey",
"email": "hello@blakeembrey.com",
"url": "http://blakeembrey.me"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/typings/typings/issues"
},
"homepage": "https://github.com/typings/typings",
"dependencies": {
"2": "^1.0.2",
"@angular/common": "^5.2.9",
"@angular/compiler": "^5.2.9",
"@angular/core": "^5.2.9",
"@angular/forms": "^5.2.9",
"@angular/http": "^5.2.9",
"@angular/platform-browser": "^5.2.9",
"@angular/platform-browser-dynamic": "^5.2.9",
"@angular/router": "^5.2.9",
"@angular/upgrade": "^5.2.9",
"angular": "^1.6.9",
"angular-core": "^0.0.5",
"angular-in-memory-web-api": "^0.5.4",
"angular2": "^2.0.0-beta.21",
"bootstrap": "^4.0.0",
"concurrently": "^3.5.1",
"core-js": "^2.5.3",
"install": "^0.10.4",
"lite-server": "^2.3.0",
"npm": "^5.7.1",
"reflect-metadata": "^0.1.12",
"es6-promise": "^4.2.4",
"es6-shim": "^0.35.3",
"rxjs": "^5.5.7",
"sudo": "^1.0.3",
"systemjs": "^0.21.0",
"typings": "^2.1.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"dependency-check": "^3.1.0",
"nock": "^9.2.3",
"@angular/compiler": "^5.2.9",
"rimraf": "^2.6.2",
"ts-node": "^5.0.1",
"tslint": "^5.9.1",
"tslint-config-standard": "^7.0.0",
"typescript": "^2.8.0-dev.20180308"
}
}

tsconfig.ts

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"baseUrl": "src",
"sourceMap": true,
"skipLibCheck": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

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/',
  'app': '/src/app',
  'loader': '/src/systemjs-angular-loader.js'
  },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  app : 'app', // 'dist',
  // 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',
  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

       // other libraries
       'rxjs': 'npm:rxjs',
   },
   // packages tells the System loader how to load when no filename and/or no extension
   packages: {
       app: { main: 'boot.js', defaultExtension: 'js' },
       rxjs: { defaultExtension: 'js' },
    
       src:{
           format: 'register',
           defaultExtension: 'js'
       },  boot: {
           format: 'register',
           defaultExtension: 'js'
         }
   
   }
  

  });

  System.import('src/app/boot')
  .then(null, console.error.bind(console));

})(this);

[XerO00]

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{

}

[XerO00]

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {UpgradeAdapter} from 'angular2/upgrade';

var adapter = new UpgradeAdapter();

app.directive('ng2Book', adapter.downgradeNg2Component(AppComponent));

adapter.bootstrap(document.body, ['First App']);

app.component.js

import {Component} from '@angular/core';

var adapter = new UpgradeAdapter();

@component({

selector: 'my-app',
template: '<p>Welcome to our app</p>'

})

export class AppComponent{

}

[XerO00]

main.ts

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

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

import {AppComponent} from './app.component';

const platform =platformBrowserDynamic();

platform.bootstrapModule(AppModule)

index.html

<title>First App</title>

<script src="./node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="./node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
 <link rel="shortcut icon" href="">


<script src="systemjs.config.js"></script>

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

Loading First Angular Application ...