无法绑定到“ngFor”，因为它不是...在混合 AngularJS 和 Angular 应用程序上的已知属性

Question

我有一个 hybird AngularJS 和 Angular 应用程序。 我想降级我的 Angular test.component 但我不断收到以下错误：

无法绑定到“ngFor”，因为它不是...的已知属性

无法绑定到“ngModule”，因为它不是...的已知属性

我已经在我的 main.ts 中做了必要的导入，比如：

import { BrowserModule, FormsModule } from '@angular/common';
..
..
@NgModule({
  imports: [ BrowserModule, FormsModule ],
  ..
})

不幸的是，我仍然有同样的错误。 我的应用程序有以下部分；

index.html

<!doctype html>
<html lang="nl">
    <head>
        <title>test</title>
        <script type="text/javascript" src="dist/bundle.js"></script>
    </head>
    <body>
        <test></test>
        test...
    </body>
</html>

package.json

{
  "name": "repro",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "buildDev": "rimraf ./dist && webpack --bail --progress --profile --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.0",
    "@angular/cli": "^13.0.0",
    "@angular/compiler-cli": "^13.0.0",
    "expose-loader": "^3.0.0",
    "rimraf": "^3.0.2",
    "ts-loader": "^9.2.5",
    "typescript": "~4.5.0",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/upgrade": "^13.0.0",
    "angular": "^1.8.2",
    "core-js": "^3.21.0",
    "jquery": "^3.5.1",
    "rxjs": "^7.5.5",
    "zone.js": "~0.11.4"
  }
}

主.ts

import 'zone.js/dist/zone';

import { FormsModule } from "@angular/forms";
import { NgModule, StaticProvider } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { downgradeComponent, downgradeModule, setAngularJSGlobal } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import * as angular from "angular";
import { TestComponent } from "./test.component";

setAngularJSGlobal(angular);
angular.module("testApp", []);

@NgModule({
    imports: [BrowserModule, FormsModule],
    providers: [],
    declarations: [TestComponent],
    entryComponents: [TestComponent]
})
export class AppModule {
    // Override Angular bootstrap so it doesn't do anything
    ngDoBootstrap() { }
}

const ng2BootstrapFn = (extraProviders: StaticProvider[]) => {
    return platformBrowserDynamic(extraProviders)
        .bootstrapModule(AppModule);
};

export const downgradedModule = downgradeModule(ng2BootstrapFn);

angular.module("parentModule", [downgradedModule]);

angular.module("parentModule")
    .directive("test", downgradeComponent({ component: TestComponent }));

angular.element(document).ready(function () {
    angular.bootstrap(document.body, ["parentModule"]);
});

测试组件

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

@Component({
    selector: "test",
    template: `
        <div *ngFor="let x of ['test1','test2']">{{x}}</div>
        <input [(ngModel)]="input"/>
    `,
})

export class TestComponent {
    public input="test";
    constructor() {}
}

Answer 1

I believe you should use the angular2+ module name here:

angular.module("parentModule")
    .directive("test", downgradeComponent({ component: TestComponent }));

instead of the parentModule which I assume is the angular.js module.
Anyway here is a working example of a hybrid Angular.js/Angular2+ app.
https://github.com/maximilian27/angularjs-angular9-hybrid-app

无法绑定到“ngFor”，因为它不是...在混合 AngularJS 和 Angular 应用程序上的已知属性

问题描述

1 个解决方案

解决方案1
0 2022-03-15 15:39:40

无法绑定到“ngFor”，因为它不是...在混合 AngularJS 和 Angular 应用程序上的已知属性

问题描述

1 个解决方案

解决方案1 0 2022-03-15 15:39:40

解决方案1
0 2022-03-15 15:39:40