Angular 8 to 9 upgrade warnings when building

Viewed 584

I have an angular project that has multiple applications (app, dev, etc.) and I have recently upgraded it from Angular v8.2.3 to 9, and have now started to get many of the follwing warnings (about different components, this is just one example)

WARNING in {PATH_TO_PROJECT}\src\modules\dev\create-member\create-member.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

root ts config:

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowJs": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        // tslint bug isn't checking for no unused imports, their solution is to add this
        // https://github.com/Microsoft/vscode-tslint/issues/70#issuecomment-241041929
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ],
        "plugins": [
            {"name": "@angular/language-service"}
        ]
    }
}

/src tsconfig:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "baseUrl": "./",
      "module": "es2015",
      "types": []
    }
}

I did manage to get everything to work without these warnings by adding a separate tsconfig under each application with the following contents:

{
    "extends": "../../tsconfig.json",
    "files": [
        "./{APP_NAME}.main.ts",
        "../../polyfills.ts"
    ]
}

Everything seemed to be building just fine with ng build --project app but when I add the --prod flag, I get a bunch of template errors about components not being recognized E.g.

ERROR in src/modules/app/organizations/organization-data-budget-change/organization-data-budget-change.component.html:4:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
[1]
[1] 4 <form [formGroup]="DataBudgetChangeForm" class="card-body" novalidate>
[1]         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[1]
[1]   src/modules/app/organizations/organization-data-budget-change/organization-data-budget-change.component.ts:11:15
[1]     11  templateUrl: 'organization-data-budget-change.component.html'
[1]                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[1]     Error occurs in the template of component OrganizationDataBudgetChangeComponent.

Essentially i'm just trying to get rid of the warnings mentioned above, and i'm not sure if this is an angular issue or if my config is incorrect

UPDATE: It seems that with the tsconfig additions mentioned above, setting aot to false in my angular.json file causes everything to work normally (Not really a fix as I do still want to use aot going forward). Same thing for disabling ivy

1 Answers

I had a few errors after following the instructions on the upgrade page. So I deleted the node_modules, cleaned the npm cache and installed again.

These commands assume you are using npm.

rd /q /s node_modules (or equivalent command on your platform)
npm cache clean --force
npm install -g @angular/cli (optional if it already latest)
del package-lock.json (or equivalent command 
on your platform)
npm install
ng add @angular/localize (in case it was not already added)
npm install --save-dev @angular/cli
Related