Question

我使用typescript转换器的配置不起作用。我的@angular组件未加载。我收到此错误： ZoneAwareError：

"Error: core_1.Component is not a function
  Evaluating http://127.0.0.1:64223/app/app.component.ts
  Evaluating http://127.0.0.1:64223/app/app.module.ts
  Evaluating http://127.0.0.1:64223/app/main.ts
  Loading app
    at LoaderError__Check_error_message_for_loader_stack (http://127.0.0.1:64223/node_modules/systemjs/dist/system.src.js:78:11) [<root>]
    at http://127.0.0.1:64223/node_modules/systemjs/dist/system.src.js:281:11 [<root>]
    at Zone.run (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:535:57 [<root>]
    at Zone.runTask (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:433:35) [<root>]"

我知道转换器并不擅长制作，但我在开发环境中使用它。所以接下来是我的配置：

tsconfig

{
  "disableCompileOnSave": true,
  "compileOnSave": false,
  "compilerOptions" : {
    "target" : "ES5",
    "module" : "commonjs",
    "experimentalDecorators" : true,
    "noImplicitAny" : true
  }
}

systemjs

System.config({
  transpiler: 'ts',
    typescriptOptions: {
        module: "system",
        target: "es2015",
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },

  map: {
      "ts": "/node_modules/plugin-typescript/lib",
      "typescript": "/node_modules/typescript",

      'rxjs': 'node_modules/rxjs',
      '@angular': 'node_modules/@angular',
      '@angular/common': 'node_modules/@angular/common/bundles',
      '@angular/core': 'node_modules/@angular/core/bundles',
      '@angular/compiler': 'node_modules/@angular/compiler/bundles',
      '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles',
      '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles'
  },

  packages: {
    "ts": {
      "main": "plugin.js"
    },
    "typescript": {
      "main": "/lib/typescript.js",
      "meta": {
        "/lib/typescript.js": {
          "exports": "ts"
        }
      }
    },
    'app'                              : {main: 'main', defaultExtension: 'ts'},
    'rxjs'                             : {main: 'Rx'},
      '@angular/common': { main: 'common.umd.js'},
      '@angular/core': { main: 'core.umd.js'},
      '@angular/compiler': { main: 'compiler.umd.js'},
      '@angular/platform-browser': { main: 'platform-browser.umd.js'},
      '@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.js'},
  }
});

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular seed project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="node_modules/typescript/lib/typescript.js"></script>
    <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/systemjs/dist/system.src.js"></script>
    <script src="system.config.js"></script>
    <script>

        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
<app>Loading...</app>
</body>
</html>

的package.json

{
  "name": "angular2",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "@angular/http": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/router": "^3.4.5",
    "core-js": "^2.4.1",
    "plugin-typescript": "^6.0.4",
    "rxjs": "^5.1.0",
    "systemjs": "^0.20.5",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "live-server": "^1.2.0",
    "typescript": "2.0.0"
  }
}

以及我的组件和模块：

应用/ app.component.ts

import { Component } from '@angular/core';
console.log('@angular/core');
@Component({
    selector: 'app',
    template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
    title = 'Tour of Heroes';
    myHero = 'Windstorm';
}

应用/ 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 { }

和 app / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

system.js配置可能有问题。我昨晚很难过，寻求帮助。

Answer 1

我今天遇到了同样的错误，并找到了有效的方法。 我有这样的tsconfig

"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": false,
"sourceMap": true,
"target": "es5"

}，＆＃34;排除＆＃34;：[ ＆＃34; node_modules＆＃34 ;, ＆＃34; wwwroot的＆＃34; ] }

我与Angular Quickstart中的样本进行了比较，发现他们使用的是 commonjs

"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": false,
"sourceMap": true,
"target": "es5"

}，＆＃34;排除＆＃34;：[ ＆＃34; node_modules＆＃34 ;, ＆＃34; wwwroot的＆＃34; ] }

重新编译了ts文件并且有效。

Answer 2

我刚遇到同样的问题。尝试降级systemjs版本。我将我从0.20.12更改为0.19.40，应用程序突然开始工作。该建议来自here。请注意，我在tsconfig中有"module": "system"。当然，您需要从systemjs版本字符串中删除插入符号。

Angular2与SystemJs和typescript转换器无法正常工作

2 个答案: