大佬教程收集整理的这篇文章主要介绍了Angular 6 Server Side Errror:找不到模块:错误:无法解析’./dist/server/main.bundle’,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试使用https://angular.io/guide/universal并将我的代码与Angular Universal中的SSR文件相匹配.这对我不起作用.
似乎dist文件夹没有生成/ server文件夹,但正在创建/浏览器.我不确定为什么.
这是我的angular.json文件
{ "$scheR_71_11845@a": "./node_modules/@angular/cli/lib/config/scheR_71_11845@a.json","version": 1,"newProjectRoot": "projects","projects": { "xilo": { "root": "","sourceRoot": "src","projectType": "application","architect": { "build": { "builder": "@angular-devkit/build-angular:browser","options": { "outputPath": "dist/browser","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts","assets": [ "src/assets","src/favicon.ico" ],"styles": [ "src/styles.css","node_modules/font-awesome/css/font-awesome.min.css" ],"scripts": [ "node_modules/moment/min/moment.min.js" ] },"configurations": { "production": { "optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buil@R_489_11308@timizer": true,"filereplacements": [ { "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts" } ] } } },"serve": { "builder": "@angular-devkit/build-angular:dev-server","options": { "browserTarget": "xilo:build" },"configurations": { "production": { "browserTarget": "xilo:build:production" } } },"extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n","options": { "browserTarget": "xilo:build" } },"test": { "builder": "@angular-devkit/build-angular:karma","options": { "main": "src/test.ts","karmaConfig": "./karma.conf.js","tsConfig": "src/tsconfig.spec.json","scripts": [ "node_modules/moment/min/moment.min.js" ],"src/favicon.ico" ] } },"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": "main.server.ts","tsConfig": "tsconfig.server.json" } } } },"xilo-e2e": { "root": "","sourceRoot": "e2e","architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor","options": { "protractorConfig": "./protractor.conf.js","devServerTarget": "xilo:serve" } },"options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ],"exclude": [ "**/node_modules/**" ] } } } } },"defaultProject": "xilo","scheR_71_11845@atics": { "@scheR_71_11845@atics/angular:class": { "spec": false },"@scheR_71_11845@atics/angular:component": { "spec": false,"inlinestyle": true,"inlineTemplate": true,"prefix": "app","styleext": "css" },"@scheR_71_11845@atics/angular:directive": { "spec": false,"prefix": "app" },"@scheR_71_11845@atics/angular:guard": { "spec": false },"@scheR_71_11845@atics/angular:module": { "spec": false },"@scheR_71_11845@atics/angular:pipe": { "spec": false },"@scheR_71_11845@atics/angular:service": { "spec": false } } }
server.ts
// these are important and needed before anything else import 'zone.js/dist/zone-node'; import 'reflect-Metadata'; import { enableProdMode } from '@angular/core'; import * as express from 'express'; import { join } from 'path'; // Faster server renders w/ Prod mode (dev mode never needed) enableProdMode(); // Express server const app = express(); const PORT = process.env.PORT || 4000; const DIST_FOLDER = join(process.cwd(),'dist'); // * NOTE :: leave this as require() since this file is built Dynamically from webpack const { AppServerModuleNgFactory,LAZY_MODULE_MAP } = require('./dist/server/main.bundle'); // Express ENGIne import { ngExpressENGIne } from '@nguniversal/express-ENGIne'; // Import module map for lazy loading import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'; app.ENGIne('html',ngExpressENGIne({ bootstrap: AppServerModuleNgFactory,providers: [ provideModuleMap(LAZY_MODULE_MAp) ] })); app.set('view ENGIne','html'); app.set('views',join(DIST_FOLDER,'browser')); // TODO: implement data requests securely app.get('/api/*',(req,res) => { res.status(404).send('data requests are not supported'); }); // Server static files from /browser app.get('*.*',express.static(join(DIST_FOLDER,'browser'))); // All regular routes use the Universal ENGIne app.get('*',res) => { res.render('index',{ req }); }); // Start up the Node server app.listen(PORT,() => { console.log(`Node server listening on http://localhost:${PORT}`); });
一切都完全按照Angular Universal方向设置.
任何人都知道为什么我的构建脚本不会生成/ server文件夹?
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server"
的package.json
{ "name": "XXX","version": "XXX","license": "MIT","repository": { "type": "git","url": "XXXXX" },"ENGInes": { "node": "10.7.0","npm": "6.1.0" },"scripts": { "ng": "ng","start": "node dist/server","build": "ng build","build:client-and-server-bundles": "ng build --prod && ng build --prod --project xilo --output-hashing=all","build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender","build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server","deploy": "git push origin master && git push heroku master","generate:prerender": "cd dist && node prerender","posTinstall": "npm run build:ssr","webpack:server": "webpack --config webpack.server.config.js --progress --colors","serve:prerender": "cd dist/browser && http-server","serve:ssr": "node dist/server" },"private": true,"dependencies": { "@angular/animations": "6.1.0","@angular/common": "6.1.0","@angular/compiler": "6.1.0","@angular/compiler-cli": "6.1.0","@angular/core": "^6.1.0","@angular/forms": "6.1.0","@angular/http": "6.1.0","@angular/language-service": "6.1.0","@angular/platform-browser": "6.1.0","@angular/platform-browser-dynamic": "6.1.0","@angular/platform-server": "6.1.0","@angular/router": "6.1.0","@nguniversal/express-ENGIne": "^5.0.0-beta.5","@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5","@nicky-lenaers/ngx-scroll-to": "^0.5.0","@types/moment": "^2.13.0","@types/node": "^8.10.21","angular-file": "^0.4.1","angular2-moment": "^1.9.0","classlist.js": "^1.1.20150312","core-js": "^2.5.7","cpy-cli": "^1.0.1","express": "^4.16.3","font-awesome": "^4.7.0","http-server": "^0.10.0","moment": "^2.22.2","ng-circle-progress": "^0.9.9","ng-hotjar": "0.0.13","ng-intercom": "^1.0.0-beta.5-2","ng2-google-charts": "^3.4.0","ng4-geoautocomplete": "^0.1.0","ngx-filter-pipe": "^1.0.2","ngx-loading": "^1.0.14","ngx-pagination": "^3.0.3","reflect-Metadata": "^0.1.10","rxjs": "^6.2.2","rxjs-compat": "^6.2.2","ts-loader": "^4.4.2","typescript": "2.9.2","web-animations-js": "^2.3.1","zone.js": "^0.8.20" },"devDependencies": { "@angular-devkit/build-angular": "~0.6.8","@angular/cli": "^6.0.8","webpack-cli": "^3.1.0" } }
npm cache clear --force rm -rf node_modules npm install
并祈祷.
以上是大佬教程为你收集整理的Angular 6 Server Side Errror:找不到模块:错误:无法解析’./dist/server/main.bundle’全部内容,希望文章能够帮你解决Angular 6 Server Side Errror:找不到模块:错误:无法解析’./dist/server/main.bundle’所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。