2017-12-24 6 views
2

각도 4를 사용하는 앱이 필요합니다. SEO 친화적입니다. 트릭을 완성하기 위해이 기사를 읽었습니다. https://blog.pusher.com/make-angular-4-app-seo-friendly/각도 4 SEO 오류

server.ts 코드는 다음과 같습니다. 내가 npm run start을 실행할 때

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}!`); 
 
});
그런 다음이 오류 occurend는 "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.ts

package.json

01을 실행하는

{ 
 
    "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" 
 
    } 
 
}

하십시오 조언 23,516,.

+0

그냥 당신이''실행 않았는지'NPM install''' 이전이 할 수 있도록? package.json을 공유하면 도움이 될 것입니다. –

+0

@IshanThilinaSomasiri package.json이 질문에 추가되었습니다. 이미 npm을 설치했습니다. –

+0

'npm run start'를 실행 한 후 ngfactory 모듈이 생성되지 않는 Angle 5의 빌드 --prod 문제에서 문제가 발생합니다. –

답변

1

Angular app SEO를 사용하려면 서버 측 렌더링이 가능해야하므로 크롤러가 Angular APP에서 생성 한 모든 콘텐츠로 페이지를 스캔하고 실제 렌더링 된 HTML을 얻을 수 있습니다. 당신이 AngularUniversal를 사용할 필요가 그렇게하기 위해 :
https://universal.angular.io/