手动创建angular7项目

最新推荐文章于 2022-09-23 11:26:52 发布

Xxxuaneer

最新推荐文章于 2022-09-23 11:26:52 发布

阅读量248

点赞数

分类专栏：前端文章标签： angular2

本文链接：https://blog.csdn.net/XUANEER/article/details/109078705

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

创建一个项目文件夹：my-app.
在该文件夹下创建一个package.json文件，该文件是npm的包文件。

{
 "name": "insitu",
 "private": true,
 "version": "0.0.0",
 "dependencies": {
   "@angular/common": "^7.0.0",
   "@angular/compiler": "^7.0.0",
   "@angular/core": "~7.0.0",
   "@angular/platform-browser": "7.0.0",
   "@angular/platform-browser-dynamic": "7.0.0",
   "@angular/upgrade": "7.0.0",
   "core-js": "^2.4.1",
   "systemjs": "^0.19.40",
   "traceur": "0.0.111",
   "tslib": "^1.10.0",
   "zone.js": "~0.10.2"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "^0.13.8",
   "@angular/cli": "~7.0.0",
   "@angular/compiler-cli": "~7.0.0",
   "@types/angular": "^1.7.0",
   "@types/angular-animate": "^1.5.10",
   "@types/angular-cookies": "^1.4.5",
   "@types/angular-mocks": "^1.7.0",
   "@types/angular-resource": "^1.5.15",
   "@types/angular-route": "^1.7.1",
   "@types/angular-sanitize": "^1.7.0",
   "@types/jasmine": "^3.5.10",
   "@types/node": "^8.9.4",
   "http-server": "^0.11.1",
   "jasmine-core": "^3.3.0",
   "typescript": "^3.1.1"
 },
 "scripts": {
   "prestart": "npm install",
   "start": "http-server ./ -a localhost -p 8000 -c-1",
   "tsc": "tsc",
   "tsc:w": "tsc -w",
   "build": "ng build"
 }
}

打开terminal，cd 到该项目目录下，执行npm install。安装依赖包
根目录下创建angular.json。

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
   "my-app": {
     "root": "",
     "sourceRoot": "src",
     "projectType": "application",
     "prefix": "app",
     "schematics": {},
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
         	"outputPath": "dist/my-app",
           "index": "src/index.html",
           "main": "src/main.ts",
           "polyfills": "src/polyfills.ts",
           "tsConfig": "tsconfig.app.json"
         }
       },
       "serve": {
         "builder": "@angular-devkit/build-angular:dev-server",
         "options": {
           "browserTarget": "my-app:build"
         },
         "configurations": {
           "production": {
             "browserTarget": "my-app:build:production"
           }
         }
       }
     }
   }
 },
 "defaultProject": "my-app"
}

根目录下创建tsconfig.app.json

{
 "compileOnSave": false,
 "compilerOptions": {
   "baseUrl": "./",
   "outDir": "./src/dist/out-tsc",
   "sourceMap": true,
   "declaration": false,
   "downlevelIteration": true,
   "experimentalDecorators": true,
   "emitDecoratorMetadata": true,
   "module": "esnext",
   "moduleResolution": "node",
   "importHelpers": true,
   "target": "es2015",
   "typeRoots": [
     "node_modules/@types"
   ],
   "lib": [
     "es2018",
     "dom"
   ]
 },
 "angularCompilerOptions": {
   "fullTemplateTypeCheck": true,
   "strictInjectionParameters": true
 }
}

创建scr文件夹，在该目录下分别创建index.html、main.ts
index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>MyApp</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
 <app-root></app-root>
</body>
</html>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app1/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));

在src目录下创建app文件夹，在该文件夹下分别创建app.component.ts、app.module.ts、polyfills.ts
app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello {{title}}</h1>'
})
export class AppComponent {
    title = 'world';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

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
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * 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
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (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__UNPATCHED_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
 */

打开terminal，cd 到my-app目录下，执行 ng serve --open。hello world显示到页面，angular项目就跑成功了。

Xxxuaneer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手动创建angular7项目

创建一个项目文件夹：my-app.在该文件夹下创建一个package.json文件，该文件是npm的包文件。{ "name": "insitu", "private": true, "version": "0.0.0", "dependencies": { "@angular/common": "^7.0.0", "@angular/compiler": "^7.0.0", "@angular/core": "~7.0.0", "@angular/platform-b.
复制链接

扫一扫