2

So I am having an issue with displaying my first component in angular 2. I followed this post to setup typescript. I followed the 5 min quick start guide here on Angular website to get my first component working. I don't get an error or anything in the console but I do see loading.... in the browser. Does anyone know what I did wrong?

package.json file

{
  "name": "budget_calculator",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  }
}

main.ts

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

import { Navigation } from './components/nav.component';

bootstrap(Navigation);

nav.component.ts

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

@Component({
    selector: 'my-app',
    template: '<h1>Angular 2 is present</h1>'
})

export class Navigation {

}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Load libraries for Angular 2-->
        <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>
        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('./app/main').then(null, console.error.bind(console));
        </script>
    </head>

    <body>
        <header>
            <my-app>
                Loading.....
            </my-app>
        </header>
    </body>
</html>

project structure

node
node_modules
src
   -> main
     -> webapp
        -> node_modules
        -> app
            -> components
                - nav.component.js.map
                - nav.component.d.ts
                - nav.component.ts
                - nav.component.js
            - main.d.ts
            - main.js
            - main.js.map
            - main.ts
            - index.html

Javascript console error

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0)
[Error] Error: invoke@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34
    runGuarded@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54
    http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40


Error loading http://localhost:8080/BudgetCalculator/app

(anonymous function) (index.html:19)
invoke (zone.js:323)
run (zone.js:216)
(anonymous function) (zone.js:571)
invokeTask (zone.js:356)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
g (shim.min.js:8:10178)
(anonymous function) (shim.min.js:8:10300)
k (shim.min.js:8:14323)
Community
  • 1
  • 1
Grim
  • 2,398
  • 4
  • 35
  • 54
  • First, I assume you've checked that the typescript does indeed generate the `.js` files when you build the package. Second, most likely you're getting an error inside browser console. So I suggest to use chrome and see what the error is then add it to your post. –  May 31 '16 at 00:54
  • @Hani please see edit, typescript does generate the .js files. – Grim May 31 '16 at 01:50
  • Also, move to RC1 as soon as you can since it'll make it easier to migrate to later RC releases or the final release. –  May 31 '16 at 03:46
  • Remove templateUrl and make it template. It should work – Gary May 31 '16 at 03:55
  • Second check if u are serving the 404 error paths in webserver and that its a readable folder. Try ../node_modules relative path – Gary May 31 '16 at 03:57
  • updated to what I have and the same errors keep occurring with ../node_modules or /node_modules. I still keep getting the 404s – Grim May 31 '16 at 04:02
  • @Gary you said to second check if you are serving the 404 error paths in the web server and that its a readable folder....not exactly sure what you mean by this.... – Grim May 31 '16 at 04:16
  • Is your node folder non-servable private web folder. Check tomcat docs – Gary May 31 '16 at 09:23
  • Instead of just ../node_modules what I meant is check your root web folder and then use ../../../ number of times your root web folder is structured. Try this ... what you are facing is pathing issues. If you still face the issue use in your first line of your head tag of main index.html page and then try with relative path of node modules. – Gary May 31 '16 at 12:30
  • @Gary I solved the problem but only by looking at the documentation of tomcat and how it deploys an application. I learned that it deploys whatever is in the webapp directory. WildFly server seems to deploy this way as well. I had node_modules at the root level of the project. I solved the problem by copying and pasting it into webapp and then using a relative path. I tried what you suggested above with but it didn't work. Took me forever to figure this out. – Grim May 31 '16 at 17:15
  • http://stackoverflow.com/questions/4543936/load-images-from-outside-of-webapps-webcontext-deploy-folder-using-hgraphi resource I found giving me options to deploy my files and folders..... – Grim May 31 '16 at 17:34
  • Cheers that it is resolved – Gary Jun 01 '16 at 01:57
  • @Gary Thank You, I learned alot and that is what matters..... – Grim Jun 01 '16 at 02:21

1 Answers1

4

You need to map your packages @angular/core,@angular/common... etc using systemjs. Otherwise, how would it know where to find them?

create a new file named systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Then, in your index.html, import the file you created:

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

please notice that you should remove following from index.html

System.config({
    packages: {
        app: {
             format: 'register',
             defaultExtension: 'js'
        }
    }
});

The code above is taken from angular2 quick start page at the very bottom of the page.

Abdulrahman Alsoghayer
  • 16,462
  • 7
  • 51
  • 56