[英]npm run build:ssr does not work in angular 8
I use angular 8 and server-side-rendering but i got error when i run npm run build:ssr
As you can see, src
is repeated twice home/app/front/**src/src**/main.server.ts
我使用 angular 8 和服务器端渲染,但是当我运行npm run build:ssr
时出现错误 如您所见, src
重复两次home/app/front/**src/src**/main.server.ts
I tried everything without success.我尝试了一切都没有成功。 I move main.server.ts and i created a new src but no succes.我移动 main.server.ts 并创建了一个新的 src 但没有成功。
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"front-end": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/intl-tel-input/build/css/intlTelInput.css",
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.scss"
],
"scripts": [
"node_modules/intl-tel-input/build/js/intlTelInput.min.js",
"node_modules/intl-tel-input/build/js/utils.js"
]
},
"configurations": {
"fr": {
"aot": true,
"outputPath": "dist/my-project-fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr"
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "front-end:build"
},
"configurations": {
"fr": {
"browserTarget": "front-end:build:fr"
},
"production": {
"browserTarget": "front-end:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "front-end:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": {
"scripts": false,
"styles": true
}
}
}
}
}
},
"front-end-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "front-end:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "front-end",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
}
package.json
{
"name": "front-end",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run front-end:server:production --bundleDependencies all"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.2",
"@angular/cdk": "^7.3.7",
"@angular/common": "^8.2.2",
"@angular/compiler": "^8.2.2",
"@angular/core": "^8.2.2",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^8.2.2",
"@angular/http": "^7.0.2",
"@angular/material": "^6.4.7",
"@angular/material-moment-adapter": "^7.3.7",
"@angular/platform-browser": "^8.2.2",
"@angular/platform-browser-dynamic": "^8.2.2",
"@angular/platform-server": "^8.2.2",
"@angular/router": "^8.2.2",
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@material/icon-button": "^0.43.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@nguniversal/express-engine": "^8.1.1",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"@uiowa/digit-only": "^1.0.1",
"angular-webstorage-service": "^1.0.2",
"blueimp-canvas-to-blob": "^3.14.0",
"bootstrap": "4.2.1",
"core-js": "^2.5.4",
"error-stack-parser": "^2.0.2",
"express": "^4.15.2",
"google-libphonenumber": "^3.2.3",
"hammerjs": "^2.0.8",
"image-base64": "^1.0.2",
"image-to-base64": "^2.0.1",
"intl-tel-input": "^15.1.2",
"moment": "^2.24.0",
"ng-material-multilevel-menu": "^4.10.8",
"ng-recaptcha": "^4.3.0",
"ng2-img-max": "^2.1.18",
"ng2-tel-input": "^2.0.1",
"ngx-avatar": "^3.7.0",
"ngx-bootstrap": "^4.1.1",
"ngx-image-compress": "^7.2.4",
"ngx-intl-tel-input": "^2.3.1",
"ngx-pagination": "^4.0.0",
"ngx-show-hide-password": "^2.0.3",
"object-to-formdata": "^1.6.4",
"rollbar": "^2.5.3",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.3.3",
"stacktrace-js": "^2.0.0",
"stacktrace-parser": "^0.1.4",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.802.2",
"@angular/cli": "^8.2.2",
"@angular/compiler-cli": "^8.2.2",
"@angular/language-service": "^8.2.2",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.5",
"ts-loader": "^5.2.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^3.5.3",
"webpack": "^4.39.2",
"webpack-cli": "^3.1.0"
}
}
and my app folder和我的应用程序文件夹
ERROR :错误:
ERROR in error TS6053: File '/home//Desk/app/front/src/src/main.server.ts'
Thanks in advance提前致谢
I had the same error.我有同样的错误。 This is how i solved it:我是这样解决的:
In src/tsconfig.server.json
在src/tsconfig.server.json
Change src/main.server.ts
to main.server.ts
将src/main.server.ts
更改为main.server.ts
Looks like the "root"
in your angular.json
has the value "src" because of ehich your path is getting messed up with two src
in url. 看起来你的angular.json
的"root"
的值为“src”,因为你的路径在url中被两个src
搞砸了。 Change it to empty and try building again. 将其更改为空并尝试重新构建。
"root": "",
"sourceRoot": "src",
First run npm run build:ssr
and when that is completed, run npm run serve:ssr
. 首先运行npm run build:ssr
,完成后运行npm run serve:ssr
。 Your application should be served on localhost:portNumber_specified. 您的应用程序应该在localhost:portNumber_specified上提供。
In file src/tsconfig.server.json
(generated by ng add @nguniversal/express-engine --clientProject myProject
) I changed在文件src/tsconfig.server.json
(由ng add @nguniversal/express-engine --clientProject myProject
)我改变了
"files": [ "src/main.server.ts", "server.ts" ],
into进入
"files": [ "main.server.ts", "../server.ts" ],
After that npm run build:ssr
works fine.之后npm run build:ssr
工作正常。
ng add @nguniversal/express-engine
从应用程序文件夹中运行此命令
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.