Hi guys,
I'm trying to setup a CI setup for the angular app. But i'm not sure how to do it correctly. I tried something but got this error on "npm install":
2018-02-14T09:58:22.3947388Z [command]C:\Program Files\nodejs\npm.cmd install --force
2018-02-14T09:58:23.1148738Z npm WARN using --force I sure hope you know what you are doing.
2018-02-14T09:59:04.0232802Z npm WARN deprecated [email protected]: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
2018-02-14T09:59:22.7598061Z npm ERR! code EINTEGRITY
2018-02-14T09:59:22.7609655Z npm ERR! sha1-0sMepJKyK2qNiHrqFZiaI4/AhK4= integrity checksum failed when using sha1: wanted sha1-0sMepJKyK2qNiHrqFZiaI4/AhK4= but got sha1-s+4q3E2tVI1K6ZiZT1rIAtx1O4Y=. (16980 bytes)
2018-02-14T10:00:16.2216749Z
2018-02-14T10:00:16.2217856Z npm ERR! A complete log of this run can be found in:
2018-02-14T10:00:16.2218157Z npm ERR! C:\npm\cache\_logs\2018-02-14T09_59_22_783Z-debug.log
2018-02-14T10:00:16.3425967Z ##[error]npm failed with error: C:\Program Files\nodejs\npm.cmd failed with return code: 1
2018-02-14T10:00:16.3455803Z ##[section]Finishing: npm install
17 Answer(s)
-
0
You shouldn't be running npm install at all, yarn replaces that step.
Here is an example of our build process (note that we use teamcity + octopus):
Run Yarn Run Gulp Restore packages (Nuget) Build project (dotnet build) Run unit tests (MSTest on our own library (we don't test the x-unit tests included in the project in our CI)) Publish MVC Project (dotnet publish) Publish Migrator Project (dotnet publish) OctopusDeploy Push packages
Then in our environment builds configurations, we add: OctopusDeploy Create Release OctopusDeploy Deploy Release
Our octopus is configured to deploy to an Azure Web App, and the migrator is deployed with the web project to azure. A step in octopus executes the migrator directly from the azure web app.
-
0
thx for the info. I only need to build and deploy the angular solution. I am using Yarn indeed, but dont I need "ng build -prod" to create the "dist" folder?
-
0
@Kythor, you are right "ng build --prod" is required. Can you write the commands you run for your CI deploy ?
Does "ng build --prod" works when you run it in the command prompt ?
I also suggest you to remove "node_modules" folder and then try again with "yarn".
-
0
Just to be clear, I'm using VSTS with a build definition just for the Angular App and associated code.
These are the steps I have now
- Use Yarn 1.x
- Yarn
- npm => this is where I try to run the command "ng build -prod" but doesn't work because it cannot find the script "ng" I have tried a lot of other combinations here, but I can't find the right one. Do I even need to use npm?
- Azure App Service Deploy => $(System.DefaultWorkingDirectory)/dist
I do not have a node_module in my master branch code.
-
0
Now I found this: <a class="postlink" href="https://stapp.space/run-angular-cli-react-cli-aurelia-or-vue-cli-build-in-vsts/">https://stapp.space/run-angular-cli-rea ... d-in-vsts/</a>
So instead of npm, i added a "command line" task with Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd Arguments: build -prod
But when executing the build i get this error: 'D:\a\1\s\node_modules.bin\ng.cmd' is not recognized as an internal or external command, operable program or batch file. Process completed with exit code 1.
However, if I look in my local folder, after using Yarn, the node_modules, folder is present, and there is ng.cmd. Should I just add node_modules in my source control?
-
0
@Kythor,
You can install angular-cli globally using "npm install -g @angular/cli" before running "ng build --prod" command. I think this is not the best solution but you can use it as a workaround for now.
-
0
I am having the same issue. I tried the above way but doesn't work. Please advise
-
0
<cite>Kythor: </cite> Now I found this: <a class="postlink" href="https://stapp.space/run-angular-cli-react-cli-aurelia-or-vue-cli-build-in-vsts/">https://stapp.space/run-angular-cli-rea ... d-in-vsts/</a>
So instead of npm, i added a "command line" task with Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd Arguments: build -prod
But when executing the build i get this error: 'D:\a\1\s\node_modules.bin\ng.cmd' is not recognized as an internal or external command, operable program or batch file. Process completed with exit code 1.
However, if I look in my local folder, after using Yarn, the node_modules, folder is present, and there is ng.cmd. Should I just add node_modules in my source control?
I used this method and I was able to deploy Aspnetboilerplate code but not AspnetZero code
-
0
I got it to work!!
thanks @ismcagdas for the missing piece
Add these steps to the Build definition:
1. Use Yarn 1.x 2. Yarn 3. npm (select version 0.*) : command = install arguments = -g @angular/cli 4. Command Line: Tool = $(Build.SourcesDirectory)\node_modules\.bin\ng.cmd Arguments = build -prod 5. Azure App Service Deploy => $(System.DefaultWorkingDirectory)/dist
It gets deployed and I can go to the angular app url. Just need to find a way to easily change the appconfig.json file when building, because i dont want to change the remoteServiceBaseUrl and appBaseUrl everytime i want to debug
-
0
@Kythor thanks for your feedback. I think you can rename existing appconfig.json file to "appconfig-dev.json" and create another one with name "appconfig-prod.json". Then load it according to current environment name in appropriate ts file.
Haven't tried it by the way but this might give you an idea.
-
0
Hello,
Thank you for the build steps :).
There is no need to update or put the webconfig file on the root of the deployed app ?
-
0
thanks for the feedback ;)
-
0
Just found out that I need to add one more step. The web.config needs to be copied from the root repository to the deploy folder on azure.
I tried with "Copy Files" Source folder: (empty = root repo) Contents: web.config Target Folder: $(build.artifactstagingdirectory)
It passes this step without a problem, but the file is not copied, so the app wont work. Any ideas?
-
0
Hi
I've tryed these steps but i stil getting error.
I'm using asp.net core / angular
2018-03-01T11:35:07.3784052Z ============================================================================== 2018-03-01T11:35:07.3784278Z Task : Command Line 2018-03-01T11:35:07.3784373Z Description : Run a command line with arguments 2018-03-01T11:35:07.3784465Z Version : 1.1.3 2018-03-01T11:35:07.3784594Z Author : Microsoft Corporation 2018-03-01T11:35:07.3784696Z Help : [More Information](<a class="postlink" href="https://go.microsoft.com/fwlink/?LinkID=613735">https://go.microsoft.com/fwlink/?LinkID=613735</a>) 2018-03-01T11:35:07.3784825Z ============================================================================== 2018-03-01T11:35:07.3889844Z ##[command]D:\a\3\s\node_modules.bin\ng.cmd build -prod 2018-03-01T11:35:07.4077115Z The system cannot find the path specified. 2018-03-01T11:35:08.4407169Z ##[error]Process completed with exit code 1.
Steps: 1: Use Yarn 2: Yarn 3: npm build (working folder: "$/PROJECTNAME/Master", npm command: install, arguments: -g @angular/cli) 4: CLI (Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd, arguments: build -prod)
Anybody knows what i'm missing?
-
0
@mentium the only difference with my steps, is that i leave the field "Working Folder" empty on "npm build" also make sure you select version 0.*
-
0
@kythor, wierd, i've actualy tried that also.
-
0
HEllO,
In the last step the path is :
$(Build.SourcesDirectory)*angular*\node_modules.bin\ng.cmd
For the web.config file you should :
- add a web.config file on the same folder as favicon.ico
- modify the angularCli file as
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config",