CODEWITHSUNDEEP
angularangularjsangular-hybrid
Y.Y.
Y.Y.

Reputation: 734

Can't bind to 'ngFor' since it isn't a known property of ... on hybrid AngularJS & Angular application

I have a hybird AngularJS and Angular application. I want to downgrade my Angular test.component but I keep getting the following error:

Can't bind to 'ngFor' since it isn't a known property of ...

Can't bind to 'ngModule' since it isn't a known property of ...

I already did the necessary imports in my main.ts like:

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

I still have the same error unfortunately. My app have the following parts;

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"
  }
}

main.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"]);
});

test.component

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() {}
}

Upvotes: 0

Views: 152

Answers (1)

Maximilian Both
Maximilian Both

Reputation: 191

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

Upvotes: 0

Related Questions