2017-10-31 2 views
1

API를 통해로드 된 동적 콘텐츠로 Angular2 (Angular 4.4.3) 앱을 만들었습니다. https://angular.io/guide/set-document-title https://angular.io/api/platform-browser/MetaAngular2 SEO 태그 및 사전 렌더링

그리고 사전 렌더링 서버를 만들려면이 가이드를 사용했다 :

나는 (V4에서 추가) 제목과 메타를 설정하는 공식 문서를 사용한에 https://blog.pusher.com/make-angular-4-app-seo-friendly/ (건너 뛰기 : 익스프레스 서버 만들기 귀하의 각도 애플 리케이션 서구 친절한)

하지만 설명대로 작동하지 않습니다. 예를 들어 내가 페이지를 열 때, AppComponent.ts

export class AppComponent implements AfterViewInit { 

    constructor(public router: Router, 
       private activatedRoute: ActivatedRoute, 
       private titleService: Title) { 
    this.titleService.setTitle("SOME CUSTOM TITLE"); 
    } 

을에, 나는 브라우저에서 제목으로 해당 세트를 볼 수 있지만, 페이지의 소스를 열 때,이 참조 :

enter image description here 나는 또한 사용했다 일반 빌드 및 AOT 빌드하지만 같은 일, 여기의 conf의 : tsconfig-aot.json : 나는 AppComponent에서 메타 제목/설명을 설정하거나 다른 하위 구성 요소에서 가능한 것은이 볼 수 있도록하는 방법

{ 
     "compilerOptions": { 
     "target": "es5", 
     "module": "es2015", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2015", "dom"], 
     "noImplicitAny": true, 
     "suppressImplicitAnyIndexErrors": true, 
     "typeRoots": [ 
      "./node_modules/@types/" 
     ] 
     }, 

     "files": [ 
     "src/app/app.module.ts", 
     "src/main.ts" 
     ], 

     "angularCompilerOptions": { 
     "genDir": "aot", 
     "skipMetadataEmit" : true 
     } 
    } 
tsconfig.app.json 
    { 
     "extends": "../tsconfig-aot.json", 
     "compilerOptions": { 
     "outDir": "../out-tsc/app", 
     "baseUrl": "./", 
     "module": "es2015", 
     "types": [] 
     }, 
     "exclude": [ 
     "test.ts", 
     "**/*.spec.ts" 
     ] 
    } 

소스 코드가 있거나 Google이 사이트를 크롤링 할 때?

답변

0

실제로 서버에서 콘텐츠를 제공하는 데 문제가있었습니다. 나는 Nginx로 직접 컨텐트를 제공하려고 시도했지만 노드가 먼저 서버 팩을 실행하고 Nginx와 프록시로만 연결해야합니다.