带有 SystemJs 和打字稿转译器的 Angular2 不起作用

我的打字稿转译器配置不起作用。我的@angular组件未加载。我收到此错误：区域感知错误：

"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
  }
}

系统JS目录

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'},
  }
});

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

包.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

/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

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

和应用程序/主要.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

可能是系统.js配置有问题。昨晚我遇到了困难，寻求帮助。

我今天遇到了同样的错误，并找到了有效的东西。我有一个这样的 tsconfig

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

}， "排除"：[ "node_modules"， "万维网" ]}

我与 Angular 快速入门中的示例进行了比较，并注意到他们使用的是 commonjs

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

}， "排除"：[ "node_modules"， "万维网" ]}

重新编译了ts文件，它起作用了。

您是否正在使用官方的 angular 2 项目生成器？angular-cli 现在使用 Webpack （https://github.com/angular/angular-cli）。

在 Webpack 设施之外，角度 cli pussui 组件生成器、服务等。

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

相关内容

最新更新

热门标签：