角度AOT成熟度

我只想知道AOT过程有多成熟，以便使用它或尝试不同的方法。我在问，因为我在尝试应用示例 https://angular.io/docs/ts/latest/cookbook/aot-compiler.html 角度AOT成熟度

到我的应用程序时遇到了很多问题。我收到了数百个错误。它看起来像需要所有对象的类型化类。我正在使用类似d3和时刻的库，因此修复“未输入的”问题并不容易。我也有问题relative paths。

所以，它不会产生js文件，而无法运行的汇总。

是否有任何文档需要阅读才能配置编译器来解决这些问题？

该应用在“DEV”模式下运行时没有问题。

来源

2016-10-10 Simon De Uvarow

在你tsconfig.json集 “noImplicitAny”：

然后你rollup咕嘟咕嘟任务可以创建UMD，AMD和CJS束。 –

使用AOT进行编译在捆绑包的大小以及加载时间方面都有很大的不同。我已经用它与几个项目，现在它工作得很好。你说你使用其他库，我已经解决了这个问题，通过将这些编译成jspm sfx bundle，除了angular aot bundle之外（使用全局导出 - 请参见下文）。

我已创建了AOT束（使用NGC和汇总）工作的示例应用程序，你可以在这里找到https://github.com/fintechneo/angular2-templates/

的示例使用材料2，也显示了属性是由Angular2控制的SVG图表。

不幸的是在这个例子中没有外部库（一切都被编译到一个生产包中） - 但这里有一个jspm命令，用于在另一个项目中创建库包。

jspm bundle-sfx somelib somelib.min.js --skip-source-map --format global --minify --global-name SomeLib

只需与AOT束前的脚本标签加载包，并使用图书馆的打字稿文件中声明与名SomeLib一个变种。

来源

2016-12-16 21:50:11

要解决你的编译问题，请确保你已经安装@types/d3

npm install @types/d3

要解决的AOT相对路径问题（假设你指的是相对于模板的URL），您应内嵌您的模板文件，在使用rollup之前进行预构建步骤。

例如，使用内嵌咕嘟咕嘟你的HTML组件模板和工具，称为inlineNg2Template：

gulp.task('compile:es6', function() { 
    return gulp.src(['./src/**/*.ts']) 
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true })) 
    .pipe(tsc({ 
     "target": "es5", 
     "module": "es6", 
     "moduleResolution": "node", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "lib": ["es6", "dom"] 
    })) 
    .pipe(gulp.dest('./dist/src')); 
});

注：module系统必须es6的汇总工作。虚假

gulp.task('rollup:module', function() { 
    return rollup.rollup({ 
    entry: pkg.main, 
    onwarn: function (warning) { 
     // Skip certain warnings 

     // should intercept ... but doesn't in some rollup versions 
     if (warning.code === 'THIS_IS_UNDEFINED') { return; } 
     // intercepts in some rollup versions 
     if (warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { return; } 

     if (warning.message.indexOf("treating it as an external dependency") > -1) { return; } 

     if (warning.message.indexOf("No name was provided for external module") > -1) { return; } 

     // console.warn everything else 
     console.warn(warning.message); 
    } 

    }).then(function (bundle) { 
    bundle.write({ 
     dest: `dist/${pkg.name}.bundle.umd.js`, 
     format: 'umd', 
     exports: 'named', 
     moduleName: pkg.name, 
     globals: { 
     } 
    }); 
    bundle.write({ 
     dest: `dist/${pkg.name}.bundle.cjs.js`, 
     format: 'cjs', 
     exports: 'named', 
     moduleName: pkg.name, 
     globals: { 
     } 
    }); 
    bundle.write({ 
     dest: `dist/${pkg.name}.bundle.amd.js`, 
     format: 'amd', 
     exports: 'named', 
     moduleName: pkg.name, 
     globals: { 
     } 
    });  
    }); 
});

Demo Starter App with AOT

来源

2017-03-11 07:37:40 pixelbits

角度AOT成熟度

回答

相关问题