Question

上周，我开始学习Angular + Webpack，我遵循了一些有关如何使用特定后端（Django）进行设置的指南。但是到目前为止，我什至无法启动Google Chrome控制台的最基本的Hello World示例，出现以下错误：Uncaught Error: Can't resolve all parameters for e: (?).

我知道这个问题已经问过几次了，但这是一个非常准系统的应用程序，我还没有添加服务或其他东西，只是简单的Hello World。我还使用bundle.js中定义的<fotoplatform>选择器将生成的app.component.ts包括在返回的html页面中。这是Chrome的控制台返回错误的地方。你们中有人可以帮助我吗？我将不胜感激！

谢谢！

我的（前端）项目结构如下：

--frontend/
  --node_modules/
  --src/
    --app/
      --app.component.ts
      --app.module.ts
    --main.ts
  --package.json
  --tsconfig.json
  --webpack.config.js

这是所有文件的所有内容：

package.json

{
  "name": "fotoplatform",
  "version": "0.0.1",
  "scripts": {
    "watch": "webpack"
  },
  "dependencies": {
    "@angular/animations": "~7.1.4",
    "@angular/common": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/compiler-cli": "~7.1.4",
    "@angular/core": "~7.1.4",
    "@angular/forms": "~7.1.4",
    "@angular/http": "~7.1.4",
    "@angular/platform-browser": "~7.1.4",
    "@angular/platform-browser-dynamic": "~7.1.4",
    "@angular/platform-server": "~7.1.4",
    "@angular/router": "~7.1.4",
    "@angular/upgrade": "~7.1.4",
    "core-js": "~2.5",
    "rxjs": "~6.3",
    "zone.js": "~0.8"
  },
  "devDependencies": {
    "@types/core-js": "~2.5.0",
    "@types/node": "~10.12.17",
    "typescript": "~3.1.1",
    "ts-loader": "~5.3.1",
    "webpack": "~4.28.0",
    "webpack-cli": "^3.1.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

webpack.config.js

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

module.exports = {
    entry: './src/main.ts',
    watch: true,
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../fotoplatform/static/dist')
    }
};

app.component.ts

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

@Component({
    selector: 'fotoplatform',
    template: '<h1>Hello world!</h1>',
})
export class AppComponent {

    constructor(){
        console.log("I am Angular!")
    }
}

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

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

Answer 1

作为Angular7 / 8的一部分您需要关注main.ts文件

import "core-js/features/reflect";

这是我的主文件的样子

import "core-js/features/reflect";
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { SomeModule } from "./launchpad/some-module.module";
// you can have more dependencies loaded here
enableProdMode();
platformBrowserDynamic().bootstrapModule(SomeModule);

Answer 2

最终设法解决了这个问题。通过禁用webpack uglifier，它给了我一个更具描述性的错误：Error: Can't resolve all parameters for ApplicationModule: (?).

然后我在StackOverflow上找到了对我有用的以下线程： Error: Can't resolve all parameters for ApplicationModule: (?)

因此，总而言之，我需要在main.ts的最重要的导入部分添加以下两行：

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

此后，我遇到了找不到选择器的错误，但是可以通过将bundle.js脚本加载移动到html主体下方来轻松解决。

Angular 7 + Webpack：未捕获错误：无法解析e：的所有参数（？）

package.json

tsconfig.json

webpack.config.js

app.component.ts

app.module.ts

2 个答案: