Angular 2 AOT不起作用.为什么“platformBrowser().bootstrapMod

发布时间：2020-12-17 18:05:29 所属栏目：安全来源：网络整理

导读：当我使用JIT运行我的Angular 2应用程序时,一切正常. 但是在我切换到AOT后,我的应用程序开始拉动带有附加前缀的链接(“/ src / linker / ng_module_factory”),例如： JIT拉：http：// localhost：8080/node_modules/@angular/core/bundles/core.umd.js AOT拉

当我使用JIT运行我的Angular 2应用程序时,一切正常.
但是在我切换到AOT后,我的应用程序开始拉动带有附加前缀的链接(“/ 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
postfix / src / linker / ng_module_factory来自哪里？

关于app.我正在使用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配置
main.ts

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

下一步是使用命令tsc进行编译,构建war和deploy.

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’进行编译,构建war和deploy.
在ngc命令后,我得到文件* .ngfactory.ts,* .ngfactory.js,* .metadata.json,* .shim.ts,* .shim.js

解决方法

使用angular2-webpack-starter,不用担心

https://github.com/AngularClass/angular2-webpack-starter

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!