ng已经更新到v18了，我对他的印象还停留在v1,v2的版本，最近研究了下，与react和vue是越来越像了，所以准备正式上手了。

新官网地址:https://angular.cn/

准备条件

• nodejs > 18.0
• vscode
• ng版本18.x(最新的版本)

{"name": "ngapp","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test"},"private": true,"dependencies": {"@angular/animations": "^18.1.0","@angular/common": "^18.1.0","@angular/compiler": "^18.1.0","@angular/core": "^18.1.0","@angular/forms": "^18.1.0","@angular/platform-browser": "^18.1.0","@angular/platform-browser-dynamic": "^18.1.0","@angular/router": "^18.1.0","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"},"devDependencies": {"@angular-devkit/build-angular": "^18.1.2","@angular/cli": "^18.1.2","@angular/compiler-cli": "^18.1.0","@types/jasmine": "~5.1.0","jasmine-core": "~5.1.0","karma": "~6.4.0","karma-chrome-launcher": "~3.2.0","karma-coverage": "~2.2.0","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.1.0","typescript": "~5.5.2"}
}

安装

• ng-cli

npm install -g @angular/cli

新建项目

ng new myCitizen

启动项目

cd myCitizen
ng serve --open

初始化项目的错误

· Cannot find module '@angular/platform-browser'

//tsconfig.json
"compilerOptions": {..."moduleResolution": "node",...},

helloworld

修改app.component.ts文件

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';@Component({selector: 'app-root',standalone: true,imports: [RouterOutlet],templateUrl: './app.component.html',styleUrl: './app.component.css',
})
export class AppComponent {name = 'Admin';
}

修改app.component.html

<main class="main"><p> Welcome to Angular!{{name}}</p>
</main>

这样，我们就完成了第一个Angular app。