Recently, I began working on an Angular 2 tutorial app using this repository. While I can successfully launch the app and display static content, I am facing challenges with rendering dynamic content from the component. I have a feeling that the error might be related to this issue.
Although the tutorial includes a video, the error I am experiencing is not addressed in the video.
Here is the specific error message I encountered:
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
Below is the content of my index.html file:
<!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>
Initial files for Angular2: Getting Started
</body>
</html>
Here is the content of my app.component.ts file:
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';
}
Additionally, this is the content of my main.ts file:
import { bootstrap } from 'angular2/platform/browser';
// Main component
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Please note that the tutorial utilizes Typescript, which I am not very familiar with.