Private/Angular/Setup/Edit-WebProjectForAngular.ps1
|
<############################################################################ # Given a valid ASP DotNet Core website, install angular to a folder # called "angular" in the project. Install all the node packages # (npm install). # # Make directories # .../angular/src/app/model # .../angular/src/app/component # .../angular/src/app/service # .../angular/src/app/model # # Tell angular to compile to ../wwwroot (ASP DotNet Core web dir) not dist # # I want all my components in component folder, so move # .../angular/src/app/app.component.* to .../angular/src/app/component/app.component.* ############################################################################> Function Edit-WebProjectForAngularPrivate([SolnInfo] $solnInfo, [WebCsprojInfo] $webCsprojInfo) { # Rename Microsoft's "ClientApp/components" to my "ClientApp/component" with no "s" if($webCsprojInfo.angularStyle -eq 'ANGULAR_IO') { Write-Host "### Use angular-cli to scaffold app" try { Push-Location Set-Location $webCsprojInfo.csprojDir &{ng new $solnInfo.nickName} Write-Host "### Rename angular dir to 'angular'" Rename-Item "$($webCsprojInfo.csprojDir)\$($solnInfo.nickName)" "angular" Confirm-LastExitCode } finally { Pop-Location } } elseif($webCsprojInfo.angularStyle -eq 'MICROSOFT') { if(Test-Path "$($webCsprojInfo.angularComponentDir)s") { Write-Host "### Updating angular 'components' directory to 'component'" Rename-Item "$($webCsprojInfo.angularComponentDir)s" $webCsprojInfo.angularComponentDir # Update all references in appModule*.ts files Write-Host "### Updating references of 'components' to 'component' in $($webCsprojInfo.angularDir)\app\app.module.*.ts" (Get-Content -raw "$($webCsprojInfo.angularAppDir)\app.module.browser.ts") -replace "/components/","/component/" | Out-FileUtf8NoBom "$($webCsprojInfo.angularAppDir)\app.module.browser.ts" (Get-Content -raw "$($webCsprojInfo.angularAppDir)\app.module.server.ts") -replace "/components/","/component/" | Out-FileUtf8NoBom "$($webCsprojInfo.angularAppDir)\app.module.server.ts" (Get-Content -raw "$($webCsprojInfo.angularAppDir)\app.module.shared.ts") -replace "/components/","/component/" | Out-FileUtf8NoBom "$($webCsprojInfo.angularAppDir)\app.module.shared.ts" } } # Make folders if(-not (Test-Path $webCsprojInfo.angularServiceDir)) { Write-Host "### Making angular 'service' directory " New-Item $webCsprojInfo.angularServiceDir -type directory } if(-not (Test-Path $webCsprojInfo.angularComponentDir)) { Write-Host "### Making angular 'component' directory " New-Item $webCsprojInfo.angularComponentDir -type directory } Write-Host "### Add angular include for reactive forms" Edit-NgModuleAddImport $webCsprojInfo "ReactiveFormsModule" "@angular/forms" if($webCsprojInfo.angularStyle -eq 'ANGULAR_IO') { Write-Host "### Add angular include for forms" Edit-NgModuleAddImport $webCsprojInfo "FormsModule" "@angular/forms" Write-Host "### Add angular include for http" Edit-NgModuleAddImport $webCsprojInfo "HttpModule" "@angular/http" # Write-Host "### Update .angular-cli.json to compile output to ../wwwroot for C# Web Api instead of ./dist" ReplacePatternInFile "$($webCsprojInfo.angularDir)\.angular-cli.json" ' "outDir": "dist",' ' "outDir": "../wwwroot",' Write-Host "### Move app.component to component folder" # Move .../angular/app.component/* to .../angular/component/app.component.* just # because that's where I want to park all the components Copy-Item "$($webCsprojInfo.angularAppDir)\app.component.*" "$($webCsprojInfo.angularAppDir)\component\" Remove-Item "$($webCsprojInfo.angularAppDir)\app.component.*" (Get-Content "$($webCsprojInfo.angularAppDir)\app.module.ts" ).replace("'./app.component'","'./component/app.component'") | Set-Content "$($webCsprojInfo.angularAppDir)\app.module.ts" # Replace contents of app.component.html New-NgAppComponentHtmlToString | Out-FileUtf8NoBom "$($webCsprojInfo.angularComponentDir)\app.component.html" } # Create AppSettings files New-AppSettings $solnInfo $solnInfo.webCsprojInfo $solnInfo.dbInfo # npm libraries Install-NodeModule $webCsprojInfo "angular2-moment" "MomentModule" "angular2-moment" "MomentModule" Install-NodeModule $webCsprojInfo "angular-moment-timezone" "MomentTimezoneModule" "angular-moment-timezone" "MomentTimezoneModule" Install-NodeModule $webCsprojInfo "box-turtle-ng" "BoxTurtleNgModule" "box-turtle-ng" "BoxTurtleNgModule" # I don't understand the difference between importing BoxTurtleNgModule and a service within, just do both Write-Host "### Add explicit import for ValidationHelperService" Edit-NgModuleAddService $webCsprojInfo "ValidationHelperService" "box-turtle-ng" Write-Host "### Add StringService for globals" New-NgStringService $solnInfo if($webCsprojInfo.angularStyle -eq 'ANGULAR_IO') { Write-Host "### Adding standard app-routing.module.ts" New-NgAppRoutingModuleTsToString | Out-FileUtf8NoBom $webCsprojInfo.appRoutingFile Edit-NgModuleAddImport $webCsprojInfo "AppRoutingModule" "./app-routing.module" Write-Host "### Adding bootstrap support" Edit-AngularAddBootstrap $webCsprojInfo } # Add dashboard page app.component New-NgDashboardComponentTsToString | Set-Content "$($webCsprojInfo.angularComponentDir)\dashboard.component.ts" New-NgDashboardComponentHtmlToString | Set-Content "$($webCsprojInfo.angularComponentDir)\dashboard.component.html" New-NgDashboardComponentCssToString | Set-Content "$($webCsprojInfo.angularComponentDir)\dashboard.component.css" Edit-NgModuleAddComponent $webCsprojInfo "DashboardComponent" "./component/dashboard.component" Edit-NgModuleAddRoute $webCsprojInfo "DashboardComponent" "./component/dashboard.component" '' } |