Private/Angular/Setup/Edit-WebProjectForAngular.ps1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<############################################################################
 # 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" ''


}