How to import other modules in Angular 2?
Question
I tried to use the Angular2/http module within my Angular 2 app, but when I try to import it system.src.js throws an error http:///angular2/http 404 not Found.
Heres how my index.html looks like:
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="angular2/bundles/angular2-polyfills.js"></script>
<script src="systemjs/dist/system.src.js"></script>
<script src="rxjs/bundles/Rx.js"></script>
<script src="angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/styles/main.css" rel="stylesheet">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
The component where I try to import http:
import {Injectable} from 'angular2/core';
import {Track} from './track'
import {Http, Headers} from 'angular2/http';
@Injectable()
export class ActionTracker {
constructor(private _http : Http){}
login(){
this._http.post('/api/login', "")
.map(res => res.json())
.subscribe(
data => console.log(data),
err => console.log(err),
() => console.log('Authentication Complete')
);
}
}
Would be great if anyone could explain how to make the import work. I also tried to import a third party lib before where I failed too.
Thanks for your help.
3 answers
solution1
4 ACCPTED 2016-01-27 18:22:17
在您的index.html中包含http.dev.js
<script src="angular2/bundles/http.dev.js"></script>
solution2
0 2016-01-27 19:40:42
You must include it in script tags or load it with SystemJS.
If you are going to do that via SystemJS, consider this gist:
https://gist.github.com/vladotesanovic/db89488b8961fa6c2af6
Basically, you are mapping other libraries with map or paths, and then, you are importing them in your app. If you included angular2.min.js and http.min.js with your script tags, you don't need to do that with SystemJS ( advantage with SystemJS is ability to bundle it into one file at the end ).
Example:
If you do this in map:
'my-library': 'location/my-libary.js'
in your code, you are importing library with this:
import * as my-library from 'my-library'
of
import { exported_stuff } from 'my-library'
solution3
0 2016-01-28 09:45:13
In this sample, you are using subscribe and map function. So, you need to import observables and map to this component.
import {Observable} from 'rxjs/Observable';
import 'Rxjs/add/operator/map';
And your constructor be like,
constructor(public http: Http) {
this.http = http;
}
boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent,[HTTP_PROVIDERS]);
index.html
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {defaultExtension: 'ts'},
'../node_modules/rxjs': { defaultExtension: 'js' }
},
paths: {
'rxjs/operator/*': '../node_modules/rxjs/add/operator/*.js',
'rxjs/*': '../node_modules/rxjs/*.js'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.