Build error with `@daffodil/commerce` library on a new Angular app that uses CSS

[damienwebdev]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

Description

@benhalverson tried to install @daffodil/commerce and hit some kind of build error and gave up.

Environment

• Daffodil version: 0.90.0
• Angular version: 0.20.0

Steps to reproduce

Steps to reproduce:

1. npx @angular/cli@20 new my-project --style=css --routing=true
2. npx ng add @daffodil/commerce

Expected behavior

No errors.

Actual behavior

Errors.

Additional context

No response

[benhalverson]

I just tried again. Here's the log

npx @angular/cli@20 new test-app --style=css --routing=true
Need to install the following packages:
@angular/[email protected]
Ok to proceed? (y) y

✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
✔ Do you want to create a 'zoneless' application without zone.js? No
✔ Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai None
CREATE test-app/README.md (1471 bytes)
CREATE test-app/.editorconfig (314 bytes)
CREATE test-app/.gitignore (604 bytes)
CREATE test-app/angular.json (2402 bytes)
CREATE test-app/package.json (1133 bytes)
CREATE test-app/tsconfig.json (992 bytes)
CREATE test-app/tsconfig.app.json (429 bytes)
CREATE test-app/tsconfig.spec.json (434 bytes)
CREATE test-app/.vscode/extensions.json (130 bytes)
CREATE test-app/.vscode/launch.json (470 bytes)
CREATE test-app/.vscode/tasks.json (938 bytes)
CREATE test-app/src/main.ts (222 bytes)
CREATE test-app/src/index.html (293 bytes)
CREATE test-app/src/styles.css (80 bytes)
CREATE test-app/src/app/app.css (0 bytes)
CREATE test-app/src/app/app.spec.ts (666 bytes)
CREATE test-app/src/app/app.ts (290 bytes)
CREATE test-app/src/app/app.html (20122 bytes)
CREATE test-app/src/app/app.config.ts (400 bytes)
CREATE test-app/src/app/app.routes.ts (77 bytes)
CREATE test-app/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
(base) ben@DESKTOP-608HEGL:~/projects$ cd test-app/
(base) ben@DESKTOP-608HEGL:~/projects/test-app$
(base) ben@DESKTOP-608HEGL:~/projects/test-app$ npx ng add @daffodil/commerce
✔ Determining Package Manager
  › Using package manager: npm
✔ Searching for compatible package version
  › Found compatible package version: @daffodil/[email protected].
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
✔ Is this a new Angular project? Yes
✔ Which driver do you want to use? In-Memory (for testing)
CREATE src/app/daff/navigation/components/navigation.component.ts (8143 bytes)
CREATE src/app/daff/navigation/components/state/navigation.state.ts (1276 bytes)
CREATE src/app/daff/pages/home/home.component.ts (3072 bytes)
CREATE src/app/daff/pages/not-found/not-found.component.ts (4193 bytes)
CREATE src/app/daff/product/components/product-list/product-list.component.ts (7245 bytes)
CREATE src/app/daff/product/components/product-list/state/product-list.state.ts (1766 bytes)
CREATE src/app/daff/product/components/product-page/product-page.component.ts (6249 bytes)
CREATE src/app/daff/product/resolvers/product.resolver.ts (913 bytes)
UPDATE package.json (1396 bytes)
UPDATE src/app/app.config.ts (1161 bytes)
UPDATE src/app/app.routes.ts (731 bytes)
UPDATE src/app/app.html (781 bytes)
UPDATE src/app/app.ts (487 bytes)
✔ Packages installed successfully.
(base) ben@DESKTOP-608HEGL:~/projects/test-app$ npm start

> [email protected] start
> ng serve

Application bundle generation failed. [1.352 seconds] - 2025-11-26T07:12:35.670Z

▲ [WARNING] NG8113: RouterLink is not used within the template of HomeComponent [plugin angular-compiler]

    src/app/daff/pages/home/home.component.ts:12:34:
      12 │   imports: [ProductListComponent, RouterLink],
         ╵                                   ~~~~~~~~~~


▲ [WARNING] NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. [plugin angular-compiler]

    src/app/daff/product/components/product-page/product-page.component.ts:30:44:
      30 │ ...  [ngSrc]="product.thumbnail?.url || '/assets/placeholder-image...
         ╵                                  ~~~


✘ [ERROR] NG2008: Could not find stylesheet file './app.scss'. [plugin angular-compiler]

    src/app/app.ts:15:12:
      15 │   styleUrl: './app.scss',
         ╵             ~~~~~~~~~~~~


Watch mode enabled. Watching for file changes...

[benhalverson]

This was the easy part, I just changed the file from css to scss. The routing issue I mentioned was this was more annoying I went to localhost:4200 clicked a product and saw this error no code was changed.

installHook.js:1 ERROR ɵNotFound: NG0201: No provider found for `InjectionToken DaffExternalRouterDriver`. Find more at https://v20.angular.dev/errors/NG0201
    at createRuntimeError (root_effect_scheduler.mjs:924:19)
    at NullInjector.get (root_effect_scheduler.mjs:1494:27)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.get (root_effect_scheduler.mjs:2052:33)
    at R3Injector.retrieve (root_effect_scheduler.mjs:1936:25)
    at injectInjectorOnly (root_effect_scheduler.mjs:1049:39)
    at ɵɵinject (root_effect_scheduler.mjs:1061:42)
    at inject2 (root_effect_scheduler.mjs:1149:12)
    at daffodil-external-router-routing.mjs:113:12
    at router2.mjs:3622:114

[damienwebdev]

Partially fixed 1c0ea4b47afe872949e1d0a25fb31b81e560360c