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-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.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
})

如何找出缺少的依赖项？

1 个答案: