Migration to angular version 11@latest

[paulbuechner]

Problem Description

After doing the migration steps for the @latest release of Angular framework (v11), some additionally steps are required to get the app running correctly.

• Support for postcss-loader@4.2.0 - Syntax applied 787f3a2 4a571f4

I did some research by myself and created a fork on which migration steps/changes can be viewed on: migration-branch

Support for postcss-loader@4.2.0

Solving issues regarding the postcss-loader dependency there is an option to ignore the failing compilation by modifying the tsconfig.json as follows:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    "enableIvy": false,
    ...
  }
}

After this is done we get the following error:

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

Starting the development server now gives no more errors, but the css/scss files aren't beeing included! graphic

Fixing Syntax postcss-loader-changelog postcss-loader-syntax

Now given the new syntax which it seems has to be applied, we can migrate postcss-loader dependency to the latest version, also requiring to install the latest version of postcss. Small syntax adjustments regarding the extra-webpack.config.js where applied 787f3a2.

[paulbuechner]

Adressing compilation issues - Fix

Relating to @kmaraz in just-jeb/angular-builders#842 (comment) the compilation issues got resolved.

• Ivy compilation for extra-webpack.config.js (hashed build) added 24caeb5
• Ivy compilation for extra-webpack-plain.config.js (plainbuild) added 44d013e

Hi, just an update for those who found this after Angular 11.1.0 release:
You will probably need to use AngularWebpackPlugin instead of AngularCompilerPlugin.

For example in my case it looks like this:

import { AngularWebpackPlugin } from '@ngtools/webpack/src/ivy/plugin';
  ...
  const index = config.plugins?.findIndex((p) => {
    return p instanceof AngularWebpackPlugin;
  });
  if (index) {
    // @ts-expect-error pluginOptions is a private property
    const oldOptions = config.plugins?.[index].pluginOptions;
    oldOptions.directTemplateLoading = false;
    config.plugins?.splice(index);
    config.plugins?.push(new AngularWebpackPlugin(oldOptions));
  }

[mjheller]

Hi. Enjoyed the tutorial. The scss.json files arent auto generated in Angular 11, if delete the files that were generated in prior versions it gives the error

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error: Module build failed (from ./node_modules/posthtml-loader/lib/index.js):
PostHTML Loader:

ENOENT: no such file or directory, lstat '..\angular-css-modules\src\app/app.component.scss.json'

[paulbuechner]

Hi @mjheller,

I was able to reproduce this issue! As you can see we are currently busy working on a stable release for angular 11.

If you don't mind check out the latest releases here.

The actual problem is the compilation process... it seems like ivy wants to compile before the scss.json file is even generated. A fix may be disabling ahead of time compilation...?

Anyway, for now, it just works by restarting the build/compile process because the scss.json will be generated despite the error.

[Parovka]

Hi, first of all thank you for this repo, great work!

Unfortunate I stumbled on the same problem, and I was wondering if this could be fixed and when we can expect it. I understand that this is not a commercial project, and you need some free spare time. But just wondering :)

As I understand it correctly you have 2 workaround options, but...
Because I'm working for a client on a project which used Angular Elements, and it needs the ivy compiler for a smaller bundle size, the site speed is highly important for us.
Also we use a build pipeline, building him twice isn't the best option either.
So I'm hoping if the problem could be fully solved without a workaround, that would be great!

[paulbuechner]

Hi @Parovka,

there are currently no other additions/improvements planned.... however, we have a PR in the pipeline which is going to fix some issues, but needs some more love... As we both are currently very busy we would really appreciate any help addressing the existing issues.