From 5256699a61f66d1342fd732ab9d4357e26b19be4 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Tue, 6 Jul 2021 13:34:13 -0400 Subject: [PATCH] refactor(@ngtools/webpack): remove implicit dependency on `raw-loader` When JIT mode and `directTemplateLoading` were enabled, the plugin would reference the `raw-loader` dependency. This dependency was not mentioned in the `package.json` and is also now deprecated. An internal `direct-resource` loader is now used instead which removes the usage of the implicit dependency. --- .../webpack/src/loaders/direct-resource.ts | 13 +++++++++++++ .../src/transformers/replace_resources.ts | 6 +++++- .../transformers/replace_resources_spec.ts | 19 ++++++++++--------- 3 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 packages/ngtools/webpack/src/loaders/direct-resource.ts diff --git a/packages/ngtools/webpack/src/loaders/direct-resource.ts b/packages/ngtools/webpack/src/loaders/direct-resource.ts new file mode 100644 index 000000000000..b6f2a2cae111 --- /dev/null +++ b/packages/ngtools/webpack/src/loaders/direct-resource.ts @@ -0,0 +1,13 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export const DirectAngularResourceLoaderPath = __filename; + +export default function (content: string) { + return `export default ${JSON.stringify(content)};`; +} diff --git a/packages/ngtools/webpack/src/transformers/replace_resources.ts b/packages/ngtools/webpack/src/transformers/replace_resources.ts index 8d14cbdc8ea3..bc231be73a12 100644 --- a/packages/ngtools/webpack/src/transformers/replace_resources.ts +++ b/packages/ngtools/webpack/src/transformers/replace_resources.ts @@ -7,6 +7,7 @@ */ import * as ts from 'typescript'; +import { DirectAngularResourceLoaderPath } from '../loaders/direct-resource'; import { InlineAngularResourceLoaderPath } from '../loaders/inline-resource'; export function replaceResources( @@ -167,7 +168,10 @@ function visitComponentMetadata( return undefined; case 'templateUrl': - const url = getResourceUrl(node.initializer, directTemplateLoading ? '!raw-loader!' : ''); + const url = getResourceUrl( + node.initializer, + directTemplateLoading ? `!${DirectAngularResourceLoaderPath}!` : '', + ); if (!url) { return node; } diff --git a/packages/ngtools/webpack/src/transformers/replace_resources_spec.ts b/packages/ngtools/webpack/src/transformers/replace_resources_spec.ts index 1c340e2a69fd..9da2981eb064 100644 --- a/packages/ngtools/webpack/src/transformers/replace_resources_spec.ts +++ b/packages/ngtools/webpack/src/transformers/replace_resources_spec.ts @@ -8,6 +8,7 @@ import { tags } from '@angular-devkit/core'; import * as ts from 'typescript'; +import { DirectAngularResourceLoaderPath } from '../loaders/direct-resource'; import { replaceResources } from './replace_resources'; import { createTypescriptContext, transformTypescript } from './spec_helpers'; @@ -52,7 +53,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import __NG_CLI_RESOURCE__2 from "./app.component.2.css"; import { Component } from '@angular/core'; @@ -102,7 +103,7 @@ describe('@ngtools/webpack transformers', () => { AppComponent = tslib_1.__decorate([ core_1.Component({ selector: 'app-root', - template: require("!raw-loader!./app.component.html").default, + template: require("!${DirectAngularResourceLoaderPath}!./app.component.html").default, styles: [require("./app.component.css").default, require("./app.component.2.css").default] }) ], AppComponent); exports.AppComponent = AppComponent; `; @@ -166,7 +167,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.svg"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.svg"; import { Component } from '@angular/core'; let AppComponent = class AppComponent { constructor() { @@ -202,7 +203,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import { Component } from '@angular/core'; @@ -240,7 +241,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "data:text/css;charset=utf-8;base64,YSB7IGNvbG9yOiByZWQgfQ=="; import { Component } from '@angular/core'; @@ -284,7 +285,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = ` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import __NG_CLI_RESOURCE__2 from "./app.component.2.css"; @@ -323,7 +324,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import __NG_CLI_RESOURCE__2 from "./app.component.2.css"; import { Component as NgComponent } from '@angular/core'; @@ -366,7 +367,7 @@ describe('@ngtools/webpack transformers', () => { `; const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import __NG_CLI_RESOURCE__2 from "./app.component.2.css"; @@ -411,7 +412,7 @@ describe('@ngtools/webpack transformers', () => { const output = tags.stripIndent` import { __decorate } from "tslib"; - import __NG_CLI_RESOURCE__0 from "!raw-loader!./app.component.html"; + import __NG_CLI_RESOURCE__0 from "!${DirectAngularResourceLoaderPath}!./app.component.html"; import __NG_CLI_RESOURCE__1 from "./app.component.css"; import { Component } from '@angular/core';