Angular 2 - SyntaxError: Invalid regular expression: missing /

Question

I just started an angular 2 tutorial app from this repo, I can start the app and get the static content to display but cannot display dynamic content from the component, I suspect the error has something to do with it.

The tutorial comes with a video but the error is not on the video.

I get this error:

angular2-polyfills.js:390 Error: SyntaxError: Invalid regular expression: missing /
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:390:29)
        at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:44)
        at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:635:58
    Evaluating http://localhost:3000/app/app.component.js
    Error loading http://localhost:3000/app/app.component.js as "./app.component" from http://localhost:3000/app/main.js

My index.html looks like:

<!DOCTYPE html>
<html>

<head>
    <title>Acme Product Management</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="app/app.component.css" rel="stylesheet" />

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.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>
    Starter files for Angular2: Getting Started
</body>

</html>

My app.component.ts looks like:

import { Component } from 'angular2/core';

@Component({
    selector: 'pm-app',
    template: 
    <div><h1>{{pageTitle}}</h1>
    <div>My first Component</div>
    </div>

})
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

export class TestComponent {
    pageTitle: string = 'Acme Product Management';
}

and my main.ts looks like:

import { bootstrap } from 'angular2/platform/browser';

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

bootstrap(AppComponent );

NOTE: They are using Typescript in the video and I am not familiar with Typescript.

Do you use <input> with pattern anywhere or anything else related to regexp? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 20, 2016 at 18:26

sirrocco · Accepted Answer · 2016-07-20 19:15:29Z

1

Might be that you forgot to add some backticks (look at the template parameter):

@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
    <div>My first Component</div>
    </div>`

answered Jul 20, 2016 at 19:15

sirrocco

8,0294 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simo Mafuxwana Over a year ago

I tried this but got a flood of Token must be defined! syntax errors

Avi · Accepted Answer · 2016-07-20 19:15:36Z

1

it looks old to me, there are better ways to start: https://github.com/angular/quickstart https://github.com/angular/angular-cli

answered Jul 20, 2016 at 19:15

Avi

1,9744 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular 2 - SyntaxError: Invalid regular expression: missing /

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related