手動建立TypeScript+Angular2專案的方式執行HelloWorld
1、首先建立一個專案資料夾為:angular2-webapp,如下圖所示:
2、然後在該檔案下建立一個package.json檔案,此檔案是npm管理包的檔案,可以通過此檔案的配置安裝相應的包,如下程式碼所示:
{ "name": "angular2-webapp", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.1.0", "@angular/common": "~7.1.0", "@angular/compiler": "~7.1.0", "@angular/core": "~7.1.0", "@angular/forms": "~7.1.0", "@angular/platform-browser": "~7.1.0", "@angular/platform-browser-dynamic": "~7.1.0", "@angular/router": "~7.1.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.11.0", "@angular/cli": "~7.1.0", "@angular/compiler-cli": "~7.1.0", "@angular/language-service": "~7.1.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.6" } }
3、建立好檔案之後該目錄只有一個檔案,如下圖所示:
4、開啟dos視窗進入到該目錄中,然後執行npm install即可安裝依賴包,如下圖所示:
5、下載完成後,如果沒出現錯誤說明安裝成功,如下圖所示:
6、下載完後的目錄如下圖所示:
7、新建一個angular.json檔案,此檔案是配置angular的目錄結構對應的檔案,包括index.html,main.ts等,檔案內容如下:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular2-webapp": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "angular2-webapp:build" }, "configurations": { "production": { "browserTarget": "angular2-webapp:build:production" } } } } } }, "defaultProject": "angular2-webapp" }
8、在該配置檔案需要一個src目錄,在src目錄有3個檔案,分別是index.html(主頁)、main.ts程式入口檔案、tsConfig.app.json(typescript編譯所需的配置檔案),如下圖所示:
9、建立一個src檔案,如下圖所示:
10、然後分別建立三個檔案:index.html、main.ts、tsConfig.app.json,如下圖所示:
11、main.ts檔案內容為:
12、index.html內容如下圖所示:
13、tsConfig.app.json檔案如下所示:
14、然後在angular2-webapp執行ng serve,會提示錯誤,如下圖所示:
15、出現錯誤的原因是在angular.json檔案中缺少outputPath,只需要新增即可,如下圖所示:
16、然後執行ng serve --open,即可開始編譯ts檔案,如下圖所示:
17、在執行時出現錯誤說是找不到AppModule,這是由於在main.ts檔案中不存在AppModule,如下圖所示:
18、然後將AppModule更換成AppComponent,如下圖所示:
19、然後重新編譯執行,在瀏覽器中會出現NgModule錯誤,這是由於AppComponent必須在NgModule中,也就是說AppComponent以模組的方式存在,如下圖所示:
20、在src中建立一個app目錄,並在該目錄中建立一個app.component.ts,如下圖所示:
21、app.component.ts檔案內容如下:
import { Component } from '@angular/core';
@Component({//使用@Component裝飾器來定義一個AppComponent元件,Component元件是建立使用者介面的主要元件
selector: 'app',//元件標籤,定義之後就可以在html檔案中使用<app></app>直接使用該元件了
template: '<h1>Hello {{title}}',
})
export class AppComponent {
title = 'World';//標題
}
22、然後在main.ts檔案中更改為:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';//匯入NgModule,NgModule是我們組織Angular應用所必須的
import { BrowserModule } from '@angular/platform-browser';//匯入BrowserModule,匯入 BrowserModule 是因為它提供了啟動和執行瀏覽器應用的那些基本的服務提供商.
import { AppComponent } from 'app/app.component';
@NgModule({//我們在 @NgModule 的元資料中配置我們匯入的模組,因為我們需要依賴 BrowserModule 所以我們在 imports 中添加了它,然後我們又在 declarations 和 bootstrap 選項中添加了 AppComponent 元件.
declarations: [
AppComponent//在 declarations添加了 AppComponent 元件
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]//bootstrap選項中添加了 AppComponent 元件
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
23、然後重新編譯,在瀏覽器中出現沒有Zone.js檔案,如下圖所示:
24、出現此問題可以通過在angular.json檔案中新增polyfills項,並指向一個polyfills.ts,如下圖所示:
25、polyfills.ts檔案主要是在匯入一些包,如下程式碼所示:
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/**
* If the application will be indexed by Google Search, the following is required.
* Googlebot uses a renderer based on Chrome 41.
* https://developers.google.com/search/docs/guides/rendering
**/
// import 'core-js/es6/array';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
26、再次重新ng serve --open,如下圖所示:
27、此時在瀏覽器中執行成功,如下圖所示: