chore: update to @types (#1872)
* chore: update examples to @types * fix toh-6 aot and add types link
This commit is contained in:
Filipe Silva
Ward Bell
parent
75f37b76eb
commit
0d49fecd30
|
|
@ -2,7 +2,6 @@ node_modules
|
|||
_temp
|
||||
bower_components
|
||||
jspm_packages
|
||||
typings
|
||||
**/packages
|
||||
build
|
||||
pubspec.lock
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ take the following extra steps to prepare the environment:
|
|||
1. cd back up to `angular.io` root: `cd ../../..`
|
||||
|
||||
1. run `gulp add-example-boilerplate` (elevate to admin on Windows)
|
||||
to copy canonical files to the sample directories and create symlinks there for node_modules and typings.
|
||||
to copy canonical files to the sample directories and create symlinks there for node_modules.
|
||||
|
||||
Now cd into any particular sample's language directory (e.g., `public/docs/_examples/quickstart/ts`) and try:
|
||||
- `npm start` to simultaneously compile-with-watch and serve-in-browser-with-watch
|
||||
|
|
|
|||
27
gulpfile.js
27
gulpfile.js
|
|
@ -85,7 +85,7 @@ var _apiShredOptionsForDart = {
|
|||
logLevel: _dgeniLogLevel
|
||||
};
|
||||
|
||||
var _excludePatterns = ['**/node_modules/**', '**/typings/**', '**/packages/**'];
|
||||
var _excludePatterns = ['**/node_modules/**', '**/packages/**'];
|
||||
|
||||
var _excludeMatchers = _excludePatterns.map(function(excludePattern){
|
||||
return new Minimatch(excludePattern)
|
||||
|
|
@ -461,13 +461,6 @@ gulp.task('add-example-boilerplate', function(done) {
|
|||
fsUtils.addSymlink(realPath, linkPath);
|
||||
});
|
||||
|
||||
realPath = path.join(EXAMPLES_PATH, '/typings');
|
||||
var typingsPaths = excludeDartPaths(getTypingsPaths(EXAMPLES_PATH));
|
||||
typingsPaths.forEach(function(linkPath) {
|
||||
gutil.log("symlinking " + linkPath + ' -> ' + realPath)
|
||||
fsUtils.addSymlink(realPath, linkPath);
|
||||
});
|
||||
|
||||
return buildStyles(copyExampleBoilerplate, done);
|
||||
});
|
||||
|
||||
|
|
@ -530,11 +523,6 @@ gulp.task('remove-example-boilerplate', function() {
|
|||
fsUtils.removeSymlink(linkPath);
|
||||
});
|
||||
|
||||
var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
|
||||
typingsPaths.forEach(function(linkPath) {
|
||||
fsUtils.removeSymlink(linkPath);
|
||||
});
|
||||
|
||||
deleteExampleBoilerPlate();
|
||||
});
|
||||
|
||||
|
|
@ -818,7 +806,7 @@ gulp.task('_harp-compile', function() {
|
|||
|
||||
gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-boilerplate'], function() {
|
||||
// Split big shredding task into partials 2016-06-14
|
||||
var examplePaths = globby.sync(EXAMPLES_PATH+'/*/', {ignore: ['/node_modules', 'typings/']});
|
||||
var examplePaths = globby.sync(EXAMPLES_PATH+'/*/', {ignore: ['/node_modules']});
|
||||
var promise = Promise.resolve(true);
|
||||
examplePaths.forEach(function (examplePath) {
|
||||
promise = promise.then(() => docShredder.shredSingleExampleDir(_devguideShredOptions, examplePath));
|
||||
|
|
@ -877,8 +865,6 @@ gulp.task('lint', function() {
|
|||
'!./public/docs/_examples/**/ts-snippets/*.ts',
|
||||
'!./public/docs/_examples/style-guide/ts/**/*.avoid.ts',
|
||||
'!./public/docs/_examples/**/node_modules/**/*',
|
||||
'!./public/docs/_examples/**/typings/**/*',
|
||||
'!./public/docs/_examples/**/typings-ng1/**/*',
|
||||
'!./public/docs/_examples/**/build/**/*',
|
||||
// temporary until codelyzer is fixed mgechev/codelyzer#60
|
||||
'!./public/docs/_examples/animations/ts/app/hero.service.ts'
|
||||
|
|
@ -1140,13 +1126,6 @@ function getNodeModulesPaths(basePath) {
|
|||
return paths;
|
||||
}
|
||||
|
||||
function getTypingsPaths(basePath) {
|
||||
var paths = getExamplePaths(basePath).map(function(examplePath) {
|
||||
return path.join(examplePath, "/typings");
|
||||
});
|
||||
return paths;
|
||||
}
|
||||
|
||||
function getExamplePaths(basePath, includeBase) {
|
||||
// includeBase defaults to false
|
||||
return getPaths(basePath, _exampleConfigFilename, includeBase);
|
||||
|
|
@ -1281,7 +1260,7 @@ function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
|
|||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**', '**/typings/**',
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**',
|
||||
'**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
|
||||
ignoreThese = ignoreThese.concat(_exampleBoilerplateFiles.map((file) => `public/docs/_examples/*/*/${file}`));
|
||||
var files = globby.sync( [includePattern], { ignore: ignoreThese });
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ package.json
|
|||
systemjs.config.js
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
typings.json
|
||||
wallaby.js
|
||||
|
||||
_test-output
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"http-server:cli": "http-server dist/",
|
||||
"lite": "lite-server",
|
||||
"lite:aot": "lite-server -c aot/bs-config.json",
|
||||
"postinstall": "typings install",
|
||||
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
"removeComments": false,
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"types": []
|
||||
"typeRoots": [
|
||||
"../../node_modules/@types/"
|
||||
]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules/*",
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@
|
|||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"types": []
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
},
|
||||
|
||||
"files": [
|
||||
"app/app.module.ts",
|
||||
"app/main.ts",
|
||||
"./typings/index.d.ts"
|
||||
"app/main.ts"
|
||||
],
|
||||
|
||||
"angularCompilerOptions": {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
]
|
||||
},
|
||||
"compileOnSave": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
/// <reference path="../typings/index.d.ts" />
|
||||
|
|
@ -3,8 +3,6 @@
|
|||
"version": "1.0.0",
|
||||
"description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
|
||||
"scripts": {
|
||||
"postinstall": "typings install",
|
||||
"typings": "typings",
|
||||
"protractor": "protractor",
|
||||
"webdriver:update": "webdriver-manager update"
|
||||
},
|
||||
|
|
@ -42,8 +40,16 @@
|
|||
"zone.js": "^0.6.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/angular": "^1.5.15",
|
||||
"@types/jasmine": "^2.2.34",
|
||||
"@types/angular": "^1.5.16",
|
||||
"@types/angular-animate": "^1.5.5",
|
||||
"@types/angular-cookies": "^1.4.2",
|
||||
"@types/angular-mocks": "^1.5.5",
|
||||
"@types/angular-resource": "^1.5.6",
|
||||
"@types/angular-route": "^1.3.2",
|
||||
"@types/angular-sanitize": "^1.3.3",
|
||||
"@types/core-js": "^0.9.34",
|
||||
"@types/jasmine": "^2.5.35",
|
||||
"@types/node": "^6.0.45",
|
||||
"@types/selenium-webdriver": "^2.53.32",
|
||||
"angular2-template-loader": "^0.4.0",
|
||||
"awesome-typescript-loader": "^2.2.4",
|
||||
|
|
@ -76,11 +82,9 @@
|
|||
"rollup-plugin-commonjs": "^4.1.0",
|
||||
"source-map-explorer": "^1.3.2",
|
||||
"style-loader": "^0.13.1",
|
||||
"ts-loader": "^0.8.2",
|
||||
"ts-node": "^1.3.0",
|
||||
"tslint": "^3.15.1",
|
||||
"typescript": "^2.0.3",
|
||||
"typings": "^1.4.0",
|
||||
"webpack": "^1.13.0",
|
||||
"webpack-dev-server": "^1.14.1",
|
||||
"webpack-merge": "^0.14.0"
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@
|
|||
"scripts": {
|
||||
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
|
||||
"lite": "lite-server",
|
||||
"postinstall": "typings install",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"typings": "typings"
|
||||
"tsc:w": "tsc -w"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
|
|
@ -35,9 +33,10 @@
|
|||
"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",
|
||||
"typings":"^1.4.0"
|
||||
"typescript": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"globalDependencies": {
|
||||
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
|
||||
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
|
||||
"node": "registry:dt/node#6.0.0+20160909174046"
|
||||
}
|
||||
}
|
||||
|
|
@ -9,13 +9,14 @@
|
|||
"removeComments": false,
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"types": []
|
||||
"typeRoots": [
|
||||
"../../node_modules/@types/"
|
||||
]
|
||||
},
|
||||
|
||||
"files": [
|
||||
"app/app.module.ts",
|
||||
"app/main-aot.ts",
|
||||
"typings/index.d.ts"
|
||||
"app/main-aot.ts"
|
||||
],
|
||||
|
||||
"angularCompilerOptions": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion import-adapter
|
||||
import { UpgradeAdapter } from '@angular/upgrade';
|
||||
declare var angular: any;
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
// #enddocregion import-adapter
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Phone, PhoneData } from '../core/phone/phone.service';
|
||||
declare var angular: any;
|
||||
|
||||
class PhoneDetailController {
|
||||
phone: PhoneData;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Phone, PhoneData } from '../core/phone/phone.service';
|
||||
declare var angular: any;
|
||||
|
||||
class PhoneListController {
|
||||
phones: PhoneData[];
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
"scripts": {
|
||||
"start": "webpack-dev-server --inline --progress --port 8080",
|
||||
"test": "karma start",
|
||||
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
|
||||
"postinstall": "typings install"
|
||||
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
|
|
@ -28,6 +27,9 @@
|
|||
"zone.js": "^0.6.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/core-js": "^0.9.34",
|
||||
"@types/node": "^6.0.45",
|
||||
"@types/jasmine": "^2.5.35",
|
||||
"angular2-template-loader": "^0.4.0",
|
||||
"awesome-typescript-loader": "^2.2.4",
|
||||
"css-loader": "^0.23.1",
|
||||
|
|
@ -47,7 +49,6 @@
|
|||
"rimraf": "^2.5.2",
|
||||
"style-loader": "^0.13.1",
|
||||
"typescript": "^2.0.2",
|
||||
"typings": "^1.3.2",
|
||||
"webpack": "^1.13.0",
|
||||
"webpack-dev-server": "^1.14.1",
|
||||
"webpack-merge": "^0.14.0"
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"globalDependencies": {
|
||||
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
|
||||
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
|
||||
"node": "registry:dt/node#6.0.0+20160909174046"
|
||||
}
|
||||
}
|
||||
|
|
@ -624,11 +624,9 @@ figure.image-display
|
|||
.file hero-form.component.js
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here’s the final version of the source:
|
||||
|
||||
|
|
|
|||
|
|
@ -581,13 +581,11 @@ block project-file-structure
|
|||
.file app.module.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here are the file contents:
|
||||
|
||||
|
|
@ -599,7 +597,6 @@ block project-files
|
|||
quickstart/ts/index.html,
|
||||
quickstart/ts/package.1.json,
|
||||
quickstart/ts/tsconfig.1.json,
|
||||
quickstart/ts/typings.1.json,
|
||||
quickstart/ts/styles.css,
|
||||
quickstart/ts/systemjs.config.1.js`
|
||||
,
|
||||
|
|
@ -610,7 +607,6 @@ block project-files
|
|||
index.html,
|
||||
package.json,
|
||||
tsconfig.json,
|
||||
typings.json,
|
||||
styles.css (excerpt),
|
||||
systemjs.config.js`)
|
||||
|
||||
|
|
|
|||
|
|
@ -64,13 +64,11 @@ block intro-file-tree
|
|||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
block keep-app-running
|
||||
:marked
|
||||
|
|
@ -883,13 +881,11 @@ block file-tree-end
|
|||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -559,13 +559,11 @@ block filetree
|
|||
.file main.ts
|
||||
.file in-memory-data.service.ts (new)
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -88,7 +88,6 @@ h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
|
|||
* index.html
|
||||
* package.json
|
||||
* tsconfig.json
|
||||
* typings.json
|
||||
|
||||
.l-main-section
|
||||
h2#restore Step 5: Restore the required packages
|
||||
|
|
|
|||
|
|
@ -705,12 +705,10 @@ figure.image-display
|
|||
.file hero-form.component.html
|
||||
.file hero-form.component.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file node_modules ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here’s the final version of the source:
|
||||
|
||||
|
|
|
|||
|
|
@ -152,10 +152,10 @@ a(id="dev-dependencies")
|
|||
with excellent support for Angular apps that use routing.
|
||||
|
||||
***[typescript](https://www.npmjs.com/package/typescript)*** -
|
||||
The TypeScript language server, including the *tsc* TypeScript compiler.
|
||||
the TypeScript language server, including the *tsc* TypeScript compiler.
|
||||
|
||||
***[typings](https://www.npmjs.com/package/typings)*** - A manager for TypeScript definition files.
|
||||
Read more about it in the [TypeScript Configuration](typescript-configuration.html#typings) page.
|
||||
***@types/\**** - TypeScript definition files.
|
||||
Learn more about it in the [TypeScript Configuration](typescript-configuration.html#typings) chapter.
|
||||
|
||||
.l-main-section
|
||||
a(id="why-peer-dependencies")
|
||||
|
|
|
|||
|
|
@ -546,12 +546,10 @@ h3#router-directives <i>Router Directives</i>
|
|||
.file hero-list.component.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here are the files discussed in this milestone
|
||||
|
||||
|
|
@ -1233,12 +1231,10 @@ h3#merge-hero-routes Import hero module into AppModule
|
|||
.file crisis-list.component.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
<a id="heroes-app-code"></a>
|
||||
### The Heroes App code
|
||||
|
|
|
|||
|
|
@ -78,16 +78,13 @@ a(id="typings")
|
|||
Many libraries—jQuery, Jasmine, and Lodash among them—do *not* include `d.ts` files in their npm packages.
|
||||
Fortunately, either their authors or community contributors have created separate `d.ts` files for these libraries and
|
||||
published them in well-known locations.
|
||||
The *typings* tool can find and fetch these files for you.
|
||||
|
||||
After installing the [typings](https://github.com/typings/typings/blob/master/README.md) tool
|
||||
with npm (it's listed among the *devDependencies* in the `package.json`), add an npm script (`postinstall`)
|
||||
to run that tool automatically, after *npm* installation finishes.
|
||||
+makeJson('quickstart/ts/package.1.json', {paths: 'scripts.postinstall'}, 'package.json (postinstall)')(format=".")
|
||||
:marked
|
||||
This *typings* tool command, `typings install`, installs the `d.ts` files into the **typings** folder.
|
||||
You created a `typings.json` file in the [QuickStart](../quickstart.html):
|
||||
+makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
|
||||
|
||||
We can install these typings via `npm` using the
|
||||
[`@types/*` scoped package](http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html)
|
||||
and Typescript (starting at 2.0) will automatically recognize them.
|
||||
|
||||
For instance, to install typings for `jasmine` we could do `npm install @types/jasmine --save-dev`.
|
||||
|
||||
:marked
|
||||
QuickStart identified three *typings* (`d.ts`) files:
|
||||
|
||||
|
|
@ -96,27 +93,7 @@ a(id="typings")
|
|||
|
||||
* [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework
|
||||
|
||||
* [node](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/node/node.d.ts) for code that references objects in the *nodejs* environment;
|
||||
* [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *nodejs* environment;
|
||||
You can view an example in the [webpack](./webpack.html) page.
|
||||
|
||||
QuickStart doesn't require these typings but many of the samples do.
|
||||
|
||||
You can also run the *typings* tool yourself.
|
||||
If the `postInstall` command fails to (re)install the typings files, run the following command to do so.
|
||||
code-example(format="").
|
||||
npm run typings install
|
||||
:marked
|
||||
Run this command to list the installed typings files:
|
||||
code-example(format="").
|
||||
npm run typings list
|
||||
:marked
|
||||
The following command installs or updates the typings file for the Jasmine test library from the *DefinitelyTyped* repository,
|
||||
and updates the `typings.json` file so you receive it automatically the next time you install typings.
|
||||
code-example(format="").
|
||||
npm run typings -- install dt~jasmine --save --global
|
||||
.l-sub-section
|
||||
:marked
|
||||
The [–– option](https://docs.npmjs.com/cli/run-script) tells npm to pass all arguments to the right of `--` to the *typings* command.
|
||||
|
||||
Read about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
|
||||
|
||||
|
|
|
|||
|
|
@ -875,34 +875,26 @@ figure
|
|||
of NPM. We'll install all new dependencies using NPM, and will eventually be
|
||||
able to remove Bower from the project.
|
||||
|
||||
Let's begin by installing TypeScript to the project. While we're at it, let's also
|
||||
install the [Typings type definition manager](https://github.com/typings/typings).
|
||||
It will allow us to install type definitions for libraries that don't come with
|
||||
prepackaged types.
|
||||
Let's begin by installing TypeScript to the project.
|
||||
|
||||
code-example(format="").
|
||||
npm i typescript typings --save-dev
|
||||
npm i typescript --save-dev
|
||||
|
||||
:marked
|
||||
Let's also add run scripts for the `tsc` TypeScript compiler and the `typings`
|
||||
tool to `package.json`:
|
||||
Let's also add run scripts for the `tsc` TypeScript compiler to `package.json`:
|
||||
|
||||
+makeJson('upgrade-phonecat-1-typescript/ts/package.json', {paths: 'scripts.tsc, scripts.tsc:w, scripts.typings'}, 'package.json')
|
||||
+makeJson('upgrade-phonecat-1-typescript/ts/package.json', {paths: 'scripts.tsc, scripts.tsc:w'}, 'package.json')
|
||||
|
||||
|
||||
:marked
|
||||
We can now use Typings to install type definitions for the existing libraries that
|
||||
we're using: Angular 1 and the Jasmine unit test framework.
|
||||
We can now install type definitions for the existing libraries that
|
||||
we're using but that don't come with prepackaged types: Angular 1 and the
|
||||
Jasmine unit test framework.
|
||||
|
||||
code-example(format="").
|
||||
npm run typings install dt~jquery dt~angular dt~angular-route \
|
||||
dt~angular-resource dt~angular-mocks dt~angular-animate \
|
||||
dt~jasmine -- --save --global
|
||||
npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
|
||||
|
||||
:marked
|
||||
This will add these typings into a `typings.json` configuration file as well as
|
||||
download them into the `typings directory`.
|
||||
|
||||
We should also configure the TypeScript compiler so that it can understand our
|
||||
project. We'll add a `tsconfig.json` file to the project directory, just like we do
|
||||
in the [Quickstart](../quickstart.html). It instructs the TypeScript compiler how
|
||||
|
|
@ -968,8 +960,8 @@ code-example(format="").
|
|||
|
||||
.l-sub-section
|
||||
:marked
|
||||
The [Angular 1.x type definitions](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/angularjs)
|
||||
we installed with Typings are not officially maintained by the Angular team,
|
||||
The [Angular 1.x type definitions](https://www.npmjs.com/package/@types/angular)
|
||||
we installed are not officially maintained by the Angular team,
|
||||
but are quite comprehensive. It is possible to make an Angular 1.x application
|
||||
fully type-annotated with the help of these definitions.
|
||||
|
||||
|
|
@ -1037,14 +1029,12 @@ code-example(format="").
|
|||
[Quickstart](../quickstart.html) guide and get the following configurations from there:
|
||||
|
||||
* Add Angular 2 and the other new dependencies to `package.json`
|
||||
* Add the new typings into `typings.json`
|
||||
* The SystemJS configuration file `systemjs.config.js` to the project root directory.
|
||||
|
||||
Once these are done, run:
|
||||
|
||||
code-example(format="").
|
||||
npm install
|
||||
npm run typings install
|
||||
|
||||
:marked
|
||||
We can soon load Angular 2 dependencies into the application via `index.html`,
|
||||
|
|
@ -1110,6 +1100,18 @@ code-example(format="").
|
|||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'import-adapter', 'app/main.ts')
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Why declare _angular_ as _any_?
|
||||
|
||||
A strongly typed `angular` reference to Angular 1 would be great.
|
||||
But we can't import its <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
|
||||
library, `@types/angular`, without also importing Angular 1 itself via `import * as angular from 'angular'`.
|
||||
|
||||
Angular 1 is currently loaded by a script tag in `index.html` and
|
||||
switching to an ES6 import at this time is not worth the considerable effort.
|
||||
Instead we declare `angular` as an untyped `any` to avoid typing errors.
|
||||
|
||||
:marked
|
||||
We can then make an adapter by instantiating the class:
|
||||
|
||||
|
|
@ -1216,7 +1218,6 @@ code-example(format="").
|
|||
|
||||
+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts', null, 'app/phone-detail/phone-detail.component.ts')
|
||||
|
||||
|
||||
:marked
|
||||
What we have here are two Angular 1 components using an Angular 2 service!
|
||||
The components don't need to be aware of this, though the fact that the
|
||||
|
|
@ -1497,12 +1498,7 @@ code-example(format="").
|
|||
we still need are for Jasmine and Angular 2 polyfills.
|
||||
|
||||
code-example(format="").
|
||||
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
|
||||
npm run typings uninstall angular-animate -- --save --global
|
||||
npm uninstall @types/angular --save-dev
|
||||
|
||||
:marked
|
||||
Finally, from `index.html`, remove all references to
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ a(id="loaders")
|
|||
:marked
|
||||
... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader.
|
||||
|
||||
The first `import` file matches the `.ts` pattern so Webpack processes it with the `ts` (TypeScript) loader.
|
||||
The first `import` file matches the `.ts` pattern so Webpack processes it with the `awesome-typescript-loader`.
|
||||
The imported file doesn't match the second pattern so its loader is ignored.
|
||||
|
||||
The second `import` matches the second `.css` pattern for which we have *two* loaders chained by the (!) character.
|
||||
|
|
@ -152,14 +152,12 @@ code-example(format="").
|
|||
|
||||
+makeTabs(
|
||||
`webpack/ts/package.webpack.json,
|
||||
webpack/ts/typings.1.json,
|
||||
webpack/ts/tsconfig.1.json,
|
||||
webpack/ts/webpack.config.js,
|
||||
webpack/ts/karma.webpack.conf.js,
|
||||
webpack/ts/config/helpers.js`,
|
||||
null,
|
||||
`package.json,
|
||||
typings.json,
|
||||
tsconfig.json,
|
||||
webpack.config.js,
|
||||
karma.conf.js,
|
||||
|
|
@ -172,7 +170,7 @@ code-example(format="").
|
|||
Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter.
|
||||
We require packages for Webpack use in addition to the ones listed in that chapter.
|
||||
|
||||
Learn about `tsconfig.json` and `typings.json` in the [Typescript configuration](../guide/typescript-configuration.html) chapter.
|
||||
Learn about `tsconfig.json` in the [Typescript configuration](../guide/typescript-configuration.html) chapter.
|
||||
:marked
|
||||
Open a terminal/console window and install the *npm* packages with `npm install`.
|
||||
|
||||
|
|
@ -232,7 +230,7 @@ a(id="common-configuration")
|
|||
+makeExample('webpack/ts/config/webpack.common.js', 'loaders', 'config/webpack.common.js')(format=".")
|
||||
|
||||
:marked
|
||||
* ts - a loader to transpile our Typescript code to ES5, guided by the `tsconfig.json` file
|
||||
* awesome-typescript-loader - a loader to transpile our Typescript code to ES5, guided by the `tsconfig.json` file
|
||||
* angular2-template-loader - loads angular components' template and styles
|
||||
* html - for component templates
|
||||
* images/fonts - Images and fonts are bundled as well.
|
||||
|
|
|
|||
|
|
@ -95,9 +95,6 @@ block package-and-config-files
|
|||
li.
|
||||
#[b tsconfig.json] defines how the TypeScript compiler generates JavaScript from the project's
|
||||
files.
|
||||
li.
|
||||
#[b typings.json] provides additional definition files for libraries that the TypeScript
|
||||
compiler doesn't natively recognize.
|
||||
li.
|
||||
#[b systemjs.config.js] provides information to a module loader about where to find
|
||||
application modules, and registers all the necessary packages. It also
|
||||
|
|
@ -111,12 +108,10 @@ block package-and-config-files
|
|||
+makeTabs(`
|
||||
quickstart/ts/package.1.json,
|
||||
quickstart/ts/tsconfig.1.json,
|
||||
quickstart/ts/typings.1.json,
|
||||
quickstart/ts/systemjs.config.1.js
|
||||
`, '', `
|
||||
package.json,
|
||||
tsconfig.json,
|
||||
typings.json,
|
||||
systemjs.config.js
|
||||
`)
|
||||
|
||||
|
|
@ -153,18 +148,9 @@ block install-packages
|
|||
.file angular-quickstart
|
||||
.children
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file package.json
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
|
||||
:marked
|
||||
If the `typings` folder doesn't show up after running `npm install`, you'll need to install it manually with the command:
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
npm run typings install
|
||||
|
||||
:marked
|
||||
You're now ready to write some code!
|
||||
|
|
@ -206,7 +192,6 @@ block install-packages
|
|||
[`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
|
||||
[Tour of Heroes Tutorial](./tutorial/).
|
||||
|
||||
|
||||
.l-main-section
|
||||
h1#root-component Step !{step++}: Create a component and add it to your application
|
||||
:marked
|
||||
|
|
@ -370,13 +355,11 @@ block project-file-structure
|
|||
.file app.module.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
To see the file contents, open the <live-example></live-example>.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,14 +22,12 @@ include ../_quickstart_repo
|
|||
.file app.component.ts
|
||||
.file app.module.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file node_modules ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
## Keep the app transpiling and running
|
||||
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
|
||||
|
|
|
|||
|
|
@ -27,14 +27,12 @@ include ../_util-fns
|
|||
.file app.component.ts
|
||||
.file app.module.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file node_modules ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
### Keep the app transpiling and running
|
||||
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
|
||||
|
|
|
|||
|
|
@ -19,14 +19,12 @@ include ../_util-fns
|
|||
.file app.component.ts
|
||||
.file app.module.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file node_modules ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
### Keep the app transpiling and running
|
||||
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
|
||||
|
|
@ -213,11 +211,9 @@ code-example(format=".")
|
|||
.file hero-detail.component.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here are the code files we discussed in this chapter.
|
||||
|
||||
|
|
|
|||
|
|
@ -34,13 +34,11 @@ include ../_util-fns
|
|||
.file hero-detail.component.ts
|
||||
.file main.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
:marked
|
||||
### Keep the app transpiling and running
|
||||
|
|
@ -315,14 +313,12 @@ a#child-component
|
|||
.file hero.service.ts
|
||||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file node_modules ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
:marked
|
||||
Here are the code files we discussed in this chapter.
|
||||
|
||||
|
|
|
|||
|
|
@ -64,13 +64,11 @@ block intro-file-tree
|
|||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
block keep-app-running
|
||||
:marked
|
||||
|
|
@ -925,13 +923,11 @@ block file-tree-end
|
|||
.file main.ts
|
||||
.file mock-heroes.ts
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -564,13 +564,11 @@ block filetree
|
|||
.file main.ts
|
||||
.file in-memory-data.service.ts (new)
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
.file index.html
|
||||
.file package.json
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file typings.json
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ var del = require('del');
|
|||
var Dgeni = require('dgeni');
|
||||
var _ = require('lodash');
|
||||
var globby = require('globby');
|
||||
var ignoreDirs = ['**/node_modules/**', '**/dist/**', '**/typings/**'];
|
||||
var ignoreDirs = ['**/node_modules/**', '**/dist/**'];
|
||||
|
||||
var _getLogLevel = function (options) { return options.logLevel || 'info'; }
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ function createShredExamplePackage(shredOptions) {
|
|||
readFilesProcessor.sourceFiles = [ {
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
include: includeFiles ,
|
||||
exclude: [ '**/node_modules/**', '**/dist/**', '**/typings/**', '**/packages/**', '**/dart/build/**'],
|
||||
exclude: [ '**/node_modules/**', '**/dist/**', '**/packages/**', '**/dart/build/**'],
|
||||
// When calculating the relative path to these files use this as the base path.
|
||||
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
|
||||
basePath: options.examplesDir
|
||||
|
|
@ -190,7 +190,7 @@ function createShredJadePackage(shredOptions) {
|
|||
readFilesProcessor.sourceFiles = [ {
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
include: includeFiles ,
|
||||
exclude: [ '**/node_modules/**', '**/typings/**', '**/packages/**', '**/dart/build/**', '**/_code-examples.jade'],
|
||||
exclude: [ '**/node_modules/**', '**/packages/**', '**/dart/build/**', '**/_code-examples.jade'],
|
||||
// When calculating the relative path to these files use this as the base path.
|
||||
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
|
||||
basePath: options.jadeDir
|
||||
|
|
@ -244,7 +244,7 @@ var createShredMapPackage = function(mapOptions) {
|
|||
readFilesProcessor.sourceFiles = [ {
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
include: includeFiles,
|
||||
exclude: ['**/node_modules/**', '**/typings/**', '**/packages/**', '**/dart/build/**'],
|
||||
exclude: ['**/node_modules/**', '**/packages/**', '**/dart/build/**'],
|
||||
// When calculating the relative path to these files use this as the base path.
|
||||
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
|
||||
basePath: options.jadeDir
|
||||
|
|
|
|||
|
|
@ -255,10 +255,8 @@ class PlunkerBuilder {
|
|||
}
|
||||
});
|
||||
|
||||
// var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
|
||||
// var defaultExcludes = [ '!**/node_modules/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
|
||||
var defaultExcludes = [
|
||||
'!**/typings/**',
|
||||
'!**/typings.json',
|
||||
'!**/tsconfig.json',
|
||||
'!**/*plnkr.*',
|
||||
'!**/package.json',
|
||||
|
|
|
|||
Loading…
Reference in New Issue