angular library application 开发

最新推荐文章于 2022-07-29 14:14:00 发布

米斯特尔曾

最新推荐文章于 2022-07-29 14:14:00 发布

阅读量1.5k

点赞数

分类专栏： angular2/4 文章标签： angular application project projects library

本文链接：https://blog.csdn.net/qq_30101131/article/details/84800537

版权

angular2/4 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

前言

从angular6开始已经有library和project的开发命令

application

application的相关命令

zengwe@zengwe-PC:ng-testing$ng generate application --help
Generates and/or modifies files based on a schematic.
usage: ng generate application <name> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults 
    When true, disables interactive input prompts for options with a default.
  --dry-run (-d)
    When true, runs through and reports activity without writing out results.
  --force (-f)
    When true, forces overwriting of existing files.
  --help 
    Shows a help message for this command in the console.
  --interactive 
    When false, disables interactive input prompts.

Help for schematic application
Generates a new basic app definition in the "projects" subfolder of the workspace.
arguments:
  name
    The name of the new app.

options:
  --experimental-ivy 
    EXPERIMENTAL: True to create a new app that uses the Ivy rendering engine.
  --inline-style (-s)
    When true, includes styles inline in the root component.ts file. Only CSS styles can be included inline. Default is false, meaning that an external styles file is created and referenced in the root component.ts file.
  --inline-template (-t)
    When true, includes template inline in the root component.ts file. Default is false, meaning that an external template file is created and referenced in the root component.ts file. 
  --minimal 
    When true, creates a bare-bones project without any testing frameworks.
  --prefix (-p)
    A prefix to apply to generated selectors.
  --routing 
    When true, creates a routing NgModule.
  --skip-install 
    Skip installing dependency packages.
  --skip-package-json 
    When true, does not add dependencies to the "package.json" file.
  --skip-tests (-S)
    When true, does not create "spec.ts" test files for the app.
  --style 
    The file extension to use for style files.
  --view-encapsulation 
    The view encapsulation strategy to use in the new app.


To see help for a schematic run:
  ng generate <schematic> --help

常用参数解释

–routing 使用生成router
–style css格式如scss、sass、less
–prefix 指令或者组件selector的前缀
–inline-templet 默认true，true：不生成html文件，false：生成单独的html文件
–inline-style 同inline-templet

配置除了style和templet外其余在项目中新建组件等都不受影响
示例

ng generate application myapp --style scss --inline-style false --inline-templet false --profix zzj

会在项目跟目录下生projects/myapp这个项目，相应的angular.json也会发生改变，里面会有一个default是设置默认启动项目

启动

ng serve myapp

测试

ng test myapp

myapp指的是生成的项目的名称
其余就和原来开发项目相同了，包括打包

library

示例

ng generate library mylib --profix zzj

测试

ng test mylib

打包

ng build mylib

并不支持那些花里胡哨的打包功能

开发

首先library并不能独立运行，他是一个包，必须需要一个运行环境才能运行，所以我目前的解决办法是特意为他建一个project(applictaion)来运行他方便开发阶段看到效果
library会生成library/src/public_api.ts，这个文件就是统一的暴露这个library需要暴露的component、module等你想暴露的
如果在开发阶段觉得路径太深麻烦等，修改在整个项目的根目录的tsconfig.json的path添加这个路径的别称，引入时用这个别称打头就行

使用

首先打包ng build mylib,打包文件默认在项目根目录的dist下
在使用这个包的地方import {要引入的东西} from ‘mylib’; 即可

示例文件

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "mylib": [
        "dist/mylib1"
      ],
      "mylib/*": [
        "dist/mylib11*"
      ],
      "mylibdev": [
      	 "projects/mylib"
      ],
      "mylibdev/*": [
        "projects/mylib/*"
      ]
    }
  }
}

其中这两个仅仅是为了开发时使用我手动添加的，另外的两个为创建mylib自动生成的

      "mylibdev": [
      	 "projects/mylib"
      ],
      "mylibdev/*": [
        "projects/mylib/*"
      ]

添加了这个就可以在application中引入，并引入调试library了import { LibraryModule } from ‘mylibdev’;
实际使用import { LibraryModule } from ‘mylib’;

在application或library一些额外配置

一些额外的配置，如全局引入第三方css或其他的配置需要在项目的根目录angular中去配置，和原来的单项目配置相同，只是需要到指定project对象下去配置
angular.json由于json太长我删除部分其他不相关的部分

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mylib": {
      "root": "projects/mylib",
      "sourceRoot": "projects/mylib/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/mylib/tsconfig.lib.json",
            "project": "projects/mylib/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/mylib/src/test.ts",
            "tsConfig": "projects/mylib/tsconfig.spec.json",
            "karmaConfig": "projects/mylib/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/mylib/tsconfig.lib.json",
              "projects/mylib/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ng-testing"
}

需要修改就只mylib:{}下修改即可

删除application或library

删除projects下的相应文件
删除angular.json下的相应project
删除tsconfig.json下path中无用的路径别称

米斯特尔曾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular library application 开发

前言从angular6开始已经有library和project的开发命令applicationapplication的相关命令zengwe@zengwe-PC:ng-testing$ng generate application --helpGenerates and/or modifies files based on a schematic.usage: ng generate a...
复制链接

扫一扫

专栏目录