Question

由于某种原因，它在angular2上给我错误的意外令牌导入。我有点调试它，发现当我导入component-mymovies时，错误发生在app-component.ts上......这是我的主要文件... 应用程序/应用-component.ts：

import {Component} from 'angular2/core';
import {myMoviesComponent} from './component-mymovies'

@Component({
    selector: 'my-shop',
    template: 
    `
    <h1>Welcome to the shop!</h1>
    <p>Weve the following movies available</p>
    <myMovies></myMovies>
    `,
    directives :[myMoviesComponent]
})
export class myShopComponent { 


}

应用程序/组件mymovies.ts：

import {Component} from 'angular2/core';

@Component({
    selector: 'myMovies',
    template: 
    `
    <ul>
        <li>Some Movie</li>
        <li>Another Movie</li>
        <li>Another Another Movie</li>
        <li> Another Another Another Movie</li>
    </ul>

    `
})
export class myMoviesComponent { 


}

Main.ts：

import {bootstrap}    from 'angular2/platform/browser';
import {myShopComponent} from './app-component';

bootstrap(myShopComponent);

和index.html：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <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/es6/dev/src/testing/shims_for_IE.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>


    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-shop>Loading...</my-shop>
  </body>
</html>

错误：

SyntaxError: Unexpected token import
    Evaluating https://angular2mehul-amanuel2.c9users.io/app/component-mymovies.js
    Error loading https://angular2mehul-amanuel2.c9users.io/app/component-mymovies.js as "./component-mymovies" from https://angular2mehul-amanuel2.c9users.io/app/app-component.js
    at eval (native)
    at SystemJSLoader.__exec (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:1395:16)
    at SystemJSLoader.<anonymous> (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:3258:18)
    at SystemJSLoader.<anonymous> (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:3526:24)
    at SystemJSLoader.<anonymous> (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:3774:26)
    at SystemJSLoader.<anonymous> (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:4121:26)
    at SystemJSLoader.instantiate (https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:4357:28)
    at https://angular2mehul-amanuel2.c9users.io/node_modules/systemjs/dist/system.src.js:333:33
    at Zone.run (https://angular2mehul-amanuel2.c9users.io/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
    at zoneBoundFn (https://angular2mehul-amanuel2.c9users.io/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

这是我编码的地方......

https://ide.c9.io/amanuel2/angular2mehul

Answer 1

看了你的https://angular2mehul-amanuel2.c9users.io/app/component-mymovies.js之后，它似乎不是一个已编译的JS文件，但它包含TypeScript代码。这就是SystemJS无法导入它的原因。

您需要将TypeScript文件中的代码编译到JS文件中。

如何生成app/component-mymovies.js文件？使用tsc？

意外的令牌导入

1 个答案: