cant get a simple http service to work in angular2. I just get 404 on the service for some reason. It does not contain any functionality yet, but I seems that the DI does not work.
As soon as I add TestService when bootstrapping the application i get the following. GET http://127.0.0.1:8080/testService 404 (Not Found)
index.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>AngularJS 2 Tutorial Series</title>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('./app/app.ts');
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
app.ts
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {Injectable} from 'angular2/core'
import {TestService} from 'testService';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
})
class AppComponent {
}
bootstrap(AppComponent, [TestService]);
TestService.ts
import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
#Injectable()
export class TestService {
constructor(public http: Http){
}
}
I just ran into this, fixed it by adding the script reference to the http bundle:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Tried it after remembering that I added a similar resource after implementing routing. Hope this helps someone else!
This is because by Default your 'http.dev.js' is not sourced
Step 1 : index.html
Include 'http.dev.js'
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Step 2: main.ts
Add import and add 'HTTP_PROVIDERS'
import {bootstrap} from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
STEP: 3 app.component.ts
import Http and use it
import {Http} from 'angular2/http';
constructor(http: Http) {
http.get('http://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
this.response = data._body;
})
}
You will need to add Http by supplying it as a provider. There are 2 ways to accomplish this:
1) at a global level you can specify when you bootstrap the application:
bootstrap(AppComponent, [TestService, Http]);
2) inside the component you are trying to use it within:
#Component({
...
providers: [Http]
})
public class ...
NOTE you will also have to import/require Http when you are supplying it as a provider. This will allow angular's DI to discern what will be injected.
Related
I'm using AngularJS 2 in a ASP.NET MVC 5 project, I do not use the routing provided by Angular and rely only on the MVC routing strategy.
Strangely, AngularJS seems to look at the URL and only load correctly when I'm on a route "domain/Controller", if I'm on a route as "domain/Controller/" or "domain/Controller/Action" my Angular app is not loading and I have the following error in the browser:
I'm using the following script to load my bootstrapper:
<script src="~/Scripts/systemjs.config.js"></script>
<script>
System.import('../tsScripts/boot').catch(function (err) {
console.error(err);
});
</script>
my boot.ts file:
///<reference path="./../typings/globals/core-js/index.d.ts"/>
import {bootstrap} from '#angular/platform-browser-dynamic';
import {HTTP_PROVIDERS} from '#angular/http';
import {AppComponent} from './app';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
I have no idea why Angular (or another part coming with the framework) is incompatible with the MVC routing, or what is wrong with my implementation.
I ran into the same problem,
and I simply solved it placing this code into the head tag of _Layout.cshtml (so that is applied to all views)
<head>
<base href="/">
...
</head>
Angular official doc
You can also fix it this way
import {APP_BASE_HREF} from '#angular/common';
#NgModule({
...
imports: [RouterModule],
providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]);
Is it possible to mix a normal Dart HTML application with Angular Dart 2 and have Angular Dart 2 run in certain parts of the application and not other parts?
I've attempted that, but it seems Angular is injecting itself into every page.
index1.html:
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
</body>
index2.html:
<my-app>Loading...</my-app>
<script async src="main2.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</body>
main.dart:
// many imports
void main() {
// manual code to hook urls, html etc
}
main2.dart:
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
#Component(selector: 'my-app', template: '<h1>Testing Angular Dart 2</h1>')
class AppComponent {}
main() {
bootstrap(AppComponent);
}
pubspec.yaml:
...
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
...
less_dart: any
browser: any
http: any
event_bus: any
dart_to_js_script_rewriter: any
angular2: 2.0.0-beta.0
transformers:
- dart_to_js_script_rewriter
- $dart2js:
commandLineOptions: [--enable-experimental-mirrors]
- less_dart:
entry_points: [web/styles/main.less, web/styles/test.less]
build_mode: dart
- angular2:
entry_points: web/main2.dart
The angular2 transformer is clearly pointing at main2.dart and only index2.html is importing main2.dart, but when I load index1.html which is importing main.dart, the angular app runs.
Is it possible to do what I want to do or is it a case of all-or-nothing when including Angular Dart 2?
What do you mean by "it seems Angular is injecting itself into every page."? If you have different entry points (index1.html, index2.html, ...) each entry point is an individual application and for each you can enable Angular or not. If this doesn't work it's a bug in some transformer.
I was wondering if this is the best way to import html dependancies in polymer-dart.
I want to use my-other-element inside my-element this way:
my-element.dart:
#HtmlImport('my-element.html')
library mypackage.my_element;
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
// HERE I import the dart file
import 'my-other-element.dart'
#PolymerRegister('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created();
}
my-element.html:
<!DOCTYPE html>
//HERE I import the element html
<link rel="import" href="my-other-element.html">
<dom-module id="my-element">
<template>
<my-other-element></my-other-element>
</template>
<script type="application/dart" src="my-element.dart"></script>
</dom-module>
Using #HtmlImport(...) and then only import using Darts import ...; directive is the recommended way.
Also:
Using - (dash) in Dart file names is discouraged. Prefer _ (underline)
You also don't need
<script type="application/dart" src="my-element.dart"></script>
in your <dom-module> if you import like suggested above.
I basically want to create a <core-tooltip> tag, not in HTML, but in dart.
So i tried:
CoreTooltip tooltip = new CoreTooltip();
CoreTooltip tooltip = document.createElement("core-tooltip"):
CoreTooltip tooltip = new Element.tag("core-tooltip"):
got always the same Exception
Uncaught Error: type 'HtmlElement' is not a subtype of type 'CoreTooltip'
Why does that just not work?
You shouldn't use this method
document.createElement("core-tooltip"):
the other two are fine though.
I assume the element creation fails because the code is in a custom main and is executed before Polymer is done with initialization.
See how to implement a main function in polymer apps for more details.
If you execute the code inside a Polymer elements (for example attached() method after super.attached()) or in an event handler like on-click this will work.
Another possibility is, that you app is missing an HTML import that imports <core-tooltip>. Without an import this can't work either.
I tried it with this code and it worked for me
app_element.dart
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_tooltip.dart';
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created() { }
#PublishedProperty(reflect: true) bool isValidationError;
void attached() {
super.attached();
CoreTooltip tt = new CoreTooltip();
print(tt);
}
}
app_element.html
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_tooltip.html">
<polymer-element name="app-element">
<template>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
I made the below simple code while learning AngularDART Component, but nothing is displayed, can anyone help me knowing what mistake I made:
my html main file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
<title>AngularDART training</title>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body ng-app>
<h1 id='text_id'>Welcome</h1>
<the-component></the-component>
</body>
</html>
the main.dart file is:
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
#Component(
selector: 'the-component',
templateUrl: 'angularComponent.html',
cssUrl: 'angularComponent.css',
publishAs: 'cmp')
class myComponent {var name = 'Component';}
main() {
var module = new Module()
..bind(myComponent);
applicationFactory().addModule(module).run();
}
the angularComponent.html file is:
<p>This is the angular: {{cmp.name}}</p>
the <the-component></the-component> is not working, and not displaying anything!
thanks
Angular transformer picks the components from the lib folder. If you place your component's files (.dart, .html, .css) in other folders (i.e. web), you need to specify them in the transformers section of pubspec.yaml.
For example,
transformers
- angular:
-html_files:
- absolute/path/to/your/html
Hope this works for you.
Thanks for all who tried to help, the solution was writing the pubspec.yaml as:
dependencies:
angular: '>=0.12.0 <0.13.0'
transformers:
- angular: {html_files: "web/angularComponent.html"}
Thanks.
The bug is that your pubspec.yaml doesn't list angularComponent.html as an asset.
The Angular transformer which creates the StaticClosureMap did not parse the template, never saw the cmp.name expression and never generated a getter.
We should have given you a better error message. If you still have the complete project isolated well, please file a bug on the Github project and we can make this experience better.