2
角度4を使用して私のアプリが必要SEOフレンドリーです。私はそのトリックを達成するためにこの記事に入った。 https://blog.pusher.com/make-angular-4-app-seo-friendly/角度4 SEOエラー
server.tsコードはこのようです。
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app-server.module.ngfactory';
enableProdMode();
const PORT = process.env.PORT || 4000;
const DIST_DIR = join(__dirname, '..', 'dist');
const app = express();
const template = readFileSync(join(DIST_DIR, 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const newOptions = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, newOptions)
.then(html => callback(null, html));
});
app.set('views', 'src');
app.set('view engine', 'html');
app.get('*.*', express.static(DIST_DIR));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT,() => {
console.log(`App listening on http://localhost:${PORT}!`);
});私はnpm run startを実行すると、このエラーが "prestart": "ng build --prod && ./node_modules/.bin/ngc", "start": "ts-node src/server.ts",
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './app/app.module.ngfactory' in '/Users/andhika/Documents/Apps/web-yna/src'
resolve './app/app.module.ngfactory' in '/Users/andhika/Documents/Apps/web-yna/src'
using description file: /Users/andhika/Documents/Apps/web-yna/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/andhika/Documents/Apps/web-yna/package.json (relative path: ./src)
using description file: /Users/andhika/Documents/Apps/web-yna/package.json (relative path: ./src/app/app.module.ngfactory)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory.js doesn't exist
as directory
/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory doesn't exist
[/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory]
[/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory.ts]
[/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory.js]
[/Users/andhika/Documents/Apps/web-yna/src/app/app.module.ngfactory]
@ ./src/main.ts 3:0-66
@ multi ./src/main.tspackage.json
{
"name": "web-yna",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"prestart": "ng build dist --prod && ./node_modules/.bin/ngc",
"start": "ts-node src/server.ts",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/build-optimizer": "0.0.35",
"@angular-devkit/core": "0.0.22",
"@angular-devkit/schematics": "0.0.41",
"@angular/animations": "^5.1.0",
"@angular/common": "^5.1.0",
"@angular/compiler": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/forms": "^5.1.0",
"@angular/http": "^5.1.0",
"@angular/platform-browser": "^5.1.0",
"@angular/platform-browser-dynamic": "^5.1.0",
"@angular/platform-server": "^5.1.2",
"@angular/router": "^5.1.0",
"@ngtools/json-schema": "^1.1.0",
"@schematics/angular": "^0.1.10",
"angularfire2": "^5.0.0-rc.4",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.5.2",
"express": "^4.16.2",
"firebase": "^4.6.2",
"hammerjs": "^2.0.8",
"ngx-carousel": "^1.3.5",
"ngx-parallax": "^2.0.0",
"ngx-quill": "^2.0.4",
"path": "^0.12.7",
"rxjs": "^5.5.5",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.5.2",
"@angular/compiler-cli": "^5.1.0",
"@angular/language-service": "^5.1.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"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": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}してくださいアドバイス。
を、あなたはこの前に 'NPM install'''' '実行しましたの？。 package.jsonを共有すると便利です。 –
@IshanThilinaSomasiri package.jsonが質問に追加されました。私はすでにnpmをインストールしました。 –
「npm run start」を実行した後にngfactoryモジュールが生成されないAngular 5のビルド--prodの問題に問題があることが判明しました。 –