Typescript : 잡히지 않은 SyntaxError : 예기치 않은 토큰

Typescript와 ASP.NET Core로 Angular2를 설정하려고합니다. 여기 package.json이다Typescript : 잡히지 않은 SyntaxError : 예기치 않은 토큰

{ 
    "name": "testappuit", 
    "version": "1.0.0", 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.6", 
    "@angular/compiler": "2.0.0-rc.6", 
    "@angular/compiler-cli": "0.6.0", 
    "@angular/core": "2.0.0-rc.6", 
    "@angular/forms": "2.0.0-rc.6", 
    "@angular/http": "2.0.0-rc.6", 
    "@angular/platform-browser": "2.0.0-rc.6", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.6", 
    "@angular/router": "3.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.6", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.11", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.17", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "typescript": "^1.8.10", 
    "typings":"^1.3.2" 
    } 
}

및 tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "../wwwroot/app" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
}

및

(function (global) { 
    System.config({ 
     paths: { 
      'npm:': 'node_modules/' 
     }, 
     map: { 
      app: 'app', 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': '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-browser-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', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
     }, 
    packages: { 
       app: { 
        main: './main.js', 
        defaultExtension: 'js' 
       }, 
       rxjs: { 
        defaultExtension: 'js' 
       }, 
       'angular2-in-memory-web-api': { 
        main: './index.js', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
    })(this);

및 app.component.ts systemjs.config.js :

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent { }

을

app.module.ts :

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

및 main.ts

/// <reference path="../../typings/globals/core-js/index.d.ts" /> 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule);

index.html을 여기

<html> 
<head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <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> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app/main').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

프로젝트 구조입니다 : 내가 브라우저에서 실행하려고하면

전 계속 받음

Uncaught SyntaxError: Unexpected token Uncaught ReferenceError: System is not defined

해결책을 찾아 내도록 도와주세요.

출처

2016-09-08 Vivek

systemjs.config.js가 프로젝트의 루트에 없기 때문에 믿을 수 있습니다. package.json을 사용하여 루트로 이동하십시오. 또는 직접 index.html I.E.에 매핑하십시오.

<script src="app/systemjs.config.js"></script>

또는

<script src="wwwroot/app/systemjs.config.js"></script>

당신은 심지어뿐만 아니라 높은 수준을 추가 할 수 있습니다. index.html을 프로젝트의 루트에 두는 것도 좋습니다. 당신이 당신의 응용 프로그램을 실행하고

Loading...

이 표시되지 않는 경우 경우 그 팁 프로젝트 중 하나를 당신의 index.html을보고 있지 않은지 꺼져 있습니다. 모든 편집

죄송

PS는 또 다른 문제는 프로젝트를 찾아 '응용 프로그램'그래서 예를 들어 당신의 systemjs.config.js에서뿐만 아니라 그를 매핑 시도 할 수없는 수

map: { 
     app: 'src/testappUI/wwwroot/app',

출처

2016-09-08 14:25:12 Bean0341

'Loading..'는 브라우저에서 볼 수 있습니다. 나는 여전히'systemjs.config.js'를 루트로 옮기려고 시도했지만 여전히 동일한 오류 – Vivek

을 가지고 있으며 여러분은'' in index.html – Bean0341

그냥 호기심에서 ... 당신은 tsconfig.json에서 왜 node_modules와 wwwroot를 제외하고 있습니까? 내 이해에서이 .js 파일을 컴파일 할 수 없게됩니다. 또한 프로젝트가 중단됩니다. 해당 제외 항목을 제거해보십시오. 어둠 속에서 총알 같은 종류의 .... 내가 당신의 문제는 당신이 어떻게 든 당신의 systemjs을보고 isnt하는 것을 알고있다. – Bean0341

Typescript : 잡히지 않은 SyntaxError : 예기치 않은 토큰

답변

관련 문제