Skip to content
This repository was archived by the owner on Apr 4, 2025. It is now read-only.

refactor(@angular-devkit/build-webpack): remove deploy URL option and CSS special cases #505

Closed
wants to merge 1 commit into from
Closed

refactor(@angular-devkit/build-webpack): remove deploy URL option and CSS special cases #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export interface BuildOptions {
vendorChunk?: boolean;
commonChunk?: boolean;
baseHref?: string;
deployUrl?: string;
verbose?: boolean;
progress?: boolean;
i18nFile?: string;
Expand Down
1 change: 0 additions & 1 deletion ...ages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
output: path.basename(buildOptions.index),
baseHref: buildOptions.baseHref,
entrypoints: generateEntryPoints(buildOptions),
deployUrl: buildOptions.deployUrl,
sri: buildOptions.subresourceIntegrity,
}),
]),
Expand Down
1 change: 0 additions & 1 deletion packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,6 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
entry: entryPoints,
output: {
path: path.resolve(root, buildOptions.outputPath as string),
publicPath: buildOptions.deployUrl,
filename: `[name]${hashFormat.chunk}.js`,
},
performance: {
Expand Down
24 changes: 0 additions & 24 deletions packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
const maximumInlineSize = 10;
// Determine hashing format.
const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
// Convert absolute resource URLs to account for base-href and deploy-url.
const baseHref = wco.buildOptions.baseHref || '';
const deployUrl = wco.buildOptions.deployUrl || '';

const postcssPluginCreator = function (loader: webpack.loader.LoaderContext) {
return [
Expand Down Expand Up @@ -117,24 +114,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
}
}),
postcssUrl([
{
// Only convert root relative URLs, which CSS-Loader won't process into require().
filter: ({ url }: PostcssUrlAsset) => url.startsWith('/') && !url.startsWith('//'),
url: ({ url }: PostcssUrlAsset) => {
if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
// If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${url}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
}
}
},
{
// TODO: inline .cur if not supporting IE (use browserslist to check)
filter: (asset: PostcssUrlAsset) => {
Expand All @@ -148,7 +127,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
{ url: 'rebase' },
]),
PostcssCliResources({
deployUrl: loader.loaders[loader.loaderIndex].options.ident == 'extracted' ? '' : deployUrl,
loader,
filename: `[name]${hashFormat.file}.[ext]`,
}),
Expand Down Expand Up @@ -229,7 +207,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
{
loader: 'postcss-loader',
options: {
ident: 'embedded',
plugins: postcssPluginCreator,
sourceMap: cssSourceMap
}
Expand All @@ -252,7 +229,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
{
loader: 'postcss-loader',
options: {
ident: buildOptions.extractCss ? 'extracted' : 'embedded',
plugins: postcssPluginCreator,
sourceMap: cssSourceMap
}
Expand Down
4 changes: 0 additions & 4 deletions packages/angular_devkit/build_angular/src/browser/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,6 @@
"type": "string",
"description": "Base url for the application being built."
},
"deployUrl": {
"type": "string",
"description": "URL where files will be deployed."
},
"verbose": {
"type": "boolean",
"description": "Adds more details to output logging.",
Expand Down
6 changes: 3 additions & 3 deletions packages/angular_devkit/build_angular/src/dev-server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,12 +378,12 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
let servePath = options.servePath;
if (!servePath && servePath !== '') {
const defaultServePath =
this._findDefaultServePath(browserOptions.baseHref, browserOptions.deployUrl);
this._findDefaultServePath(browserOptions.baseHref);
const showWarning = options.servePathDefaultWarning;
if (defaultServePath == null && showWarning) {
this.context.logger.warn(tags.oneLine`
WARNING: --deploy-url and/or --base-href contain
unsupported values for ng serve. Default serve path of '/' used.
WARNING: --base-href contains an
unsupported value for ng serve. Default serve path of '/' used.
Use --serve-path to override.
`);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/src/dev-server/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
},
"servePathDefaultWarning": {
"type": "boolean",
"description": "Show a warning when deploy-url/base-href use unsupported serve path values.",
"description": "Show a warning when base-href uses unsupported serve path values.",
"default": true
},
"optimization": {
Expand Down
54 changes: 0 additions & 54 deletions packages/angular_devkit/build_angular/test/browser/deploy-url_spec_large.ts
View file
Open in desktop

This file was deleted.

125 changes: 0 additions & 125 deletions packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,131 +391,6 @@ describe('Browser Builder styles', () => {
).subscribe(undefined, done.fail, done);
}, Timeout.Standard);

// TODO: consider making this a unit test in the url processing plugins.
it(`supports baseHref and deployUrl in resource urls`, (done) => {
// Use a large image for the relative ref so it cannot be inlined.
host.copyFile('src/spectrum.png', './src/assets/global-img-relative.png');
host.copyFile('src/spectrum.png', './src/assets/component-img-relative.png');
host.writeMultipleFiles({
'src/styles.css': `
h1 { background: url('/assets/global-img-absolute.svg'); }
h2 { background: url('./assets/global-img-relative.png'); }
`,
'src/app/app.component.css': `
h3 { background: url('/assets/component-img-absolute.svg'); }
h4 { background: url('../assets/component-img-relative.png'); }
`,
// Use a small SVG for the absolute image to help validate that it is being referenced,
// because it is so small it would be inlined usually.
'src/assets/global-img-absolute.svg': imgSvg,
'src/assets/component-img-absolute.svg': imgSvg,
});

const stylesBundle = 'dist/styles.css';
const mainBundle = 'dist/main.js';

// Check base paths are correctly generated.
runTargetSpec(host, browserTargetSpec, { aot: true, extractCss: true }).pipe(
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles).toContain(`url('/assets/global-img-absolute.svg')`);
expect(styles).toContain(`url('global-img-relative.png')`);
expect(main).toContain(`url('/assets/component-img-absolute.svg')`);
expect(main).toContain(`url('component-img-relative.png')`);
expect(host.scopedSync().exists(normalize('dist/global-img-absolute.svg')))
.toBe(false);
expect(host.scopedSync().exists(normalize('dist/global-img-relative.png')))
.toBe(true);
expect(host.scopedSync().exists(normalize('dist/component-img-absolute.svg')))
.toBe(false);
expect(host.scopedSync().exists(normalize('dist/component-img-relative.png')))
.toBe(true);
}),
// Check urls with deploy-url scheme are used as is.
concatMap(() => runTargetSpec(host, browserTargetSpec,
{ extractCss: true, baseHref: '/base/', deployUrl: 'http://deploy.url/' },
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles)
.toContain(`url('http://deploy.url/assets/global-img-absolute.svg')`);
expect(main)
.toContain(`url('http://deploy.url/assets/component-img-absolute.svg')`);
}),
// Check urls with base-href scheme are used as is (with deploy-url).
concatMap(() => runTargetSpec(host, browserTargetSpec,
{ extractCss: true, baseHref: 'http://base.url/', deployUrl: 'deploy/' },
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles)
.toContain(`url('http://base.url/deploy/assets/global-img-absolute.svg')`);
expect(main)
.toContain(`url('http://base.url/deploy/assets/component-img-absolute.svg')`);
}),
// Check urls with deploy-url and base-href scheme only use deploy-url.
concatMap(() => runTargetSpec(host, browserTargetSpec, {
extractCss: true,
baseHref: 'http://base.url/',
deployUrl: 'http://deploy.url/',
},
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles).toContain(`url('http://deploy.url/assets/global-img-absolute.svg')`);
expect(main).toContain(`url('http://deploy.url/assets/component-img-absolute.svg')`);
}),
// Check with schemeless base-href and deploy-url flags.
concatMap(() => runTargetSpec(host, browserTargetSpec,
{ extractCss: true, baseHref: '/base/', deployUrl: 'deploy/' },
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles).toContain(`url('/base/deploy/assets/global-img-absolute.svg')`);
expect(main).toContain(`url('/base/deploy/assets/component-img-absolute.svg')`);
}),
// Check with identical base-href and deploy-url flags.
concatMap(() => runTargetSpec(host, browserTargetSpec,
{ extractCss: true, baseHref: '/base/', deployUrl: '/base/' },
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles).toContain(`url('/base/assets/global-img-absolute.svg')`);
expect(main).toContain(`url('/base/assets/component-img-absolute.svg')`);
}),
// Check with only base-href flag.
concatMap(() => runTargetSpec(host, browserTargetSpec,
{ extractCss: true, baseHref: '/base/' },
)),
tap(() => {
const styles = virtualFs.fileBufferToString(
host.scopedSync().read(normalize(stylesBundle)),
);
const main = virtualFs.fileBufferToString(host.scopedSync().read(normalize(mainBundle)));
expect(styles).toContain(`url('/base/assets/global-img-absolute.svg')`);
expect(main).toContain(`url('/base/assets/component-img-absolute.svg')`);
}),
).subscribe(undefined, done.fail, done);
}, 90000);

it(`supports bootstrap@4`, (done) => {
const overrides = {
extractCss: true,
Expand Down