javascript - 如何找出缺失的依赖项？

Question

./src/app/story-upload/story-upload.ts
17:18-46 Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/dependencies/CommonJsRequireContextDependency.js:27:4)
    at Compilation.reportDependencyErrorsAndWarnings (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:512:17)
    at /home/themadhatter/sites/brandyd2-explore/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (/home/themadhatter/sites/brandyd2-explore/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

上面的错误是我在我的非常基本的 Angular 应用程序中添加我的 story-upload 组件后显示的内容，该应用程序是我从 angular-cli (最新版本)生成的。我已经在其中包含了 WebPack，并且我认为 webpack 需要一些我缺少的依赖项。

我需要知道缺少什么依赖项，但我似乎无法从这个错误中找出它。如何确定特定组件需要哪些依赖项？

这是app/story-upload/story-upload.ts

import { Component } from '@angular/core';
var storyUploadTemplate = "./story-upload.html";
@Component({
  selector: 'story-upload',
  templateUrl: storyUploadTemplate
})
export class StoryUpload {}

这是app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { StoryUpload } from './story-upload';

@NgModule({
  declarations: [
    AppComponent,
    StoryUpload
  ],
  imports: [
    BrowserModule, FormsModule, HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

.. 和我的 webpack.config.js:

var path = require('path');
var webpack = require('webpack');

var config = {
  cache: true,
  devtool: 'source-map',
  entry: {
    polyfills: './src/polyfills',
    vendor:    './src/vendor',
    main:      './src/main'
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    loaders: [
      { test: /\.ts$/,   loader: 'awesome-typescript-loader' },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html/,  loader: 'raw-loader' },
      { test: /\.css$/,  loader: 'to-string-loader!css-loader' },
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: ['polyfills', 'vendor', 'main'].reverse(), minChunks: Infinity }),
  ],

  resolve: {
    extensions: ['', '.ts', '.js', '.json'],
    modulesDirectories: ['node_modules']
  },

  devServer: {
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 }
  },

  node: {
    global: true,
    process: true,
    Buffer: false,
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false,
    clearTimeout: true,
    setTimeout: true
  }
};
module.exports = config;

Answer 1

在 templateUrl 处使用变量 storyUploadTemplate，而不是字符串 "./story-upload.html" 可能是导致错误的原因

@Component({
  selector: 'story-upload',
  templateUrl: storyUploadTemplate
})