angular2通俗化入门教程（1）安装

作者daliane

angular2。0的介绍就不多说了。没有什么用。也不讲要具备什么知识门槛，如果没有那些知识，也可以先学，学的过程中再补也来得及。

只接上干货。

1.安装nodejs

https://nodejs.org/en/download/ 

到这里下载安装就可以，

配一下环境变量

第一步：npm config get prefix ，获取输出path“C:\Users\dg\AppData\Roaming\npm”加上”\node_modules”用于第二步值

 

第二步：添加系统环境变量：NODE_PATH:C:\Users\dg\AppData\Roaming\npm\node_modules

 
第三步：关掉命令行，重新打开。

如果要用cnpm 就执行cnpm config get prefix

其它同上。

2.换镜像。原因你懂得。 

 npm install -g cnpm --registry=https://registry.npm.taobao.org

3.输入命令安装

PS C:\angularjs> cnpm install -g @angular/cli 
Downloading @angular/cli to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli_tmp
Copying C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli_tmp\_@angular_cli@1.3.0@@angular\cli to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli
Installing @angular/cli's dependencies to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli/node_modules
[1/63] circular-dependency-plugin@^3.0.0 installed at node_modules\_circular-dependency-plugin@3.0.0@circular-dependency-plugin
[2/63] core-object@^3.1.0 installed at node_modules\_core-object@3.1.4@core-object
[3/63] @ngtools/json-schema@1.1.0 installed at node_modules\_@ngtools_json-schema@1.1.0@@ngtools\json-schema
[4/63] denodeify@^1.2.1 installed at node_modules\_denodeify@1.2.1@denodeify
[5/63] ember-cli-string-utils@^1.0.0 installed at node_modules\_ember-cli-string-utils@1.1.0@ember-cli-string-utils
[6/63] chalk@^2.0.1 installed at node_modules\_chalk@2.1.0@chalk
[7/63] diff@^3.1.0 installed at node_modules\_diff@3.3.0@diff
[8/63] ember-cli-normalize-entity-name@^1.0.0 installed at node_modules\_ember-cli-normalize-entity-name@1.0.0@ember-cli-normalize-entity-name
[9/63] file-loader@^0.10.0 installed at node_modules\_file-loader@0.10.1@file-loader
[10/63] get-caller-file@^1.0.0 installed at node_modules\_get-caller-file@1.0.2@get-caller-file
[11/63] exports-loader@^0.6.3 installed at node_modules\_exports-loader@0.6.4@exports-loader
[12/63] css-loader@^0.28.1 installed at node_modules\_css-loader@0.28.4@css-loader
[13/63] heimdalljs-logger@^0.1.9 installed at node_modules\_heimdalljs-logger@0.1.9@heimdalljs-logger
[14/63] fs-extra@^4.0.0 installed at node_modules\_fs-extra@4.0.1@fs-extra
[15/63] glob@^7.0.3 installed at node_modules\_glob@7.1.2@glob
[16/63] inflection@^1.7.0 installed at node_modules\_inflection@1.12.0@inflection
[17/63] isbinaryfile@^3.0.0 installed at node_modules\_isbinaryfile@3.0.2@isbinaryfile
[18/63] heimdalljs@^0.2.4 installed at node_modules\_heimdalljs@0.2.5@heimdalljs
[19/63] karma-source-map-support@^1.2.0 installed at node_modules\_karma-source-map-support@1.2.0@karma-source-map-support
[20/63] inquirer@^3.0.0 installed at node_modules\_inquirer@3.2.1@inquirer
[21/63] license-webpack-plugin@^0.5.1 installed at node_modules\_license-webpack-plugin@0.5.1@license-webpack-plugin
[22/63] lodash@^4.11.1 existed at node_modules\_lodash@4.17.4@lodash
[npminstall:get] retry GET http://registry.npm.taobao.org/webpack after 100ms, retry left 4, error: Error: unexpected end of file, GET http://registry.npm.taobao.org/webpack 200 (connected: true, keepalive socket: true, agent status: {"createSocketCount":10,"createSocketErrorCount":0,"closeSocketCount":1,"errorSocketCount":0,"timeoutSocketCount":1,"requestCount":397,"freeSockets":{"registry.npm.taobao.org:80:":8},"sockets":{"registry.npm.taobao.org:80:":1},"requests":{}})
headers: {"server":"nginx/1.4.6 (Ubuntu)","date":"Fri, 11 Aug 2017 01:35:12 GMT","content-type":"application/json; charset=utf-8","transfer-encoding":"chunked","connection":"keep-alive","x-current-requests":"1","x-readtime":"55","content-encoding":"gzip"}
[23/63] common-tags@^1.3.1 installed at node_modules\_common-tags@1.4.0@common-tags
[24/63] minimatch@^3.0.3 existed at node_modules\_minimatch@3.0.4@minimatch
[25/63] node-modules-path@^1.0.0 installed at node_modules\_node-modules-path@1.0.1@node-modules-path
[26/63] less-loader@^4.0.5 installed at node_modules\_less-loader@4.0.5@less-loader
[27/63] memory-fs@^0.4.1 installed at node_modules\_memory-fs@0.4.1@memory-fs
[28/63] opn@~5.1.0 installed at node_modules\_opn@5.1.0@opn
[29/63] nopt@^4.0.1 installed at node_modules\_nopt@4.0.1@nopt
[30/63] cssnano@^3.10.0 installed at node_modules\_cssnano@3.10.0@cssnano
[31/63] autoprefixer@^6.5.3 installed at node_modules\_autoprefixer@6.7.7@autoprefixer
[32/63] portfinder@~1.0.12 installed at node_modules\_portfinder@1.0.13@portfinder
[33/63] raw-loader@^0.5.1 installed at node_modules\_raw-loader@0.5.1@raw-loader
[34/63] rsvp@^3.0.17 installed at node_modules\_rsvp@3.6.2@rsvp
[35/63] resolve@^1.1.7 installed at node_modules\_resolve@1.4.0@resolve
[36/63] script-loader@^0.7.0 installed at node_modules\_script-loader@0.7.0@script-loader
[37/63] less@^2.7.2 installed at node_modules\_less@2.7.2@less
[38/63] silent-error@^1.0.0 existed at node_modules\_silent-error@1.1.0@silent-error
[39/63] semver@^5.1.0 existed at node_modules\_semver@5.4.1@semver
[40/63] source-map-support@^0.4.1 existed at node_modules\_source-map-support@0.4.15@source-map-support
[41/63] extract-text-webpack-plugin@3.0.0 installed at node_modules\_extract-text-webpack-plugin@3.0.0@extract-text-webpack-plugin
[42/63] style-loader@^0.13.1 installed at node_modules\_style-loader@0.13.2@style-loader
[esrecurse@4.2.0] download ShasumNotMatchError: real sha1:4c58ee2713f416935e3924ecfecb22831b923249 not equal to remote:fa9568d98d3823f9a41d91e902dcab9ea6e5b163 (esrecurse@4.2.0), fail count: 1
[43/63] source-map-loader@^0.2.0 installed at node_modules\_source-map-loader@0.2.1@source-map-loader
[44/63] postcss-loader@^1.3.3 installed at node_modules\_postcss-loader@1.3.3@postcss-loader
[45/63] postcss-url@^5.1.2 installed at node_modules\_postcss-url@5.1.2@postcss-url
[46/63] temp@0.8.3 installed at node_modules\_temp@0.8.3@temp
[47/63] url-loader@^0.5.7 installed at node_modules\_url-loader@0.5.9@url-loader
[48/63] walk-sync@^0.3.1 installed at node_modules\_walk-sync@0.3.2@walk-sync
[49/63] webpack@~3.4.1 existed at node_modules\_webpack@3.4.1@webpack
[50/63] istanbul-instrumenter-loader@^2.0.0 installed at node_modules\_istanbul-instrumenter-loader@2.0.0@istanbul-instrumenter-loader
[51/63] stylus-loader@^3.0.1 installed at node_modules\_stylus-loader@3.0.1@stylus-loader
[52/63] webpack-dev-middleware@^1.11.0 installed at node_modules\_webpack-dev-middleware@1.12.0@webpack-dev-middleware
[53/63] webpack-merge@^4.1.0 installed at node_modules\_webpack-merge@4.1.0@webpack-merge
[54/63] node-sass@^4.3.0 existed at node_modules\_node-sass@4.5.3@node-sass
[55/63] zone.js@^0.8.14 installed at node_modules\_zone.js@0.8.16@zone.js
[56/63] stylus@^0.54.5 installed at node_modules\_stylus@0.54.5@stylus
[57/63] rxjs@^5.4.2 installed at node_modules\_rxjs@5.4.3@rxjs
[58/63] sass-loader@^6.0.3 installed at node_modules\_sass-loader@6.0.6@sass-loader
[59/63] webpack-dev-server@~2.5.1 installed at node_modules\_webpack-dev-server@2.5.1@webpack-dev-server
fsevents@1.1.2 download from binary mirror: {"module_name":"fse","module_path":"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/","remote_path":"./v{version}/","package_name":"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz","host":"https://npm.taobao.org/mirrors/fsevents"}
platform unsupported html-webpack-plugin@2.30.1 › webpack@3.4.1 › watchpack@1.4.0 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
[60/63] html-webpack-plugin@^2.29.0 installed at node_modules\_html-webpack-plugin@2.30.1@html-webpack-plugin
[61/63] @ngtools/webpack@1.6.0 installed at node_modules\_@ngtools_webpack@1.6.0@@ngtools\webpack
[62/63] typescript@>=2.0.0 <2.5.0 existed at node_modules\_typescript@2.4.2@typescript
[63/63] @angular-devkit/build-optimizer@0.0.13 installed at node_modules\_@angular-devkit_build-optimizer@0.0.13@@angular-devkit\build-optimizer
execute post install 2 scripts...
[1/2] scripts.postinstall html-webpack-plugin@2.30.1 › webpack@3.4.1 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js"
[1/2] scripts.postinstall html-webpack-plugin@2.30.1 › webpack@3.4.1 › uglifyjs-webpack-plugin@^0.4.6 finished in 239ms
[2/2] scripts.install sass-loader@6.0.6 › node-sass@^4.3.0 run "node scripts/install.js"
Downloading binary from https://npm.taobao.org/mirrors/node-sass/v4.5.3/win32-x64-48_binding.node
Download complete
Binary saved to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\_node-sass@4.5.3@node-sass\vendor\win32-x64-48\binding.node
Caching binary to C:\Users\dg\.npminstall_tarball\node-sass\4.5.3\win32-x64-48_binding.node
[2/2] scripts.install sass-loader@6.0.6 › node-sass@^4.3.0 finished in 17s
[2/2] scripts.postinstall sass-loader@6.0.6 › node-sass@^4.3.0 run "node scripts/build.js"
Binary found at C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\_node-sass@4.5.3@node-sass\vendor\win32-x64-48\binding.node
Testing binary
Binary is fine
[2/2] scripts.postinstall sass-loader@6.0.6 › node-sass@^4.3.0 finished in 315ms
Recently updated (since 2017-08-04): 17 packages (detail see file C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\.recently_updates.txt)
  Today:
    → rxjs@^5.4.2(5.4.3) (07:31:38)
  2017-08-10
    → @angular-devkit/build-optimizer@0.0.13(0.0.13) (07:05:12)
    → @ngtools/webpack@1.6.0(1.6.0) (07:33:53)
    → autoprefixer@6.7.7 › browserslist@1.7.7 › electron-to-chromium@^1.2.7(1.3.18) (16:02:24)
    → webpack-dev-server@2.5.1 › selfsigned@^1.9.1(1.10.1) (22:31:07)
  2017-08-09
    → autoprefixer@6.7.7 › caniuse-db@^1.0.30000634(1.0.30000713) (13:50:20)
    → stylus@0.54.5 › debug@*(3.0.0) (05:55:59)
  2017-08-08
    → html-webpack-plugin@2.30.1 › webpack@3.4.1 › node-libs-browser@2.0.0 › crypto-browserify@3.11.1 › create-ecdh@4.0.0 › bn.js@^4.1.0(4.11.8) (06:21:45)
  2017-08-07
    → chalk@^2.0.1(2.1.0) (11:56:43)
    → core-object@^3.1.0(3.1.4) (21:36:01)
    → inquirer@3.2.1 › external-editor@2.0.4 › jschardet@^1.4.2(1.5.1) (08:13:30)
    → webpack-dev-server@2.5.1 › express@^4.13.3(4.15.4) (10:12:12)
  2017-08-06
    → common-tags@1.4.0 › babel-runtime@6.25.0 › core-js@^2.4.0(2.5.0) (22:30:22)
    → webpack-dev-server@2.5.1 › express@4.15.4 › send@0.15.4(0.15.4) (13:25:10)
    → webpack-dev-server@2.5.1 › express@4.15.4 › serve-static@1.12.4(1.12.4) (13:54:55)
  2017-08-05
    → webpack-dev-server@2.5.1 › serve-index@1.9.0 › http-errors@~1.6.1(1.6.2) (12:08:45)
  2017-08-04
    → webpack-dev-server@2.5.1 › express@4.15.4 › finalhandler@~1.0.4(1.0.4) (12:01:28)
All packages installed (756 packages installed from npm registry, used 3m, speed 118.62kB/s, json 672(1.23MB), tarball 21.16MB)
[@angular/cli@1.3.0] link C:\Users\dg\AppData\Roaming\npm\ng@ -> C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng

4.换镜像，你懂的。 

PS C:\angularjs> ng set --global packageManager=cnpm

5.新建一个app好进行学习。

PS C:\angularjs> ng new my-app
installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via cnpm.
Installed packages for tooling via cnpm.
Project 'my-app' successfully created.
PS C:\angularjs>

6,。安装一个插件，

cnpm install -g @angular/compiler-cli
PS C:\angularjs\my-app> cnpm install -g @angular/compiler-cli
Downloading @angular/compiler-cli to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli_tmp
Copying C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli_tmp\_@angular_compiler-cli@4.3.4@@angular\compiler-cli to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli
Installing @angular/compiler-cli's dependencies to C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli/node_modules
[1/3] minimist@^1.2.0 installed at node_modules\_minimist@1.2.0@minimist
[2/3] reflect-metadata@^0.1.2 installed at node_modules\_reflect-metadata@0.1.10@reflect-metadata
[3/3] @angular/tsc-wrapped@4.3.4 installed at node_modules\_@angular_tsc-wrapped@4.3.4@@angular\tsc-wrapped
peerDependencies WARNING @angular/tsc-wrapped@4.3.4 requires a peer of typescript@^2.1.5 but none was installed
peerDependencies WARNING @angular/tsc-wrapped@4.3.4 › tsickle@^0.21.0 requires a peer of typescript@^2.1.0 but none was installed
Recently updated (since 2017-08-04): 1 packages (detail see file C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli\node_modules\.recently_updates.txt)
  Today:
    → @angular/tsc-wrapped@4.3.4(4.3.4) (02:29:22)
All packages installed (8 packages installed from npm registry, used 4s, speed 137.97kB/s, json 7(16.73kB), tarball 577.77kB)
[@angular/compiler-cli@4.3.4] link C:\Users\dg\AppData\Roaming\npm\ngc@ -> C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli\src\main.js
[@angular/compiler-cli@4.3.4] link C:\Users\dg\AppData\Roaming\npm\ng-xi18n@ -> C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\compiler-cli\src\extract_i18n.js
PS C:\angularjs\my-app> compiler-cli

7.启动app

PS C:\angularjs\my-app> ng serve --open
The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler'
Error: The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler'
    at Object.<anonymous> (C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\_@ngtools_webpack@1.6.0@@ngtools\webpack\src\index.js:14:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\dg\AppData\Roaming\npm\node_modules\@angular\cli\tasks\eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
PS C:\angularjs\my-app>

我去，没启动起来，why?  原来还要执行安装命令。



cnpm install


C:\angularjs\my-app>ng serve --open
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_html-webpack-plugin@2.30.1@html-webpack-plugin\lib\compiler.js:11:26)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_html-webpack-plugin@2.30.1@html-webpack-plugin\index.js:7:21)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

C:\angularjs\my-app>cnpm install webpack -g





	少什么就装什么，终于可以启动起来了




	



C:\angularjs\my-app>ng serve --open
Cannot find module '@angular-devkit/build-optimizer'
Error: Cannot find module '@angular-devkit/build-optimizer'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_@angular_cli@1.3.0@@angular\cli\models\webpack-configs\production.js:8:27)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_@angular_cli@1.3.0@@angular\cli\models\webpack-configs\index.js:9:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

C:\angularjs\my-app>cnpm install @angular-devkit/build-optimizer
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 172ms, speed 5.87kB/s, json 1(1.01kB), tarball 0B)

C:\angularjs\my-app>ng serve --open
Cannot find module '@ngtools/webpack'
Error: Cannot find module '@ngtools/webpack'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_@angular_cli@1.3.0@@angular\cli\tasks\eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\angularjs\my-app\node_modules\_@angular_cli@1.3.0@@angular\cli\models\webpack-configs\styles.js:6:17)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

C:\angularjs\my-app>cnpm install @ngtools/webpack
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 498ms, speed 8.19kB/s, json 1(4.08kB), tarball 0B)

C:\angularjs\my-app>ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 11% building modules 10/11 modules 1 active ..."}!C:\angularjs\my-app\src\styles.csswebpack: wait until bundle finished: /                                 34% building modules 207/223 modules 16 active ...e-js\modules\_array-species-create.js



C:\angularjs\my-app>ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 11% building modules 10/11 modules 1 active ..."}!C:\angularjs\my-app\src\styles.csswebpack: wait until bundle finished: /                                Date: 2017-08-11T08:05:36.978Z
Hash: 74464dc7902ce21db690
Time: 40959ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.73 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 210 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.6 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.28 MB [initial] [rendered]

webpack: Compiled successfully.





	



2017-08-11_160850




	





			

			

				

					
类似文章