angular-builder

angular 7 build app - replace assets url with real url

試著忘記壹切 — Thu, 28 Jan 2021 21:21:12 +0000

angular 7 build app - replace assets url with real url 試著忘記壹切 2021-01-29 05:21:12

问题

In an Angular 7 app i have different assets, images, fonts etc. All are located in src/assets/images or src/assets/fonts, etc

I my files i use them like this: <img src="/assets/images/img.png">

angular.json look like this:

 .....
 "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
 .....

When building I use:

ng build --prod --build-optimizer --deploy-url=https://cdn.domain.com

This will replace all the reference to assets resource from this:

<img src="/assets/images/img.png">

to this:

<img src="https://cdn.domain.com/assets/images/img.png">

My question how I can remove the assets/images path when building so that after building the output will be:

<img src="https://cdn.domain.com/img.png">

回答1:

You could replace

 "assets": [
    ...
    "src/assets",
    ...
  ]

"assets": [
  ...
  { "glob": "**/*", "input": "src/assets", "output": "/" },
  ...
]

All the files will be in "/dist/environment/" and not in "/dist/environment/..."

Then in your html files, use directly :

<img src="/img.png">

Have a look here : https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md

:-)

来源：https://stackoverflow.com/questions/53962936/angular-7-build-app-replace-assets-url-with-real-url

标签

angular

angular6

angular-cli

angular7

angular-builder

Angular CLI custom builder

假如想象 — Tue, 18 Feb 2020 04:42:35 +0000

Angular CLI custom builder 假如想象 2020-02-18 12:42:35

问题

Angular CLI 6 introduced a new concept of builders (aka Architect Targets).
There are a couple of prebuilt builders that come with @angular-devkit/build_angular, but unfortunately there is no documentation that explains how to create your own builder.

How do I create my own builder (for example to modify the underlying webpack configuration)?

回答1:

Update:

For Angular 8+ read this AngularInDepth article.

For Angular 6 and 7:

The full article can be found here.

For the sake of simplicity I assume that the new builder is implemented in Typescript, but it can be implemented in pure JavaScript as well.

Implementation:

Create a directory for your custom builders (for example custom-builders) in the root of your project (or alternatively install it as a local npm module)
Inside the directory create a file called builders.json, index.ts and package.json that contains builders entry pointing to builders.json
Inside custom-builders create a directory for the builder you want to implement (say, custom-builders/my-cool-builder
Add index.ts, schema.json and schema.d.ts to my-cool-builder directory
Populate schema.json with the schema of your builder options. See an example here.
Define your schema.d.ts according to the schema.json you defined. See an example here.

Implement your builder in my-cool-builder/index.ts. The builder has to implement the following interface:

export interface Builder<OptionsT> {
  run(builderConfig: BuilderConfiguration<Partial<OptionsT>>):  Observable<BuildEvent>;
}

While BuildEvent is this:

export interface BuildEvent {
  success: boolean;
}

BuilderConfiguration is this:

export interface BuilderConfiguration<OptionsT = {}> {
  root: Path;
  sourceRoot?: Path;
  projectType: string;
  builder: string;
  options: OptionsT;
}

And OptionsT is the interface you defined for your builder options in schema.d.ts

You can use browser architect target as a reference.

Once implemented, add your builder to builders.json:

{
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "cool-builder": {
      "class": "./my-cool-builder",
      "schema": "./my-cool-builder/schema.json",
      "description": "My cool builder that builds things up"
    }
  }
}

Usage:

In your angular.json:

    "architect": {
        ...
        "build": {
                  "builder": "./custom-builders:cool-builder"
                  "options": {
                         your options here
                  }

Example

For the full example check out this library: https://github.com/meltedspark/angular-builders

回答2:

I didn't test it and I'm not quite sure, but this concept might be solution.

architect.build.builder uses some Angular schematics in order to perform build process. You can create your own schematics which uses/inherits regular build schematics with additional logic that you want to implement.

回答3:

For those who use Angular 8 and higher, builders API is now officially supported and documented: https://angular.io/guide/cli-builder

It has a lot of changes compared to the previous version, so migration from Angular 7 to 8 might become complicated if you are using undocumented Architect API.

Here's a nice article to get started: https://blog.angular.io/introducing-cli-builders-d012d4489f1b

来源：https://stackoverflow.com/questions/51069290/angular-cli-custom-builder

标签

Angular CLI custom builder

一个人想着一个人 — Tue, 18 Feb 2020 04:38:51 +0000

Angular CLI custom builder 一个人想着一个人 2020-02-18 12:38:51

问题

How do I create my own builder (for example to modify the underlying webpack configuration)?

回答1:

Update:

For Angular 8+ read this AngularInDepth article.

For Angular 6 and 7:

The full article can be found here.

For the sake of simplicity I assume that the new builder is implemented in Typescript, but it can be implemented in pure JavaScript as well.

Implementation:

Create a directory for your custom builders (for example custom-builders) in the root of your project (or alternatively install it as a local npm module)
Inside the directory create a file called builders.json, index.ts and package.json that contains builders entry pointing to builders.json
Inside custom-builders create a directory for the builder you want to implement (say, custom-builders/my-cool-builder
Add index.ts, schema.json and schema.d.ts to my-cool-builder directory
Populate schema.json with the schema of your builder options. See an example here.
Define your schema.d.ts according to the schema.json you defined. See an example here.

Implement your builder in my-cool-builder/index.ts. The builder has to implement the following interface:

export interface Builder<OptionsT> {
  run(builderConfig: BuilderConfiguration<Partial<OptionsT>>):  Observable<BuildEvent>;
}

While BuildEvent is this:

export interface BuildEvent {
  success: boolean;
}

BuilderConfiguration is this:

export interface BuilderConfiguration<OptionsT = {}> {
  root: Path;
  sourceRoot?: Path;
  projectType: string;
  builder: string;
  options: OptionsT;
}

And OptionsT is the interface you defined for your builder options in schema.d.ts

You can use browser architect target as a reference.

Once implemented, add your builder to builders.json:

{
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "cool-builder": {
      "class": "./my-cool-builder",
      "schema": "./my-cool-builder/schema.json",
      "description": "My cool builder that builds things up"
    }
  }
}

Usage:

In your angular.json:

    "architect": {
        ...
        "build": {
                  "builder": "./custom-builders:cool-builder"
                  "options": {
                         your options here
                  }

Example

For the full example check out this library: https://github.com/meltedspark/angular-builders

回答2:

I didn't test it and I'm not quite sure, but this concept might be solution.

回答3:

For those who use Angular 8 and higher, builders API is now officially supported and documented: https://angular.io/guide/cli-builder

It has a lot of changes compared to the previous version, so migration from Angular 7 to 8 might become complicated if you are using undocumented Architect API.

Here's a nice article to get started: https://blog.angular.io/introducing-cli-builders-d012d4489f1b

来源：https://stackoverflow.com/questions/51069290/angular-cli-custom-builder

标签