手動建立TypeScript+Angular2專案的方式執行HelloWorld
阿新 • • 發佈：2019-01-06
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、此時在瀏覽器中執行成功，如下圖所示：
