Sometimes I get the following error in Azure Devops angular project.
Error: Cannot find module 'symbol-observable'
Although this module is installed in the system, it still gives an error.
I don’t get this error when I trigger it manually, sometimes it succeeds 3 times.
Sometimes it succeeds in the automatic attempt.
I don’t always take it, but if I take it once, I take it repeatedly.
Can you suggest a solution for this?
full error detail
- C:[email protected]
- C:agent_work7snode_modules@angularclibinng
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.<anonymous> (C:[email protected]:10:1)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\agent\_work\7\s\node_modules\@angular\cli\lib\init.js',
'C:\agent\_work\7\s\node_modules\@angular\cli\bin\ng'
]
}
##[error]Cmd.exe exited with code '1'.
Finishing: ng build
ng build setting is as below
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production
The installed package list is as follows. package.json info
{
"dependencies": {
"@angular-devkit/architect": "^0.1400.1",
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/platform-server": "^8.2.14",
"@angular/router": "^8.2.14",
"@fortawesome/fontawesome-free": "^5.12.0",
"@ng-bootstrap/ng-bootstrap": "^5.1.5",
"@ngrx/effects": "^8.6.0",
"@ngrx/entity": "^8.6.0",
"@ngrx/router-store": "^8.6.0",
"@ngrx/store": "^8.6.0",
"@ngrx/store-devtools": "^8.6.0",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-translate/core": "^11.0.1",
"@types/jquery": "^3.5.14",
"@types/lodash": "^4.14.149",
"angular-in-memory-web-api": "^0.8.0",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"classlist.js": "^1.1.20150312",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.6.2",
"cross-env": "^7.0.3",
"del-cli": "^4.0.1",
"devextreme": "^17.2.3",
"devextreme-angular": "^17.2.3",
"devextreme-intl": "^17.2.4",
"globalize-webpack-plugin": "^3.0.0",
"hammerjs": "^2.0.8",
"highlight.js": "^9.17.1",
"highlightjs-line-numbers.js": "^2.8.0",
"install": "^0.13.0",
"jquery": "3.1.1",
"lodash": "^4.17.11",
"material-design-icons": "^3.0.1",
"material-design-icons-iconfont": "^6.7.0",
"metronic-angular": "file:",
"moment": "^2.18.1",
"ng-inline-svg": "^9.2.2",
"ngrx-store-freeze": "^0.2.4",
"ngx-clipboard": "^12.3.0",
"ngx-highlightjs": "^3.0.3",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-permissions": "^7.0.3",
"ngx-toastr": "^11.3.3",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.16.0",
"rxjs": "^6.5.4",
"sass-loader": "^7.3.1",
"socicon": "^3.0.5",
"style-loader": "^2.0.0",
"tooltip.js": "^1.3.3",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"webpack": "^4.46.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.29",
"@angular/cli": "^8.3.22",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^8.2.3",
"@ngrx/schematics": "^8.6.0",
"@types/chartist": "^0.9.46",
"@types/highlight.js": "^9.12.3",
"@types/jasmine": "^3.5.0",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.12.24",
"@types/object-path": "^0.11.0",
"codelyzer": "^5.2.1",
"css-loader": "^5.2.7",
"devextreme-cldr-data": "^1.0.3",
"html-webpack-plugin": "^5.5.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.1",
"link": "^1.4.1",
"mini-css-extract-plugin": "^2.6.0",
"npm": "^8.9.0",
"protractor": "~5.4.2",
"sass": "^1.51.0",
"ts-node": "~8.2.0",
"tslint": "~5.17.0",
"typescript": "~3.4.5",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^5.3.1",
"webpack-dev-server": "^4.9.0",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
}
}
2
Answers
I created a new pipeline with the pipeline clone that was the problem before. Here
npm cache clear
and creating new package worked. It was probably wrong package installation in the past. WorkingFolder was looking elsewhere. It never fixed even though I cleared the cache. So I created a new pipeline.Based on my research, module ‘symbol-observable’ based on this devDependencies:
"@angular/cli"
I think the problem comes from the ‘npm install’ step. when it tried to install module ‘symbol-observable’, it failed.
So please check whether the ‘symbol-observable’ exists in the ‘node_modules’ folder of your angular app.
You can go to the folder of your angular app of where the package.json exists, and then run command ‘npm install’ directly in your app to make sure the module has been installed.
And, if your pipeline is based on Microsoft host agent, since it will assign different machines for each time,you can try to use self host agent on the machine which you can build successfully on local.
https://learn.microsoft.com/en-us/azure/devops/pipelines/agents/agents?view=azure-devops&tabs=browser#install