PHP-loader 错误：找不到模块“。”答案

【问题标题】：PHP-loader error: Cannot find module "."PHP-loader 错误：找不到模块“。”
【发布时间】：2018-06-06 18:53:54
【问题描述】：

我正在尝试调用 PHP 文件而不是 HTML 文件作为 Angular 组件的 templateUrl。

...
@Component({
  selector: 'app-register-form',
  templateUrl: require('php-loader?./register-form.component.php'),
  styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {

...

当我运行ng serve 时，它会抛出以下警告：

    WARNING in ./app/register-form/register-form.component.ts
40:18-78 Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/webpack/lib/Compilation.js:701:24)
    at Compilation.finish (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/webpack/lib/Compilation.js:559:9)
    at applyPluginsParallel.err (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/webpack/lib/Compiler.js:506:17)
    at /Users/pranav/Desktop/angular-first-project/IATutors/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/pranav/Desktop/angular-first-project/IATutors/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/pranav/Desktop/angular-first-project/IATutors/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:672:20)
    at tryOnImmediate (timers.js:645:5)

本以为无所谓，打开localhost:4200，却发现一个空页面。我打开控制台，上面写着：

Uncaught Error: Cannot find module "."
    at webpackMissingModule (register-form.component.ts:18)
    at Object.../../../../../src/app/register-form/register-form.component.ts (register-form.component.ts:18)
    at __webpack_require__ (bootstrap cb79a8cbd66e1ab28853:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:8)
    at __webpack_require__ (bootstrap cb79a8cbd66e1ab28853:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap cb79a8cbd66e1ab28853:54)
    at Object.0 (main.bundle.js:1242)
    at __webpack_require__ (bootstrap cb79a8cbd66e1ab28853:54)
    at webpackJsonpCallback (bootstrap cb79a8cbd66e1ab28853:25)

这可能是我的webpack.config.js 的问题，我不确定我的格式是否正确：

module.exports = {
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: [
                    "pug-loader?self",
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ],
        loaders: [
            {
                test: /\.php$/,
                loaders: [
                    "html-minify",
                    "php-loader"
                ]
            }
        ]
    }
};

我不确定错误试图告诉我什么。为什么要寻找模块“。”？我应该怎么做才能解决这个问题？

【问题讨论】：

标签： angular npm angular-cli node-modules

【解决方案1】：

在这种情况下，php 作为模板并没有真正的好处。异常表示您的应用程序无法识别 php-load 插件，因为该应用程序需要 ts 文件在 php 之前。我假设正在构建发行版的脚本没有完全配置为 php 模板。请检查您的 dist 文件夹中是否有从 php one 生成的 ts 模板文件或检查 php-loader 的集成。

【讨论】：

ng serve 不会创建 dist 文件夹，除非您在谈论不同的文件夹。我尝试使用 PHP 作为模板的原因是因为我想检查输入到表单中的值是否已经在数据库中，并相应地更新页面并阻止表单提交。
您是否尝试过以这种方式加载您的php模板：templateUrl: require('php!./register-form.component.php')？
是的，它会抛出一个错误，指出 parseQuery 必须以 ? 开头
这很有趣，因为根据文档php-loader page，它必须用作php!./file.php。此外，webpack 文档也说同样的here。也许你的 webpack 配置文件有问题？尝试使用php! 并在配置中在test 和loaders 中添加query:''。像这样：{ test: /\.php$/, query: '', loaders: [ "html-minify", "php-loader" ] }