我目前对角工作使用其第三方库,如角CLI /角通用以下链接https://github.com/angular/angular-cli/wiki/stories-universal-rendering /和火力托管/和实时数据库。它在我的本地机器上工作的伟大监听,本地主机:4000。我把它渲染服务器端渲染顺利,我看见我需要的搜索引擎友好的我也用延迟加载,它改进了Web应用程序性能的加载速度非常快的HTML。现在,我的问题是,当我部署我与通用服务器端渲染也有延迟加载角应用。我得到这个错误的说法,错误:而且如果我只是不部署延迟加载我得到这个3个错误无法处理请求,
1. Uncaught SyntaxError: Unexpected token < inline.318b50c57b4eba3d437b.bundle.js:1
2. Uncaught SyntaxError: Unexpected token < polyfills.bf95165a1d5098766b92.bundle.js:1
3. Uncaught SyntaxError: Unexpected token < main.4871dfc6be55ccbf4c0b.bundle.js:1
这里的文件夹结构:
FOR,SRC /应用/ app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ButtonsComponent } from './demo/buttons/buttons.component';
const routes: Routes = [
{ path: 'buttons', loadChildren: './demo/demo.module#DemoModule' },
{ path: '**', redirectTo: 'buttons' }
];
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'something-unique-id' }),
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [
AppComponent,
ButtonsComponent
]
})
export class AppModule { }
FOR,SRC /应用/ app.server.module.ts
import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';
import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';
@NgModule({
imports: [
// The AppServerModule should import your AppModule followed
// by the ServerModule from @angular/platform-server.
AppModule,
ServerModule,
ModuleMapLoaderModule // <-- *Important* to have lazy-loaded routes work
],
// Since the bootstrapped component is not inherited from your
// imported AppModule, it needs to be repeated here.
bootstrap: [AppComponent],
})
export class AppServerModule {}
FOR,SRC / main.server.ts
export { AppServerModule } from './app/app.server.module';
FOR,SRC / tsconfig.server.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
// Set the module format to "commonjs":
"module": "commonjs",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
// Add "angularCompilerOptions" with the AppServerModule you wrote
// set as the "entryModule".
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
FOR,.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "kuntento"
},
"apps": [
{
"root": "src",
"outDir": "dist/browser",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"platform": "server",
"root": "src",
"outDir": "dist/server",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
FOR,./server.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
enableProdMode();
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
document: template,
url: options.req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
FOR, ./webpack.server.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
externals: [/(node_modules|main\..*\.js)/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'),
{}
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
}
FOR,的package.json
{
"name": "universalrendering",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.6",
"@angular/router": "^5.2.0",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"angular-universal-express-firebase": "0.0.4",
"core-js": "^2.4.1",
"express": "^4.16.2",
"firebase-functions": "^0.8.1",
"rxjs": "^5.5.6",
"ts-loader": "^3.5.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "^1.7.1",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^2.7.2"
}
}
这是火力地堡主机:
FOR,index.html的
import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';
export let server_rendering = angularUniversal.trigger({
index: __dirname + '/browser/index.html',
main: __dirname + '/server/main.bundle',
enableProdMode: true,
browserCacheExpiry: 1200,
cdnCacheExpiry: 600
});
FOR,tsconfig.functions.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"rootDir": ".",
"outDir": "../functions"
},
"files": [
"index.ts"
]
}
FOR,的package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "./node_modules/.bin/eslint .",
"serve": "firebase serve --only functions",
"shell": "firebase experimental:functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"firebase-admin": "~5.8.1",
"firebase-functions": "^0.8.1",
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.6",
"@angular/router": "^5.2.0",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"angular-universal-express-firebase": "0.0.4",
"core-js": "^2.4.1",
"express": "^4.16.2",
"rxjs": "^5.5.6",
"ts-loader": "^3.5.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"eslint": "^4.12.0",
"eslint-plugin-promise": "^3.6.0"
},
"private": true
}
FOR,index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const angularUniversal = require("angular-universal-express-firebase");
exports.server_rendering = angularUniversal.trigger({
index: __dirname + '/browser/index.html',
main: __dirname + '/server/main.bundle',
enableProdMode: true,
browserCacheExpiry: 1200,
cdnCacheExpiry: 600
});
当你的重定向规则发送索引页,而不是的JavaScript,请检查同一问题here,通常是错误。
更新您的package.json
scripts
像如下:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"build.server": "ng build -aot -app ssr",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
然后.angular-cli.json
"main": "main.ts"
到"main": "main.server.ts"
。
构建应用程序的浏览器和服务器版本
npm run build
npm run build.server
请检查教程到这里Deploy Angular Universal w/ Firebase和demo。
希望这将帮助你!
我的问题是在supervisor.conf文件。在节点环境的路线是拼写错误。正确的路线是:
环境= NODE_ENV =生产
这将导致我所有的“意外的标记<”问题
我有一个类似的问题给您,并能够从DIST文件夹移动我的server.js文件到上面的目录来解决它。
所以,我的文件夹/文件结构如下所示: