2016-10-16 5 views
5

जब मैं जेआईटी का उपयोग करके अपना कोणीय 2 ऐप चलाता हूं तो सब कुछ ठीक काम करता है। लेकिन मैं AOT करने के लिए अपने एप्लिकेशन ("/ src/संयोजक/ng_module_factory"), उदाहरण के लिए अतिरिक्त उपसर्ग के साथ लिंक खींच शुरू होता है स्विच करने के बाद:कोणीय 2 एओटी काम नहीं करता है। क्यों "platformBrowser() बूटस्ट्रैप मॉड्यूल फैक्टरी" अतिरिक्त उपसर्ग के साथ लिंक खींचता है "/ src/linker/ng_module_factory"?

JIT खींचती है: http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js

AOT खींचती है: http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js/src/linker/ng_module_factory पोस्टफ़िक्स /src/linker/ng_module_factory कहाँ से आया से?

ऐप के बारे में। मैं जावा 8 + वसंत 4.3.2 का उपयोग कर रहा हूं .RELEASE + कोणीय 2 + टोमकैट 9.0.0.एम 6।

src 
--main 
----webapp 
------resources 
--------app 
----------app.component.css 
----------app.component.ts 
----------app.module.ts 
----------main.ts 
--------index.html 
--------package.json 
--------systemjs.config.js 
--------tsconfig.json 
--------typings.json 
------WEB-INF 
--------dispatcher-servlet.xml 
--------web.xml 

package.json

{ 
    "name": "my-app", 
    "version": "1.0.0", 
    "scripts": { 
    "postinstall": "typings install" 
    }, 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 

    "systemjs": "0.19.27", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.23", 

    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "typescript": "^2.0.2", 
    "typings": "^1.0.4" 
    }, 
    "repository": {} 
} 

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/"> 
    <title>MyApp</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 

<body> 
<my-app>Loading...</my-app> 
</body> 
</html> 

systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     'npm:': 'node_modules/' 
    }, 
    map: { 
     app: 'app', 

     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 

     'rxjs': 'npm:rxjs', 
    }, 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    } 
} 

typings.json

{ 
    "globalDependencies": { 
    "core-js": "registry:dt/core-js#0.0.0+20160725163759" 
    } 
} 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    `, 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent{ 
    title = 'Title'; 
} 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

JIT विन्यास main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule); 

अगला चरण कमांड tsc का उपयोग करके संकलन है, युद्ध और तैनाती का निर्माण।

AOT विन्यास main.ts

import { platformBrowser } from '@angular/platform-browser'; 
import { AppModuleNgFactory } from './app.module.ngfactory'; 
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

अगला चरण संकलक npm install @angular/compiler-cli './ node_modules/.bin/NGC', भवन युद्ध और तैनात स्थापित करने की है, संकलन का उपयोग कर आदेश। ngc के बाद आदेश मैं फ़ाइलों * .ngfactory.ts, * .ngfactory.js, * .metadata.json, * .shim.ts, *

+0

चिंता आप कभी भी इस का उत्तर मिला? मेरी तरफ देखकर मेरी तरफ –

+0

मुझे जवाब मिल गया है क्यों कोणीय जोड़ने उपसर्ग - यह tsconfig.json में विकल्प "मॉड्यूल" पर निर्भर करता है। यह "आमज" या "es2015" हो सकता है। वर्तमान में मुझे नए मुद्दों का सामना करना पड़ा "ट्रेसेर नहीं मिला: एक्सएचआर (404 नहीं मिला) त्रुटि।" इस विषय पर शोध करने से यह ज्ञात समस्या सामने आई और यह कोणीय 2 में कुछ समस्या की तरह दिखता है। हमें नए संस्करण का इंतजार करना चाहिए और एओटी के बारे में शोध विषय जारी रखना चाहिए। इस विषय को पढ़ें https: // github।कॉम/कोणीय/कोणीय/मुद्दों/11358 शायद आपको कुछ नया मिलेगा। – vladbrk

+0

2.0.0 से 2.1.1 तक Angular2 अपडेट करने के बाद कुछ महत्वपूर्ण बग ठीक कर दिए गए हैं। लेकिन 2.1.2 अस्थिर है, थर्म में समस्या है [attr] शून्य है – vladbrk

उत्तर

संबंधित मुद्दे