diff --git a/packages/angular/src/generators/remote/remote.ts b/packages/angular/src/generators/remote/remote.ts index 5c5b42cdd6..7ded7fd742 100644 --- a/packages/angular/src/generators/remote/remote.ts +++ b/packages/angular/src/generators/remote/remote.ts @@ -1,9 +1,7 @@ import { formatFiles, getProjects, - joinPathFragments, readProjectConfiguration, - readWorkspaceConfiguration, Tree, } from '@nrwl/devkit'; import type { Schema } from './schema'; @@ -62,8 +60,6 @@ export async function remote(tree: Tree, options: Schema) { standalone: options.standalone, }); - removeDeadCode(tree, options); - if (!options.skipFormat) { await formatFiles(tree); } @@ -71,86 +67,4 @@ export async function remote(tree: Tree, options: Schema) { return installTask; } -function removeDeadCode(tree: Tree, options: Schema) { - const projectName = normalizeProjectName(options.name, options.directory); - const project = readProjectConfiguration(tree, projectName); - - ['css', 'less', 'scss', 'sass'].forEach((style) => { - const pathToComponentStyle = joinPathFragments( - project.sourceRoot, - `app/app.component.${style}` - ); - if (tree.exists(pathToComponentStyle)) { - tree.delete(pathToComponentStyle); - } - }); - - tree.rename( - joinPathFragments(project.sourceRoot, 'app/nx-welcome.component.ts'), - joinPathFragments( - project.sourceRoot, - 'app/remote-entry/nx-welcome.component.ts' - ) - ); - tree.delete( - joinPathFragments(project.sourceRoot, 'app/app.component.spec.ts') - ); - tree.delete(joinPathFragments(project.sourceRoot, 'app/app.component.html')); - - const pathToAppComponent = joinPathFragments( - project.sourceRoot, - 'app/app.component.ts' - ); - if (!options.standalone) { - const component = - tree - .read(pathToAppComponent, 'utf-8') - .split(options.inlineTemplate ? 'template' : 'templateUrl')[0] + - `template: '' - -}) -export class AppComponent {}`; - - tree.write(pathToAppComponent, component); - - tree.write( - joinPathFragments(project.sourceRoot, 'app/app.module.ts'), - `import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - RouterModule.forRoot([{ - path: '', - loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule) - }], { initialNavigation: 'enabledBlocking' }), - ], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {}` - ); - } else { - tree.delete(pathToAppComponent); - - const prefix = options.prefix ?? readWorkspaceConfiguration(tree).npmScope; - const remoteEntrySelector = `${prefix}-${projectName}-entry`; - - const pathToIndexHtml = project.targets.build.options.index; - const indexContents = tree.read(pathToIndexHtml, 'utf-8'); - - const rootSelectorRegex = new RegExp(`${prefix}-root`, 'ig'); - const newIndexContents = indexContents.replace( - rootSelectorRegex, - remoteEntrySelector - ); - - tree.write(pathToIndexHtml, newIndexContents); - } -} - export default remote; diff --git a/packages/angular/src/generators/setup-mf/lib/index.ts b/packages/angular/src/generators/setup-mf/lib/index.ts index 8eaeca0fa6..efcb4b37a3 100644 --- a/packages/angular/src/generators/setup-mf/lib/index.ts +++ b/packages/angular/src/generators/setup-mf/lib/index.ts @@ -9,3 +9,4 @@ export * from './set-tsconfig-target'; export * from './setup-host-if-dynamic'; export * from './setup-serve-target'; export * from './update-host-app-routes'; +export * from './remove-dead-code-from-remote'; diff --git a/packages/angular/src/generators/setup-mf/lib/remove-dead-code-from-remote.ts b/packages/angular/src/generators/setup-mf/lib/remove-dead-code-from-remote.ts new file mode 100644 index 0000000000..9292846f04 --- /dev/null +++ b/packages/angular/src/generators/setup-mf/lib/remove-dead-code-from-remote.ts @@ -0,0 +1,92 @@ +import { Tree } from 'nx/src/generators/tree'; +import { Schema } from '../schema'; +import { + readProjectConfiguration, + readWorkspaceConfiguration, +} from 'nx/src/generators/utils/project-configuration'; +import { joinPathFragments } from 'nx/src/utils/path'; + +export function removeDeadCodeFromRemote(tree: Tree, options: Schema) { + const projectName = options.appName; + const project = readProjectConfiguration(tree, projectName); + + ['css', 'less', 'scss', 'sass'].forEach((style) => { + const pathToComponentStyle = joinPathFragments( + project.sourceRoot, + `app/app.component.${style}` + ); + if (tree.exists(pathToComponentStyle)) { + tree.delete(pathToComponentStyle); + } + }); + + tree.rename( + joinPathFragments(project.sourceRoot, 'app/nx-welcome.component.ts'), + joinPathFragments( + project.sourceRoot, + 'app/remote-entry/nx-welcome.component.ts' + ) + ); + tree.delete( + joinPathFragments(project.sourceRoot, 'app/app.component.spec.ts') + ); + tree.delete(joinPathFragments(project.sourceRoot, 'app/app.component.html')); + + const pathToAppComponent = joinPathFragments( + project.sourceRoot, + 'app/app.component.ts' + ); + if (!options.standalone) { + const componentContents = tree.read(pathToAppComponent, 'utf-8'); + const isInlineTemplate = !componentContents.includes('templateUrl'); + + const component = + componentContents.split( + isInlineTemplate ? 'template' : 'templateUrl' + )[0] + + `template: '' + +}) +export class AppComponent {}`; + + tree.write(pathToAppComponent, component); + + tree.write( + joinPathFragments(project.sourceRoot, 'app/app.module.ts'), + `import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + RouterModule.forRoot([{ + path: '', + loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule) + }], { initialNavigation: 'enabledBlocking' }), + ], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {}` + ); + } else { + tree.delete(pathToAppComponent); + + const prefix = options.prefix ?? readWorkspaceConfiguration(tree).npmScope; + const remoteEntrySelector = `${prefix}-${projectName}-entry`; + + const pathToIndexHtml = project.targets.build.options.index; + const indexContents = tree.read(pathToIndexHtml, 'utf-8'); + + const rootSelectorRegex = new RegExp(`${prefix}-root`, 'ig'); + const newIndexContents = indexContents.replace( + rootSelectorRegex, + remoteEntrySelector + ); + + tree.write(pathToIndexHtml, newIndexContents); + } +} diff --git a/packages/angular/src/generators/setup-mf/setup-mf.ts b/packages/angular/src/generators/setup-mf/setup-mf.ts index cdcd24dbcb..f0b6158a56 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.ts @@ -10,6 +10,7 @@ import { fixBootstrap, generateWebpackConfig, getRemotesWithPorts, + removeDeadCodeFromRemote, setupHostIfDynamic, setupServeTarget, updateHostAppRoutes, @@ -29,6 +30,7 @@ export async function setupMf(tree: Tree, options: Schema) { if (options.mfType === 'remote') { addRemoteToHost(tree, options); addRemoteEntry(tree, options, projectConfig.root); + removeDeadCodeFromRemote(tree, options); } const remotesWithPorts = getRemotesWithPorts(tree, options);