Question

我尝试设置ASP.NET MVC 5（不是Core）+ Angular 2.0.0 + JSPM + SystemJS + TS Loader。

在我看来，TS装载机可能有些不好。有什么建议吗？

当我运行app时，我收到错误：

Error: (SystemJS) core_1.provide is not a function
    TypeError: core_1.provide is not a function
        at execute (http://localhost:59711/app/bootstrap.ts!transpiled:26:24)
    Error loading http://localhost:59711/app/bootstrap.ts

以下是我的配置文件：

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    /* target of the compilation (es5) */
    "module": "system",
    /* System.register([dependencies], function) (in JS)*/
    "moduleResolution": "node",
    /* how module gets resolved (needed for Angular 2)*/
    "emitDecoratorMetadata": true,
    /* needed for decorators */
    "experimentalDecorators": true,
    /* needed for decorators (@Injectable) */
    "noImplicitAny": false
    /* any has to be written explicity*/
  },
  "exclude": [
    /* since compiling these packages could take ages, we want to ignore them*/
    "jspm_packages",
    "node_modules"
  ],
  "compileOnSave": false
  /* on default the compiler will create js files */
}

config.js（jspm，配置文件已简化）

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  typescriptOptions: {
    "tsconfig": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtensions": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }
    }
  },

  map: {
    "@angular/common": "npm:@angular/common@2.0.0",
    "@angular/compiler": "npm:@angular/compiler@2.0.0",
    "@angular/core": "npm:@angular/core@2.0.0",
    "@angular/http": "npm:@angular/http@2.0.0",
    "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0",
    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0",
    "@angular/router": "npm:@angular/router@3.0.0",
    "babel": "npm:babel-core@5.8.38",
    "babel-runtime": "npm:babel-runtime@5.8.38",
    "core-js": "npm:core-js@1.2.7",
    "reflect-metadata": "npm:reflect-metadata@0.1.8",
    "rxjs": "npm:rxjs@5.0.0-beta.12",
    "ts": "github:frankwallis/plugin-typescript@5.1.2",
    "zone.js": "npm:zone.js@0.6.25",
    "github:frankwallis/plugin-typescript@5.1.2": {
      "typescript": "npm:typescript@2.0.2"
    },
  }
});

的index.html

<script src = "../../jspm_packages/npm/reflect-metadata@0.1.8/Reflect.js"></script>
<script src = "../../jspm_packages/system.js"></script>
<script src = "../../config.js"></script>
<script>
    System.config
    ({
        map: {
            "@@angular/common": "npm:@@angular/common@2.0.0",
            "@@angular/compiler": "npm:@@angular/compiler@2.0.0",
            "@@angular/core": "npm:@@angular/core@2.0.0",
            "@@angular/http": "npm:@@angular/http@2.0.0",
            "@@angular/platform-browser": "npm:@@angular/platform-browser@2.0.0",
            "@@angular/platform-browser-dynamic": "npm:@@angular/platform-browser-dynamic@2.0.0",
            "@@angular/router": "npm:@@angular/router@3.0.0",
            "reflect-metadata": "npm:reflect-metadata@0.1.8"
        },
        transpiler: "ts",
        packages:
        {
            "app": {
                "defaultExtension": "ts",
                "meta": {
                    "*.ts": {
                        "loader": "ts"
                    }
                }
            }
        }
    });

    console.log("System.Config Init OK");
</script>

bootstrap.ts

import {bootstrap} from "@angular/platform-browser"
import {provide} from "@angular/core"
import {HTTP_PROVIDERS} from "@angular/http"
import {
    APP_BASE_HREF,
    ROUTER_PROVIDERS,
    ROUTER_PRIMARY_COMPONENT,
    HashLocationStrategy,
    LocationStrategy} from "@angular/router"
import {AppComponent} from "./components/app.component"


bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    provide(ROUTER_PRIMARY_COMPONENT, { useValue: AppComponent }),
    provide(APP_BASE_HREF, { useValue: "/" }),//ng2 potrebuje base tag
    provide(LocationStrategy, { useClass: HashLocationStrategy }),//default je PathLocationStragy, treba zmenit kvoli mvc api router

]).catch((error: any) => console.error(error));

Answer 1

从版本2.0.0-rc.6检查更改日志：

核心：删除已弃用的提供者/绑定API

不再接受这些形式的提供者：

bind(MyClass).toFactory(...)
new Provider(MyClass, toFactory: ...)

现在唯一接受的表格是：

{provide: MyClass, useFactory: ...}

Angular2的最终版本也需要NgModule。如果您使用最终的Angular2 v2.0.0，那么您的应用程序就是这样的。看看Quick Start Guide，看看应该如何引导应用程序！

SystemJS core_1.provide不是一个函数

1 个答案: