docs(typings): update typings chapter + update lingering old package references
This commit is contained in:
Ward Bell
parent
81ebdfb8ef
commit
60eeb0123a
|
|
@ -4,11 +4,9 @@
|
|||
var AppComponent = ng
|
||||
// #docregion component
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
selector: 'my-app',
|
||||
// #enddocregion
|
||||
// #docregion view
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -6,9 +6,19 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>foo2</my-app>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// #docregion
|
||||
// #docregion import
|
||||
import {Component, View, bootstrap} from '@angular/angular2';
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
// #enddocregion
|
||||
|
||||
// #docregion class-w-annotations
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
selector: 'my-app',
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #docregion class
|
||||
|
|
|
|||
|
|
@ -113,11 +113,9 @@ include ../../../_includes/_util-fns
|
|||
var AppComponent = ng
|
||||
// #docregion component
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
selector: 'my-app',
|
||||
// #enddocregion component
|
||||
// #docregion view
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #enddocregion view
|
||||
|
|
@ -139,13 +137,13 @@ include ../../../_includes/_util-fns
|
|||
// #docplaster more code here
|
||||
|
||||
// #docregion import,twoparts
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
// #enddocregion twoparts, import
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
selector: 'my-app',
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ a(id="typings")
|
|||
|
||||
Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors
|
||||
can find them. Angular is one such library.
|
||||
Peek into the `node_modules/angular2/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
|
||||
Peek into the `node_modules/@angular/core/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
|
||||
|
||||
**We need do nothing to get *typings* files for library packages which include *d.ts* files — as all Angular packages do.**
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ code-example(format="").
|
|||
The following command installs the typings file for the Jasmine test library and updates the `typings.config`
|
||||
so we that we get it automatically the next time.
|
||||
code-example(format="").
|
||||
npm run typings -- install jasmine --ambient --save
|
||||
npm run typings -- install jasmine --global --save
|
||||
.l-sub-section
|
||||
:marked
|
||||
The [–– option](https://docs.npmjs.com/cli/run-script) is important;
|
||||
|
|
@ -129,43 +129,3 @@ code-example(format="").
|
|||
|
||||
Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
|
||||
|
||||
:marked
|
||||
### Typing file collisions
|
||||
|
||||
The TypeScript compiler does not tolerate redefinition of a type. For example, it throws an error if it's given two definitions for
|
||||
the `Promise` type.
|
||||
|
||||
Double definitions are common. In fact, the `typings` tool deliberately creates
|
||||
duplicate sets of typings (for reasons best explained elsewhere).
|
||||
Look in the project structure for the *typings folder* where we should find something like:
|
||||
.filetree
|
||||
.file typings
|
||||
.children
|
||||
.file browser
|
||||
.children
|
||||
.file ambient
|
||||
.children
|
||||
.file core-js
|
||||
.children
|
||||
.file index.d.ts
|
||||
.file ...
|
||||
|
||||
.children
|
||||
.file main
|
||||
.children
|
||||
.file ambient
|
||||
.children
|
||||
.file core-js
|
||||
.children
|
||||
.file index.d.ts
|
||||
.file ...
|
||||
.children
|
||||
.file browser.d.ts
|
||||
.file main.d.ts
|
||||
:marked
|
||||
The `core-js` typings are duplicated and the `browser.d.ts` and `main.d.ts` have overlapping content.
|
||||
|
||||
We must tell the compiler to ignore one or the other.
|
||||
We removed the `main` set from consideration in the `exclude` section of our `tsconfig.json` file:
|
||||
+makeJson('quickstart/ts/tsconfig.1.json', {paths: 'exclude'}, 'tsconfig.json (exclude)')(format=".")
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -864,12 +864,12 @@ code-example(format="").
|
|||
project, which contains metadata about the type definitions we've installed:
|
||||
|
||||
code-example(format="").
|
||||
npm run typings install jquery -- --save --ambient
|
||||
npm run typings install angular -- --save --ambient
|
||||
npm run typings install angular-route -- --save --ambient
|
||||
npm run typings install angular-resource -- --save --ambient
|
||||
npm run typings install angular-mocks -- --save --ambient
|
||||
npm run typings install jasmine -- --save --ambient
|
||||
npm run typings install jquery -- --save --global
|
||||
npm run typings install angular -- --save --global
|
||||
npm run typings install angular-route -- --save --global
|
||||
npm run typings install angular-resource -- --save --global
|
||||
npm run typings install angular-mocks -- --save --global
|
||||
npm run typings install jasmine -- --save --global
|
||||
|
||||
:marked
|
||||
In `index.html`, let's now enable SystemJS. Add a couple of `<script>` tags that
|
||||
|
|
@ -1919,11 +1919,11 @@ table
|
|||
we still need are for Jasmine.
|
||||
|
||||
code-example(format="").
|
||||
npm run typings uninstall jquery -- --save --ambient
|
||||
npm run typings uninstall angular -- --save --ambient
|
||||
npm run typings uninstall angular-route -- --save --ambient
|
||||
npm run typings uninstall angular-resource -- --save --ambient
|
||||
npm run typings uninstall angular-mocks -- --save --ambient
|
||||
npm run typings uninstall jquery -- --save --global
|
||||
npm run typings uninstall angular -- --save --global
|
||||
npm run typings uninstall angular-route -- --save --global
|
||||
npm run typings uninstall angular-resource -- --save --global
|
||||
npm run typings uninstall angular-mocks -- --save --global
|
||||
|
||||
:marked
|
||||
Finally, from `index.html` and `karma.conf.js`, remove all references to
|
||||
|
|
|
|||
Loading…
Reference in New Issue