Angular first course issue

JavaScript
1

I follow all the instruction to the dot, so I think, I am new to angular, I am a mainframe programmer for 30 years, none of this new stuff, but I am beginning to understand, I need angular, I want to create a tool that will access the ibm mainframe and I had about a week trying to figure out this issue, I can only see <my-app> Page is now loading</my-app> and that is all, I am using windows 10, I cant figure it out, this would be my first Angular course on the list

localhost/:26 Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	    at eval (<anonymous>)
	Evaluating http://localhost:3002/app
	Error loading http://localhost:3002/app
	    at eval (<anonymous>)
	Evaluating http://localhost:3002/app
	Error loading http://localhost:3002/app
2

It sounds like you have some HTML mixed in with your scripting.

3 
<html>

<head>
    <title>Angular2 Skeleton</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">

    <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="node_modules/es5-shim/es5-shim.js"></script>
    <script src="node_modules/es6-shim/es6-shim.js"></script>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/tether/dist/js/tether.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

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

</head>

<body>
    <my-app>Page is now loading</my-app>
</body>

</html>

I just followed the couse

4

What does your system config look like?

5

Any chance one of the referenced JavaScript files has <script> tags?

6

app.componenet.js

hello from angular does not show up

};
AppComponent = __decorate([
    core_1.Component({
        selector: 'my-app',
        template: '<h2>Hello from Angular 2</h2>'
    }), 
    __metadata('design:paramtypes', [])
], AppComponent);
exports.AppComponent = AppComponent;
//# sourceMappingURL=app.component.js.map
7

systemjs.config.js

(function(global) {
    System.config({
        path: {
            'npm': 'node_modules/'
        },
        map: {
            app: 'app',
            '@angular/core': 'npm@angular/core/dundles/core.umd.js',
            '@angular/comm': '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-brower-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',

            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npmangular-in-memory-web-api'

        },

        package: {
            app: {

                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);
8

@rarayaquiros: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your earlier posts for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

9

ok apology, I am new here

1 Like
10

Which angular course are you following? For I’ve seen package in your config appear as packages in others.

11

No need to apologise; I was just letting you know.

12

Creating your first angular 2 app
it is useless sending all code dont waste your time on this, I had found many people with the same issue in the internet and some had to do with browser definition

it is not working for me, tried to go on second couse, created the card.componenet.html separate and the same issue as the prior course, I am doing something wrong

thanks for your help

13

I’m seeing that plural paths, and plural packages is being used in this example systemjs.config.js file: https://github.com/Corneezius/Angular2-Skeleton/blob/master/systemjs.config.js

14

I took that out before, I will check again

15

take a break from this, the guy in the video has paths: packages: and it worked for him… cant understand that token is coming from, it seems it does not want to load the app with the “hello from angular tag”

I took it out hoping that will do, it just gets stock with one error <

app.component.ts template: '<h2>Hello from Angular 2</h2>'

we can talk some other time, thanks for your help

16

one last note

I am a ibm cics engineer on the mainframe, 34 years experience, I want to create a tool to test cics webservices , track history and retest, regenerate, also include cics performance for each message trip, I have a mainframe at home to do that

I lack java, javascript and angular skills, I think angular will let me achieve what I want to do, put tool on the market because it will save me tons of code…

17

[quote=“rarayaquiros, post:15, topic:285703, full:true”]
take a break from this, the guy in the video has paths: packages: and it worked for him…[/quote]

That might explain things. Your file doesn’t have paths and packages. Instead it has path and package when they should be plural instead.

1 Like
18

In my experience you need to be quite skilled at JavaScript before even thinking of touching Angular. It’s not user-friendly.

19

I was on the first course of javascript , I did half of it butt I am a rush, so you mean I have to go back to take all those courses before jumping on angular

would you recommend that?? it kind of make sense, althougy I will probably do my thing in javascript and not angular…

you opinion is valuable

20

Yes, I strongly recommend that you get a good grounding in JavaScript, and absorb the details in some recent JavaScript books. Sites are built on a foundation of HTML+CSS+JavaScript, with HTML coming first for the content, CSS for the presentation to make it look good, and JavaScript for behaviour that occurs after the page first loads.