Question

我刚刚从this repo启动了一个角度2教程应用程序，我可以启动应用程序并获取要显示的静态内容，但无法显示组件中的动态内容，我怀疑错误与它有关。

教程附带视频，但视频中没有错误。

我收到此错误：

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

我的index.html如下所示：

<!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>

我的app.component.ts看起来像是：

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';
}

，我的main.ts看起来像是：

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

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

bootstrap(AppComponent );

注意：他们在视频中使用的是Typescript，我不熟悉Typescript。

Answer 1

您可能忘了添加一些backticks（查看模板参数）：

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

Answer 2

它对我来说看起来很旧，有更好的方法可以开始： includes https://github.com/angular/quickstart

Angular 2 - SyntaxError：无效的正则表达式：缺少/

2 个答案: