Question

我是Angular的新手，我正在尝试运行一个种子项目

<!DOCTYPE html>
<html>
    <head>
        <title>Angular 2 Seed [using RC4] - Minimalistic TypeScript starter project</title>
        <base href="." />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

        <!-- @exclude -->
        <link rel="stylesheet" href="styles/vendor/coresheet.min.css" />
        <link rel="stylesheet" href="styles/app.css" />

        <script src="src/vendor/node_modules/system.src.js"></script>
        <script src="src/vendor/node_modules/Reflect.js"></script>
        <script src="src/vendor/node_modules/zone.js"></script>
        <script src="src/vendor/node_modules/long-stack-trace-zone.js"></script>

        <script src="app/system.conf.js"></script>
        <!-- @endexclude -->

        <!-- @include dist.head.html -->
    </head>

    <body>
        <div class="page">
            <app>Loading...</app>
        </div>
    </body>
</html>

app.component.ts：

import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { IsRouteActive } from './pipes/is-route-active.pipe';
import { AuthService } from './services/auth.service';
import { PRECOMPILE_COMPONENTS } from './routes';

@Component({
    selector: 'app',
    templateUrl: 'src/app.component.html',
    styleUrls: ['styles/components/app.css'],
    providers: [],
    directives: [ROUTER_DIRECTIVES],
    pipes: [IsRouteActive],
    precompile: PRECOMPILE_COMPONENTS
})

export class AppComponent {
    isUserAuthorized: boolean = false;

    constructor(private _router: Router, private _authService: AuthService) {
        this._router.events.subscribe(() => {
            this.isUserAuthorized = this._authService.isUserAuthorized();
        });
    }

    logout() {
        this._authService.logout();
        this._router.navigateByUrl('/');
    }
}

system.conf.js：

System.config({
    baseURL: './',
    map: {
        '@angular': 'src/vendor/node_modules/@angular',
        'rxjs': 'src/vendor/node_modules/rxjs'
    },
    packages: {
        'src': {
            defaultExtension: 'js'
        },
        '@angular/common': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/compiler': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/core': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/http': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        '@angular/router': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        }
    }
});

System.import('./src/bootstrap.js').catch(function(err) {
    console.error(err);
});

以下是seed-project

错误是（在npm开始之后）

system.conf.js：1未捕获的SyntaxError：意外的标记＆lt;

无法解析SourceMap：http://localhost:8080/src/vendor/node_modules/Reflect.js.map

在这方面的任何帮助将不胜感激

Answer 1

此种子项目未设置为使用npm start命令运行。

您必须按照以下步骤进行操作 -

步骤1：运行以下命令以安装所有依赖项。

npm install typings -g
npm install
typings install

步骤2：您需要运行gulp命令

gulp start:dev

从http://localhost:8080/

运行您的应用程序

希望这有帮助。

修改

在Chrome中，打开开发人员工具＆gt;设置＆gt;偏好＆gt;来源禁用“启用JavaScript源地图”复选框＆＃39;并刷新http://localhost:8080/

未捕获的SyntaxError-意外的令牌+ 1以上

1 个答案: