When I run the Angular 2 application using JIT, everything works fine. But after I switch to AOT, my application starts pulling links with an additional prefix ("/ src / linker / ng_module_factory"), for example:
JIT pulls: http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js
AOT pulls: http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js/src/linker/ng_module_factory Where did postfix /src/linker/ng_module_factory ?
About the application. I am using Java 8 + Spring 4.3.2.RELEASE + Angular 2 + Tomcat 9.0.0.M6.
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 configuration main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
The next step is to compile with the tsc , create a war, and deploy.
AOT configuration main.ts
import { platformBrowser } from '@angular/platform-browser'; import { AppModuleNgFactory } from './app.module.ngfactory'; platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
The next step is to install the npm install @angular/compiler-cli compiler npm install @angular/compiler-cli , compiling using the './node_modules/ command. bin / ngc ', creating war and deployment. After the ngc command ngc I get the files * .ngfactory.ts, * .ngfactory.js, * .metadata.json, * .shim.ts, * .shim.js