2

I'm trying to migrate an Angular CLI app to Nx. My main goal is to turn my entire app into a big nx project and after that gradually split it into small remote apps and shared libs

A execute the command ng add @nrwl/workspace and it moves my application to the apps//src, created nx.json, created prettier config files... I think everything went well, however, my components into the apps folder don't find any file path.

I already have created a path into tsconfig.base.json, but components still can not find the file path. Is there any config that I missed?

tsconfig.base.json

 "paths": {
      "@bulk-components/*": [
        "apps/portal-alelo-auto/src/app/shared/components/bulk/*"
      ]

Component example app/portal-alelo-auto/src/app/quick-search/card-detail/reissue/reissue.component.ts

import { CustomerType } from 'src/app/shared/enum'; //
import { MessageModule } from '@bulk-components/shared/message/message.module';
Maurício Júnior
  • 140
  • 1
  • 7

1 Answers1

2

Your best bet will be to create a new workspace using the nx version compatible with the angular version you currently have.

First create two work spaces, one for you to use as reference, and one for you to use to migrate you project into.

replace "latest" with he intended version, and execute twice (When asked about 'preset', select angular)

npx create-nx-workspace@latest

this wil create one app in each workspace (more info in the official docs)

Install the cli for a better experience with nx:

npm install -g nx

Using as a base folder <workspace-base>/apps/<your app>/src i will call this base

  1. move the following files to the base folder overwriting the existing ones:
  • index.html
  • main.ts
  • styles.scss
  • favicon.ico (if yours is there)

  1. ignore all the other files from the base level

  2. copy all the remainder app folders into <workspace-base>/apps/<your app>/src/app

  3. add to <workspace-base>/package.json the libs your app uses (apart from angular dependencies).

  4. run npm i

now let us try to run your app with nx.

run

nx serve <your app>

There probably will be some imports to adjust in your app files, but nothing that a few replace all commands in your IDE of choice wouldn't fix.

Make sure you consult your reference workspace to verify if you changed too much on the nx base files (when you need to).

It is fairly hard to provide any more instructions than this, as each app has its peculiarities, but this is the path to glory!

The alternative to this manual migration to nx is to run the instructions from nx official documentation. To be honest, I was never successful just using the instructions there, and I have migrated quite a few angular projects to nx.

The Fabio
  • 5,369
  • 1
  • 25
  • 55
  • thanks for this.. just like you mentioned, i dont ever remember EVER that their official documentation worked on the first time – curiousBoy Apr 05 '23 at 17:53