Rails 6，Angular 11 无法解析组件的所有参数：（？）答案

【问题标题】：Rails 6, Angular 11 Can't resolve all parameters for Component: (?)Rails 6，Angular 11 无法解析组件的所有参数：（？）
【发布时间】：2021-04-22 13:08:15
【问题描述】：

我正在尝试使用 rails 6 和 angular 11 启动新应用

我创建了我的应用程序：

rails new my_app

rails webpacker:install:angular

yarn add html-loader

我启动了应用程序并得到了“Hello Angular” 但是当我尝试将一个模块包含到我的组件中时，我在浏览器中得到一个错误：

Uncaught Error: Can't resolve all parameters for AppComponent: (?).

我没有忘记在组件中导入模块

import { HttpClient } from "@angular/common/http";

import {Component} from "@angular/core";
import template from './app.component.html'

@Component({
  selector: 'app-dashboard',
  template: template
})
export class AppComponent {
  name = 'Angular!';

  constructor(private http: HttpClient) {}

  ngOnInit () {
    const self = this;

    // self.http.get('/api/v1/dashboard').subscribe(
    //     (response) => { console.log(response) },
    //     (error) => { console.log(error) }
    // )

  }
}

在模块中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";

import { AppComponent } from './app.component';

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

我在 polyfills.ts 中导入了反射元数据

import 'core-js/es/reflect';
import 'core-js/proposals/reflect-metadata';

在 tsconfig.json 中将 emitDecoratorMetadata 设置为 true

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
        "*": ["node_modules/*", "app/javascript/*"]
    },
    "sourceMap": true,
    "target": "es5",
    "noEmit": true
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

我的 package.json 是

{
  "name": "gardening",
  "private": true,
  "dependencies": {
    "@angular/common": "^11.0.9",
    "@angular/compiler": "^11.0.9",
    "@angular/core": "^11.0.9",
    "@angular/platform-browser": "^11.0.9",
    "@angular/platform-browser-dynamic": "^11.0.9",
    "@babel/preset-typescript": "^7.12.7",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "html-loader": "^1.3.2",
    "rxjs": "^6.6.3",
    "turbolinks": "^5.2.0",
    "typescript": "^4.1.3",
    "zone.js": "^0.11.3"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "webpack-dev-server": "^3.11.2"
  }
}

我做错了什么？提前致谢。

【问题讨论】：

标签： ruby-on-rails angular typescript webpack

【解决方案1】：

我遇到了同样的事情，发现这很有帮助：https://githubmemory.com/repo/rails/webpacker/issues/3102

结合这个：https://stackoverflow.com/a/68806961/579018

TL;DR 使用"ts-loader": "^8.2.0"

【讨论】：