rco rco - 2 months ago 23
TypeScript Question

SystemJS core_1.provide is not a function

I try setup ASP.NET MVC 5 (not Core) + Angular 2.0.0 + JSPM + SystemJS + TS Loader.

In my opinion maybe is something bad with TS loader. Any advice?

When I run app I get error:

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


Here are my configuration files:

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, configuration files is simplified)

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

Check the change log from version 2.0.0-rc.6:

core: remove deprecated provider/bind API

These forms of providers are no longer accepted:

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

The only accepted form is now:

{provide: MyClass, useFactory: ...}

Also final version of Angular2 requires NgModule. Your application is inncorect this way if you use final Angular2 v2.0.0. take a look at Quick Start Guide and see how the application should be bootstraped!