意外的令牌导入

Unexpected token import

本文关键字：导入 令牌 意外      更新时间：2023-09-26

由于某种原因，它在 angular2 上给了我意外的令牌导入错误。我有点调试它，发现错误在 app-component.ts 上，当我导入组件-mymovies...这是我的主要文件...app/app-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 { 

}

app/component-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 { 

}

主：

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

和索引.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

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

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

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

相关文章：