本文介绍了Angular SSR localhost: 4000 打不开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 Angular 项目,我想让它与 seo 兼容.我用 Angular Universal 做了这个,但是 localhost: 4000 没有打开.当我输入 localhost:4000/index.html 时,它会打开并重定向到 localhost:4000.但是,页面源代码显示为 .所以它没有发生.

I have an Angular project and I want to make it seo compatible. I did this with Angular Universal, but localhost: 4000 doesn't open. When I enter localhost: 4000 / index.html, it opens and redirects to localhost: 4000. However, the page source code appears as . So it's not happening.

我想知道,我做错了什么吗?"我问.另一个新的 Angular 项目创建了我在它上面创建的相同操作,没有问题.

I wondered, "Did I do something wrong?" I asked. And another new Angular project created the same operations I've created on it worked without a problem.

但是,它在我当前的项目中不起作用.

However, it does not work in my current project.

我的文件是这样的;

//server.ts

// server.ts

import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

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/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

//webpack.server.config.js

// webpack.server.config.js

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

//tsconfig.app.json

// tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

//tsconfig.server.json

// tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "baseUrl": "./"
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

//package.json

// package.json

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/platform-server": "^7.2.7",
    "@angular/router": "^7.2.7",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "@ng-select/ng-select": "^2.10.5",
    "@nguniversal/express-engine": "^7.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^7.1.0",
    "@progress/kendo-angular-treeview": "^2.5.0",
    "angular-tree-component": "^8.0.1",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "express": "^4.15.2",
    "jquery": "^3.3.1",
    "ng2-ckeditor": "^1.2.1",
    "ng2-image-viewer": "^2.0.1",
    "ng2-pdf-viewer": "^5.2.3",
    "ngx-card": "^0.2.4",
    "ngx-owl-carousel": "^2.0.7",
    "ngx-toastr": "^9.1.0",
    "primeicons": "^1.0.0",
    "primeng": "^7.0.3",
    "rxjs": "^6.4.0",
    "ts-loader": "^5.3.3",
    "tslib": "^1.9.0",
    "webpack-cli": "^3.2.3",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "^7.2.7",
    "@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",
    "ts-loader": "^5.2.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.2.4",
    "webpack-cli": "^3.1.0"
  }
}

我在 webpack.server.config.js 的 module.exports 中尝试了 mode: "production" 和 mode: "development".没有发生.

I tried mode: "production" and mode: "development" in module.exports in webpack.server.config.js.Did not happen.

可能是什么问题?我正在做同样的操作,在一个新项目中运行顺利,但在我当前的项目中不起作用.

What could be the problem? I'm doing the same operations in a new project is running smoothly, but it does not work on my current project.

谢谢.

推荐答案

我试图通过一一删除所有 3rd 方包来找到导致问题的包.我没有得到任何结果.

I tried to find the package that caused the problem by removing all the 3rd party packages one by one.I didn't get a result from any of them.

我的主页上有 setInterval.我没有得到结果.

I had setInterval on my homepage. I don't get a result.

我确信我的 server.ts 和其他配置文件是正确的,因为当我从头开始创建一个新项目时它们运行良好.这就是为什么我没有把问题称为问题.

I was sure that my server.ts and other configuration files were correct because they were working fine when I created a new project from scratch. That's why I didn't call the problem.

虽然我把首页的代码都删了,但是还是打不开.

Although I deleted all the codes on my homepage, it still didn't open.

我在 4 天后解决了我的问题.token = localStorage.getItem('token');在我的 Auth.Interceptor 文件中;由于 localStorage,我遇到了这些问题.

I solved my problem after 4 days. token = localStorage.getItem('token'); in my Auth.Interceptor file; I have experienced these problems because of localStorage.

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private _platformId: Object) { }


if (isPlatformBrowser(this._platformId)) {
   token = localStorage.getItem('token');
}

这样做之后,就可以访问localhost:4000了.当然,localstorage、window、setTimeout、document、command等所有文件都报错了.通过在上面的if"中使用这些命令的所有行,我已经解决了我的整个问题.

After doing this, I was able to access localhost: 4000. Of course, all the files in the localstorage, window, setTimeout, document, such as commands gave errors. I've solved my entire problem by taking all the lines with these commands in 'if' above.

谢谢.

这篇关于Angular SSR localhost: 4000 打不开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 09:48
查看更多