I am using toPromise() and its working fine from the website but I get the following errors when I am in code view.
[
I suspect its something todo with my local modules.
The code for the components is
import "rxjs/Rx";
import './rxjs-extensions';
import { Injectable } from '#angular/core';
import { Headers, Http } from '#angular/http';
#Injectable()
export class TokenValidatorService {
constructor(private http: Http) { }
validateToken(token: string): Promise<string> {
return this.http.get('/api/downloader/' + token + '/valid')
.toPromise()
.then(response => {
return response.text()
})
.catch(this.handleError);
}
getDownloadUrl(token: string, pin: string): Promise<string> {
return this.http.get('/api/downloader/' + token + '/' + pin + '/getlink')
.toPromise()
.then(response => {
return response.text()
})
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
My package.json is
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2"
},
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
}
}
and my systemjs.config.js is
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.min.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.min.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.min.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.min.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.min.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.min.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.min.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
You will notice that I load directly from unpkg I suspect that this is why it works in runtime. This is a VS Project it VS is taking care of the typescript etc, the tsconfig.json is
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Edit
It's discussed in the following pages
https://github.com/ReactiveX/rxjs/issues/1696 and https://github.com/Microsoft/TypeScript/issues/8518
I have upgraded to TS2 and I still have the issue.
Related
I have not been able to find a solution by researching the error Error loading /ng2-bootstrap/alert.js as "ng2-bootstrap/alert" from /Scripts/app.modules.js.
I have tried these suggested solutions in System.config.js but they do not solve the problem:
map: {
1. 'ng2-bootstrap': 'node_modules/ng2-bootstrap' or
2. 'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js'
}
packages: {
1. 'ng2-bootstrap': { defaultExtension: 'js' },
2. 'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
}
This is my **System.config.js** which I have read is likely the source of the issue.
(function (global) {
window.System.config({
paths: {
// paths serve as alias
'npm:': '/libs/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/Scripts',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler':
'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser':
'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic':
'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'moment': 'node_modules/moment/moment.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap'
},
// packages tells the System loader how to load when no filename and/or
no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-bootstrap': { format: 'cjs', main:
'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' }
}
});
var ngBootstrapPackageNames = [
'accordion',
'alert',
'bundles',
'buttons',
'carousel',
'collapse',
'dropdown',
'esm',
'modal',
'pagination',
'popover',
'progressbar',
'rating',
'tabset',
'timepicker',
'tooltip',
'typeahead',
'util'
];
function ngBootstrapPackIndex(pkgName) {
//packages['#ng-bootstrap/ng-bootstrap/' + pkgName] = { main:
'index.js', defaultExtension: 'js' };
}
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
})(this);
This is my **app.module.ts** which has been implied but does not seem to help.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
import { CollapsiblePanelComponent } from
'./bootstrap- components/collapsiblePanel.component';
import { InputGroupAddOnComponent } from
'./bootstrap-components/input-group-addon.component';
import { CreateRegimenComponent } from
'./create-regimen/create-regimen.component'
import { AlertComponent } from 'ng2-bootstrap/alert';
import { CollapseModule } from 'ng2-bootstrap/collapse';
import Approuting = require("./app.routing");
//import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CollapseModule,
AlertComponent,
FormsModule,
HttpModule,
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
BrowserModule],
declarations: [
AppComponent,
CollapsiblePanelComponent,
InputGroupAddOnComponent,
CreateRegimenComponent,
CollapseModule
],
bootstrap: [
AppComponent,
CollapsiblePanelComponent,
AlertComponent,
CollapseModule
]
})
export class AppModule { }
This is my Packages.json where I have read that "#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", is the correct syntax. This does not help either.
{
"version": "1.0.0",
"name": "aspnet",
"private": true,
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"#angular/common": "~2.1.0",
"#angular/compiler": "~2.1.0",
"#angular/core": "~2.1.0",
"#angular/forms": "~2.1.0",
"#angular/http": "~2.1.0",
"#angular/platform-browser": "~2.1.0",
"#angular/platform-browser-dynamic": "~2.1.0",
"#angular/router": "~3.1.0",
"#angular/upgrade": "~2.1.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
"#types/core-js": "^0.9.35",
"#types/reflect-metadata": "0.0.5",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"moment": "^2.17.1",
"ng2-bootstrap": "^1.3.3",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/jquery": "^2.0.40",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-tsc": "^1.2.0",
"gulp-typescript": "^2.13.6",
"path": "^0.12.7",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"webpack": "^2.2.1"
}
}
Here is my node_modules directory
How do I get ng2_bootstrap to load without error 404
I finally figured out how to load ng2-bootstrap. For those out there trying to do this there are many many suggestions out there that simply don't work, at least as of February 27, 2017. So it is very frustrating for anybody trying.
This is what I somehow pieced together from the many suggestions I found. The most important suggestion being from ng2-bootstrap themselves. (Although ng2-bootstrap is not complete either).
System.js
(function (global) {
window.System.config({
paths: {
// paths serve as alias
'npm:': '/libs/',
'ng2-bootstrap/ng2-bootstrap': "node_modules/ng2-bootstrap/ng2-bootstrap"
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/Scripts',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic':
'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
// ng2-bootstrap
**'moment': 'node_modules/moment',
'ng2-bootstrap': 'node_modules/ng2-bootstrap'**
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' }
}
});
})(this);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { Routes, RouterModule } from '#angular/router';
import { appComponents as AppComponents, appRoutes as AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
import { **ButtonsModule, DatepickerModule, AlertModule** } from **'ng2-bootstrap';**
import Approuting = require("./app.routing");
#NgModule({
imports: [
FormsModule,
HttpModule,
// InMemoryWebApiModule.forRoot(InMemoryDataService),
RouterModule.forRoot(AppRoutes),
AlertModule.forRoot(),
DatepickerModule.forRoot(),
ButtonsModule.forRoot(),
BrowserModule],
declarations: [
AppComponent,
IndexComponent,
IndexPatientsComponent
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
I looked through the forums, but couldn't find anything relevant.
I just started the tutorial 3 days ago, got to Step 7, and when I add the InMemoryWebApiModule to the mix (as detailed in the steps), I get this error:
All of my config files are directly from what was provided in the tutorial, but I'll provide them here anyway.
Any ideas as to what's going on?
Here is my package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
Here is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
#NgModule({
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService)
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent
],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Here is systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Take a look at the CHANGELOG. You need to use the umd bundle, and remove it from the packages
In systemjs.config.js you should change the mapping to:
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
then delete from packages:
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
I'm trying to upgrade a giant client-side app from Angular 1.x to Angular 2, and I've hit a really annoying roadblock. I've recreated the issue with a dummy, light-weight project (files pasted below), but let me just explain the problem first.
Basically, when my tsconfig.json specifies module as commonjs, I get the following error in my chrome dev console:
app.module.ts:1Uncaught ReferenceError: require is not defined
When I switch the module to system, I get the following error:
Uncaught TypeError: Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.
And when I switch module to umd, everything works fine. But given that angular themselves suggest using commonjs, I'm concerned that umd is not the right answer. However, if I'm wrong about that and umd is perfectly fine, I'd love to hear a good explanation as to why.
Here's my code to reproduce my issue:
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
,
"exclude": [
"node_modules"
]
}
typings.json:
{
"globalDependencies": {
"angular": "registry:dt/angular#1.5.0+20160922195358",
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"jquery": "registry:dt/jquery#1.10.0+20160929162922",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
systemjs.config.js :
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/ ': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
package.json :
{
"name": "mattsApp",
"version": "0.0.1",
"dependencies": {
"angular": "^1.5.8",
"#angular/common": "~2.0.2",
"#angular/compiler": "~2.0.2",
"#angular/core": "~2.0.2",
"#angular/forms": "~2.0.2",
"#angular/http": "~2.0.2",
"#angular/platform-browser": "~2.0.2",
"#angular/platform-browser-dynamic": "~2.0.2",
"#angular/router": "~3.0.2",
"#angular/upgrade": "~2.0.2",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings":"^1.4.0"
},
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
}
}
app.js :
angular.module('app', []);
app.module.ts :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { upgradeAdapter } from './upgrade_adapter';
#NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }
upgradeAdapter.bootstrap(document.body, ['app'], {strictDi: true});
appCtrl.ts :
angular.module('app')
.controller('appCtrl', ['$scope', function($scope) {
$scope.hello = "howdy worldy";
}]);
upgrade_adapter.ts :
import { UpgradeAdapter } from '#angular/upgrade';
import {AppModule} from "./app.module";
export const upgradeAdapter = new UpgradeAdapter(AppModule);
What am I missing?
you need instantiate the UpgradeAdapter with a non null parametter. In this way you need pass a forwardRef instance, something like this:
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
finally you need import the forwardRef
import {NgModule, forwardRef} from '#angular/core';
First, thanks Andres. I need to read up a bit about the forwardRef to understand what that does. But it turns out that the answer in my particular case was something different.
I didn't post my index.html here (simple oversight), but the problem was that I wasn't loading my modules with the System.import('app'). Embarrassing error, I have to admit. So the answer is to add that line.
I should note that this led to a different error which I solved, but I'll point it out here in case others have a similar issue. Since this is a hybrid angular 1 and 2 app, I have typescript files that are sometimes used by angular 1 controllers / directives / etc, and also by angular 2 components. I had changed those typescript files to use export so I could import them into my angular 2 components. This led me to also change my /// in the angular 1 files to use import. Unfortunately, this gave me an "undefinedModule" error. The solution (in my case) is not to use export on typescript files unless they are ONLY used with the angular 2 components. Meaning, in some angular 2 components, I'm actually using the /// and not the import.
Just thought other people might find that useful.
I am creating a sample application in angularjs 2.0. While developement I came across with a serious problem - I can't inject anything to the component through the constructor function.
This is the plnkr url : https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview
I used the following code for importing ItemService from app.item.service.ts
import { ItemService } from './app.item.service';
Then I specified provider as
#Component({
selector: 'list-todo',
template: `
<ul>
<li *ngFor="let item of items">{{item.text}}</li>
</ul>
`,
providers : [ItemService]
})
After that, given code for TodoComponent as
export class TodoComponent implements OnInit {
items:Array<Object> = [];
constructor(private itemService: ItemService){ //here is the problem
}
ngOnInit(){
this.getItems();
}
getItems(){
this.items = this.itemService.getItems();
}
}
When I try to inject ItemService through constructor , I am getting an error : " Error: Can't resolve all parameters for TodoComponent: (?)."
I am not able to inject even angularjs providers like Injector.
However, this method works for me :
const injector = ReflectiveInjector.resolveAndCreate([ItemService]);
this.itemService = injector.get(ItemService);
I am using the following versions of libraries for developement as mentioned in my package.json
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
Angular version: 2.0.0 final
Browser: all
attaching the error log I got from console :
(index):16 Error: Error: Can't resolve all parameters for TodoComponent: (?).
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14404:21)
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14301:28)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14074:30)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14167:51)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:14161:51)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16803:49)
at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16741:39)
at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:16732:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:6954:29)
Evaluating http://localhost:3000/dist/main.js
Error loading http://localhost:3000/dist/main.js(anonymous function) # (index):16ZoneDelegate.invoke # zone.js:203Zone.run # zone.js:96(anonymous function) # zone.js:462ZoneDelegate.invokeTask # zone.js:236Zone.runTask # zone.js:136drainMicroTaskQueue # zone.js:368ZoneTask.invoke # zone.js:308
I see that your tsconfig.json isn't correct.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true, <== it should be true
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "dist"
}
}
This is the magic sauce for DI. emitDecoratorMetadata: true. This option will preserve type information in your object's metadata.
See also
How does the TypeScript Angular DI magic work?
Injecting services in services in Angular 2
You code is fine!
Here is your updated plunker: https://plnkr.co/edit/6SR8Ibljuy0ElEBU87ox?p=preview
Did some changes to your system.js.config!
// ADDED THESE TWO OPTIONS BELOW
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
and this..
app: {
main: './main.ts', // CHANGES HERE
defaultExtension: 'ts' // CHANGES HERE
},
I'm trying to build a project with grunt and angular 2.
I saw that there's a special version of grunt to support ts (grunt ts- https://www.npmjs.com/package/grunt-ts).
When I try to build the project with some type scripts files I'm getting the following error:
>> 1 syntax error 51 non-emit-preventing type warnings
>> Error: tsc return code: 2
Warning: Task "ts:default" failed. Use --force to continue.
Aborted due to warnings.
Can anyone help me to solve it?
This is my config files :
pakages.json
{
"name": "grunt_quick_start",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"grunt": "^1.0.1",
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.9",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-injector": "^1.0.0",
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}
gruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: { // Task
dev: {
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'app/src/assets/styles/css/index.css': 'app/assets/styles/scss/*.scss' // 'destination': 'source'
}
},
build: {
options: { // Target options
style: 'compressed'
},
files: { // Dictionary of files
'dest/assets/styles/css/index.css': 'app/assets/styles/scss/*.scss' // 'destination': 'source'
}
}
},
copy: {
build: {
expand: true,
cwd: 'app/',
src: ['index.html', 'assets/scripts/**/*.js', 'assets/styles/css/*.css'],
dest: 'dest/'
}
},
uglify: {
build: {
files: {
'dest/assets/js/index.min.js': ['app/assets/js/**/*.js']
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
},
options: {
livereload: true
}
},
clean: {
build: {
src: ['dest']
}
},
injector: {
dev: {
options: {
template: 'app/index.html'
},
files: {
'app/src/index.html': ['app/assets/**/*.js', 'app/assets/**/*.css', '//localhost:35729/livereload.js',
'./node_modules/core-js/client/shim.min.js','./node_modules/zone.js/dist/zone.js',
'./node_modules/reflect-metadata/Reflect.js','/node_modules/systemjs/dist/system.src.js',
'./systemjs.config.js']
}
},
build: {
options: {
template: 'dest/index.html'
},
files: {
'dest/index.html': ['assets/**/*.js', 'assets/**/*.css']
}
}
},
connect: {
server: {
options: {
port: 8000,
hostname: '*',
livereload: true,
base: 'app'
}
}
},
ts: {
default: {
src: ["**/*.ts", "!node_modules/**"]
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-injector');
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask('default', ['sass:dev','ts', 'injector:dev', 'connect', 'watch']);
grunt.registerTask('build', ['clean:build', 'sass:build', 'copy:build', 'injector:build']);
};
systemConfig.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);