Skip to content

Commit 093c5a3

Browse files
clydinalan-agius4
authored andcommitted
feat(@schematics/angular): directly use @angular/build in new projects
The `@angular/build` package is now used directly within all newly created projects and replaces the previous usage of the `@angular-devkit/build-angular` package. This has the advantage of removing the need to install all of the Webpack related transitive dependencies contained within `@angular-devkit/build-angular` that are used to support the `browser` builder. This results in a significant reduction in both total dependency count and disk install size for new projects. New projects that would prefer to use the Webpack-based `browser` builder can still install the `@angular-devkit/build-angular` package within the workspace. The `@angular/build@19.2.0-next.2` package currently has a total unpacked size of ~115 MB. The `@angular-devkit/build-angular@19.2.0-next.2` package currently has a total unpacked size of ~291 MB.
1 parent 02df1be commit 093c5a3

File tree

8 files changed

+34
-25
lines changed

8 files changed

+34
-25
lines changed

packages/angular/build/src/builders/extract-i18n/application-extraction.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ export async function extractMessages(
4646
buildOptions.index = false;
4747
buildOptions.serviceWorker = false;
4848
buildOptions.outputMode = OutputMode.Static;
49+
buildOptions.appShell = undefined;
50+
buildOptions.ssr = undefined;
51+
buildOptions.prerender = undefined;
4952
buildOptions.server = undefined;
5053

5154
// Build the application with the build options

packages/schematics/angular/application/index.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
120120
},
121121
{
122122
type: NodeDependencyType.Dev,
123-
name: '@angular-devkit/build-angular',
124-
version: latestVersions.DevkitBuildAngular,
123+
name: '@angular/build',
124+
version: latestVersions.AngularBuild,
125125
},
126126
{
127127
type: NodeDependencyType.Dev,
@@ -234,7 +234,7 @@ function addAppToWorkspaceFile(
234234
schematics,
235235
targets: {
236236
build: {
237-
builder: Builders.Application,
237+
builder: Builders.BuildApplication,
238238
defaultConfiguration: 'production',
239239
options: {
240240
outputPath: `dist/${folderName}`,
@@ -260,7 +260,7 @@ function addAppToWorkspaceFile(
260260
},
261261
},
262262
serve: {
263-
builder: Builders.DevServer,
263+
builder: Builders.BuildDevServer,
264264
defaultConfiguration: 'development',
265265
options: {},
266266
configurations: {
@@ -273,12 +273,12 @@ function addAppToWorkspaceFile(
273273
},
274274
},
275275
'extract-i18n': {
276-
builder: Builders.ExtractI18n,
276+
builder: Builders.BuildExtractI18n,
277277
},
278278
test: options.minimal
279279
? undefined
280280
: {
281-
builder: Builders.Karma,
281+
builder: Builders.BuildKarma,
282282
options: {
283283
polyfills: options.experimentalZoneless ? [] : ['zone.js', 'zone.js/testing'],
284284
tsConfig: `${projectRoot}tsconfig.spec.json`,

packages/schematics/angular/application/index_spec.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,13 +205,11 @@ describe('Application Schematic', () => {
205205
});
206206

207207
describe(`update package.json`, () => {
208-
it(`should add build-angular to devDependencies`, async () => {
208+
it(`should add @angular/build to devDependencies`, async () => {
209209
const tree = await schematicRunner.runSchematic('application', defaultOptions, workspaceTree);
210210

211211
const packageJson = JSON.parse(tree.readContent('package.json'));
212-
expect(packageJson.devDependencies['@angular-devkit/build-angular']).toEqual(
213-
latestVersions.DevkitBuildAngular,
214-
);
212+
expect(packageJson.devDependencies['@angular/build']).toEqual(latestVersions.AngularBuild);
215213
});
216214

217215
it('should use the latest known versions in package.json', async () => {

packages/schematics/angular/config/index_spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,22 @@ describe('Config Schematic', () => {
5858
expect(tree.exists('projects/foo/karma.conf.js')).toBeTrue();
5959
});
6060

61-
it('should include devkit karma plugin by default', async () => {
61+
it('should not include devkit karma plugin by default', async () => {
6262
const tree = await runConfigSchematic(ConfigType.Karma);
6363
const karmaConf = tree.readText('projects/foo/karma.conf.js');
64-
expect(karmaConf).toContain(`'@angular-devkit/build-angular'`);
64+
expect(karmaConf).not.toContain(`'@angular-devkit/build-angular'`);
6565
});
6666

67-
it('should not include devkit karma plugin with angular/build:karma is used', async () => {
67+
it('should include devkit karma plugin when angular-devkit/build-angular:karma is used', async () => {
6868
applicationTree.overwrite(
6969
'angular.json',
7070
applicationTree
7171
.readText('angular.json')
72-
.replace('@angular-devkit/build-angular:karma', '@angular/build:karma'),
72+
.replace('@angular/build:karma', '@angular-devkit/build-angular:karma'),
7373
);
7474
const tree = await runConfigSchematic(ConfigType.Karma);
7575
const karmaConf = tree.readText('projects/foo/karma.conf.js');
76-
expect(karmaConf).not.toContain(`'@angular-devkit/build-angular'`);
76+
expect(karmaConf).toContain(`'@angular-devkit/build-angular'`);
7777
});
7878

7979
it('should set the right coverage folder', async () => {

packages/schematics/angular/library/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ function addDependenciesToPackageJson() {
5353
},
5454
{
5555
type: NodeDependencyType.Dev,
56-
name: '@angular-devkit/build-angular',
57-
version: latestVersions.DevkitBuildAngular,
56+
name: '@angular/build',
57+
version: latestVersions.AngularBuild,
5858
},
5959
{
6060
type: NodeDependencyType.Dev,
@@ -91,7 +91,7 @@ function addLibToWorkspaceFile(
9191
prefix: options.prefix,
9292
targets: {
9393
build: {
94-
builder: Builders.NgPackagr,
94+
builder: Builders.BuildNgPackagr,
9595
defaultConfiguration: 'production',
9696
options: {
9797
project: `${projectRoot}/ng-package.json`,
@@ -106,7 +106,7 @@ function addLibToWorkspaceFile(
106106
},
107107
},
108108
test: {
109-
builder: Builders.Karma,
109+
builder: Builders.BuildKarma,
110110
options: {
111111
tsConfig: `${projectRoot}/tsconfig.spec.json`,
112112
polyfills: ['zone.js', 'zone.js/testing'],

packages/schematics/angular/library/index_spec.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -388,9 +388,14 @@ describe('Library Schematic', () => {
388388
const tree = await schematicRunner.runSchematic('library', defaultOptions, workspaceTree);
389389

390390
const workspace = JSON.parse(tree.readContent('/angular.json'));
391-
expect(workspace.projects.foo.architect.build.builder).toBe(
392-
'@angular-devkit/build-angular:ng-packagr',
393-
);
391+
expect(workspace.projects.foo.architect.build.builder).toBe('@angular/build:ng-packagr');
392+
});
393+
394+
it(`should add 'karma' test builder`, async () => {
395+
const tree = await schematicRunner.runSchematic('library', defaultOptions, workspaceTree);
396+
397+
const workspace = JSON.parse(tree.readContent('/angular.json'));
398+
expect(workspace.projects.foo.architect.test.builder).toBe('@angular/build:karma');
394399
});
395400

396401
describe('standalone=false', () => {

tests/legacy-cli/e2e/initialize/500-create-project.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ export default async function () {
6060
tsconfig.compilerOptions.allowSyntheticDefaultImports = true;
6161
});
6262
}
63+
64+
// Always need `@angular-devkit/build-angular` due to the use of protractor
65+
await updateJsonFile('package.json', (packageJson) => {
66+
packageJson.devDependencies['@angular-devkit/build-angular'] =
67+
packageJson.devDependencies['@angular/build'];
68+
});
6369
}
6470

6571
await prepareProjectForE2e('test-project');

tests/legacy-cli/e2e/utils/project.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,6 @@ export async function useCIChrome(projectName: string, projectDir = ''): Promise
192192
const project = workspaceJson.projects[projectName];
193193
const appTargets = project.targets || project.architect;
194194
appTargets.test.options.browsers = 'ChromeHeadlessNoSandbox';
195-
appTargets.test.options.builderMode = getGlobalVariable('argv')['esbuild']
196-
? 'application'
197-
: 'browser';
198195
});
199196
}
200197

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy