Amplify-cli: Cant deploy with amplify publish on a new created Angular Project
Describe the bug
I can't deploy with amplify publish on an existing and also newly created Angular project.
To Reproduce
Steps to reproduce the behavior:
λ ng new test3
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ http://sass-lang.com ]
CREATE test3/angular.json (3850 bytes)
CREATE test3/package.json (1312 bytes)
CREATE test3/README.md (1022 bytes)
CREATE test3/tsconfig.json (408 bytes)
CREATE test3/tslint.json (2837 bytes)
CREATE test3/.editorconfig (245 bytes)
CREATE test3/.gitignore (503 bytes)
CREATE test3/src/favicon.ico (5430 bytes)
CREATE test3/src/index.html (292 bytes)
CREATE test3/src/main.ts (372 bytes)
CREATE test3/src/polyfills.ts (3234 bytes)
CREATE test3/src/test.ts (642 bytes)
CREATE test3/src/styles.scss (80 bytes)
CREATE test3/src/browserslist (388 bytes)
CREATE test3/src/karma.conf.js (964 bytes)
CREATE test3/src/tsconfig.app.json (166 bytes)
CREATE test3/src/tsconfig.spec.json (256 bytes)
CREATE test3/src/tslint.json (314 bytes)
CREATE test3/src/assets/.gitkeep (0 bytes)
CREATE test3/src/environments/environment.prod.ts (51 bytes)
CREATE test3/src/environments/environment.ts (662 bytes)
CREATE test3/src/app/app-routing.module.ts (245 bytes)
CREATE test3/src/app/app.module.ts (393 bytes)
CREATE test3/src/app/app.component.html (1173 bytes)
CREATE test3/src/app/app.component.spec.ts (1092 bytes)
CREATE test3/src/app/app.component.ts (210 bytes)
CREATE test3/src/app/app.component.scss (0 bytes)
CREATE test3/e2e/protractor.conf.js (752 bytes)
CREATE test3/e2e/tsconfig.e2e.json (213 bytes)
CREATE test3/e2e/src/app.e2e-spec.ts (301 bytes)
CREATE test3/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
> [email protected] install D:\Projekte\grocery\client\test3\node_modules\node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-64_binding.node
Download complete .] - :
Binary saved to D:\Projekte\grocery\client\test3\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\Pechi\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-64_binding.node
> [email protected] postinstall D:\Projekte\grocery\client\test3\node_modules\node-sass
> node scripts/build.js
Binary found at D:\Projekte\grocery\client\test3\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arc
added 1095 packages from 1163 contributors and audited 39132 packages in 100.429s
found 0 vulnerabilities
Successfully initialized git.
D:\Projekte\grocery\client
λ cd test3\
D:\Projekte\grocery\client\test3 (master -> origin)
λ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-11-12T21:15:12.590Z
Hash: ba0a4b262fe0ff1533cc
Time: 7418ms
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.55 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
λ npm install --save aws-amplify-angular
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 2 packages from 10 contributors and audited 39474 packages in 10.855s
found 0 vulnerabilities
D:\Projekte\grocery\client\test3 (master -> origin)
λ amplify init
Note: It is recommended to run this command from the root of your app directory
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using angular
? Source Directory Path: src
? Distribution Directory Path: dist
? Build Command: npm run build
? Start Command: npm run start
Using default provider awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
\ Initializing project in the cloud...
CREATE_IN_PROGRESS test3-20181112221741 AWS::CloudFormation::Stack Mon Nov 12 2018 22:17:43 GMT+0100 (GMT+01:00) User Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Mon Nov 12 2018 22:17:46 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Mon Nov 12 2018 22:17:46 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Mon Nov 12 2018 22:17:46 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Mon Nov 12 2018 22:17:47 GMT+0100 (GMT+01:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Mon Nov 12 2018 22:17:47 GMT+0100 (GMT+01:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Mon Nov 12 2018 22:17:48 GMT+0100 (GMT+01:00) Resource creation Initiated
/ Initializing project in the cloud...
CREATE_COMPLETE UnauthRole AWS::IAM::Role Mon Nov 12 2018 22:17:57 GMT+0100 (GMT+01:00)
√ Successfully created initial AWS cloud resources for deployments.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify <category> add" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
CREATE_COMPLETE AuthRole AWS::IAM::Role Mon Nov 12 2018 22:18:07 GMT+0100 (GMT+01:00)
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Mon Nov 12 2018 22:18:08 GMT+0100 (GMT+01:00)
CREATE_COMPLETE test3-20181112221741 AWS::CloudFormation::Stack Mon Nov 12 2018 22:18:10 GMT+0100 (GMT+01:00)
λ npm run build
> [email protected] build D:\Projekte\grocery\client\test3
> ng build
Date: 2018-11-12T21:18:40.608Z
Hash: b5a55934e85c3b6f3238
Time: 7006ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.24 MB [initial] [rendered]
D:\Projekte\grocery\client\test3 (master -> origin)
λ
D:\Projekte\grocery\client\test3 (master -> origin)
λ
D:\Projekte\grocery\client\test3 (master -> origin)
λ
D:\Projekte\grocery\client\test3 (master -> origin)
λ amplify hosting add
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name test3-20181112222030--hostingbucket
? index doc for the website index.html
? error doc for the website index.html
You can now publish your app using the following command:
Command: amplify publish
D:\Projekte\grocery\client\test3 (master -> origin)
λ amplify publish
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | Create | awscloudformation |
? Are you sure you want to continue? true
/ Updating resources in the cloud. This may take a few minutes...
UPDATE_IN_PROGRESS test3-20181112221741 AWS::CloudFormation::Stack Mon Nov 12 2018 22:20:50 GMT+0100 (GMT+01:00) User Initiated
CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Mon Nov 12 2018 22:20:54 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Mon Nov 12 2018 22:20:55 GMT+0100 (GMT+01:00) Resource creation Initiated
\ Updating resources in the cloud. This may take a few minutes...
CREATE_IN_PROGRESS test3-20181112221741-hostingS3AndCloudFront-V5UKMLKSUQWK AWS::CloudFormation::Stack Mon Nov 12 2018 22:20:55 GMT+0100 (GMT+01:00) User Initiated
CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Mon Nov 12 2018 22:20:59 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Mon Nov 12 2018 22:21:00 GMT+0100 (GMT+01:00) Resource creation Initiated
| Updating resources in the cloud. This may take a few minutes...
CREATE_COMPLETE S3Bucket AWS::S3::Bucket Mon Nov 12 2018 22:21:20 GMT+0100 (GMT+01:00)
/ Updating resources in the cloud. This may take a few minutes...
CREATE_IN_PROGRESS BucketPolicy AWS::S3::BucketPolicy Mon Nov 12 2018 22:21:22 GMT+0100 (GMT+01:00)
CREATE_IN_PROGRESS BucketPolicy AWS::S3::BucketPolicy Mon Nov 12 2018 22:21:23 GMT+0100 (GMT+01:00) Resource creation Initiated
CREATE_COMPLETE BucketPolicy AWS::S3::BucketPolicy Mon Nov 12 2018 22:21:24 GMT+0100 (GMT+01:00)
CREATE_COMPLETE test3-20181112221741-hostingS3AndCloudFront-V5UKMLKSUQWK AWS::CloudFormation::Stack Mon Nov 12 2018 22:21:25 GMT+0100 (GMT+01:00)
CREATE_COMPLETE hostingS3AndCloudFront AWS::CloudFormation::Stack Mon Nov 12 2018 22:21:29 GMT+0100 (GMT+01:00)
| Updating resources in the cloud. This may take a few minutes...
UPDATE_COMPLETE_CLEANUP_IN_PROGRESS test3-20181112221741 AWS::CloudFormation::Stack Mon Nov 12 2018 22:21:32 GMT+0100 (GMT+01:00)
UPDATE_COMPLETE test3-20181112221741 AWS::CloudFormation::Stack Mon Nov 12 2018 22:21:33 GMT+0100 (GMT+01:00)
√ All resources are updated in the cloud
Hosting endpoint: http://test3-20181112222030--hostingbucket.s3-website.eu-central-1.amazonaws.com
frontend build command execution error
{ Error: spawn npm ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn npm',
path: 'npm',
spawnargs: [ 'run', 'build' ] }
2018-11-12T21:21:50.069Z - error: uncaughtException: spawn npm ENOENT date=Mon Nov 12 2018 22:21:50 GMT+0100 (GMT+01:00), pid=12264, uid=null, gid=null, cwd=D:\Projekte\grocery\client\test3, execPath=C:\Program Files\nodejs\node.exe, vers
ion=v10.13.0, argv=[C:\Program Files\nodejs\node.exe, C:\Program Files\nodejs\node_modules\@aws-amplify\cli\bin\amplify, publish], rss=93523968, heapTotal=70586368, heapUsed=60902512, external=576156, loadavg=[0, 0, 0], uptime=2515, trace
=[column=19, file=internal/child_process.js, function=Process.ChildProcess._handle.onexit, line=232, method=onexit, native=false, column=16, file=internal/child_process.js, function=onErrorNT, line=407, method=null, native=false, column=1
9, file=internal/process/next_tick.js, function=process._tickCallback, line=63, method=_tickCallback, native=false], stack=[Error: spawn npm ENOENT, at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19), at onE
rrorNT (internal/child_process.js:407:16), at process._tickCallback (internal/process/next_tick.js:63:19)]
Expected behavior
Deploy Frontend code to S3
Screenshots
Desktop:
- OS: Windows 10
- Node: v10.13.0 x64
- NPM: 6.4.1
- @angular/[email protected]
- @aws-amplify/[email protected]
investigating
pechisworks
All 9 comments
@pechisworks does the npm run build command execute without any errors if you run it independently?
kaustavghosh06
on 12 Nov 2018
@kaustavghosh06 yes npm run build executes without any errors as you can see on the fourth screenshot
pechisworks
on 12 Nov 2018
This might be caused by some environment settings.
If you are running the commands on a Windows box, normally the command name is npm.cmd run-script build, somehow it's not set like that during amplify init.
Run amplify configure project and change that, see if that solves the build error.
Also, for Angular version 6 and above, make sure the Distribution Directory Path is correctly set:
- Check the
angular.jsonfile, and get the value atproject.<your-project-package-name>.architect.build.options.outputPath - Run
amplify configure project, and set the above value forDistribution Directory Path
This will allow the cli to upload the files with the correct folder structure, and set up path to the index.html file correctly.
UnleashedMind
on 15 Nov 2018
👍8
🚀2
🎉2
😄1
When i am running npm.cmd run-script build the execution works.
I changed the dist path on the project settings accordingly to the angular project, but this doesn't help.
pechisworks
on 15 Nov 2018
So the build part went through, what's the error message now?
Can you check the contents in the distribution directory set in the amplify configure project, are they the expected built artifacts?
UnleashedMind
on 15 Nov 2018
No I meant when i am manually running the command npm.cmd run-script build in the console, this will build me the current app. After this step there are build files in the dist directory.
When running amplify publish im getting the same error:
frontend build command execution error
{ Error: spawn npm ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn npm',
path: 'npm',
spawnargs: [ 'run', 'build' ] }
2018-11-15T19:49:05.939Z - error: uncaughtException: spawn npm ENOENT date=Thu Nov 15 2018 20:49:05 GMT+0100 (GMT+01:00), pid=1176, uid=null, gid=null, cwd=D:\Projekte\grocery\client\grocery-client3, execPath=C:\Program Files\nodejs\node.exe, version=v10.13.0, argv=[C:\Program Files\nodejs\node.exe, C:\Program Files\nodejs\node_modules\@aws-amplify\cli\bin\amplify, publish], rss=131969024, heapTotal=104140800, heapUsed=72748896, external=11380680, loadavg=[0, 0, 0], uptime=157178, trace=[column=19, file=internal/child_process.js, function=Process.ChildProcess._handle.onexit, line=232, method=onexit, native=false, column=16, file=internal/child_process.js, function=onErrorNT, line=407, method=null, native=false, column=19, file=internal/process/next_tick.js, function=process._tickCallback, line=63, method=_tickCallback, native=false], stack=[Error: spawn npm ENOENT, at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19), at onErrorNT (internal/child_process.js:407:16), at process._tickCallback (internal/process/next_tick.js:63:19)]
Seems like the cli is still trying to run npm run build.
You can run amplify configure project, and when prompted with the Build Command, change it to npm.cmd run-script build.
UnleashedMind
on 15 Nov 2018
👍9
@UnleashedMind this works fine, build process starts and publishing to S3 works as well!
pechisworks
on 15 Nov 2018
Probable duplicate here : https://github.com/aws/awsmobile-cli/issues/169#issuecomment-457093498
kpjofficial
on 24 Jan 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
kstro21
·
3Comments
MageMasher
·
3Comments
rehos
·
3Comments
kangks
·
3Comments
davo301
·
3Comments
Most helpful comment
This might be caused by some environment settings.
If you are running the commands on a Windows box, normally the command name is
npm.cmd run-script build, somehow it's not set like that duringamplify init.Run
amplify configure projectand change that, see if that solves the build error.Also, for Angular version 6 and above, make sure the
Distribution Directory Pathis correctly set:angular.jsonfile, and get the value atproject.<your-project-package-name>.architect.build.options.outputPathamplify configure project, and set the above value forDistribution Directory PathThis will allow the cli to upload the files with the correct folder structure, and set up path to the index.html file correctly.