标签: angular-compiler-cli

我今天被问到,并没有给出正确的答案.

打字稿转化为JS.然后是树摇动,"少"(可选)以及在进行部署的过程中还有什么.但是那些(afaik)与"编译"无关.一切都被捆绑并大量优化,但它实际上并没有编译,对吧？

甚至有一个提前编译器,它确实做了明显的工作.我错过了什么？

Javascript本身仍然是解释的,对吧？

有时我使用Mixins来注入重复的函数slugUrl().

但它不适用于angular 4编译器.

export function Mixin(decorators: Function[]) {
  return function (classFn: Function) {
    decorators.forEach(decorator => {
      Object.getOwnPropertyNames(decorator.prototype).forEach(name => {
        classFn.prototype[name] = decorator.prototype[name];
      });
    });
  };
}


@Mixin([BehaviorInjected])
export class FooComponent {

}

如果我编译此代码,编译器抛出:

属性'ngClassControl'在'FooComponent'类型上不存在.

有任何想法吗？

编辑:由于有人问,这是使用TS mixins再现问题的另一个例子,这次是在模板级别.

组件:

@Component({
    selector: 'home-page',
    template: '<test [tag]="tag"></test>'
})
export class HomePageComponent extends TaggedComponent(MyComponent) {
    public tag = 'hi there';
}

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent extends TaggedComponent(MyComponent) {}

混入:

type Constructor<T> = new(...args: any[]) => T;

export …

有没有办法使用角度cli的AOT？

我已经安装了模块(@ angular/compiler @ angular/compiler-cli),当我输入ngc -p scr时,它会创建ngFactory.ts文件并将其编译为dist/tsc-out(tsconfig中的angular cli默认值)

不知道如何从这里开始:)

干杯

韩

我在我的Ahead-of-Time编译应用程序中收到此错误:

Error: No provider for CompilerFactory!
    at NoProviderError.BaseError [as constructor] (http://localhost:5050/app.js:2413:26)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:5050/app.js:2612:19)
    at new NoProviderError (http://localhost:5050/app.js:2651:19)
    at ReflectiveInjector_._throwOrNull (http://localhost:5050/app.js:4637:22)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:5050/app.js:4671:28)
    at ReflectiveInjector_._getByKey (http://localhost:5050/app.js:4625:28)
    at ReflectiveInjector_.get (http://localhost:5050/app.js:4385:24)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:5050/app.js:10924:64)
    at PlatformRef_.bootstrapModule (http://localhost:5050/app.js:10910:24)
    at http://localhost:5050/app.js:64873:22

使用NGC生成应用程序以生成.ngfactory文件,然后使用不同main文件生成TSC 以获取JS,然后汇总w/Babel以完成构建.遵循本指南非常接近.

这是我的main.prod.ts:

import "reflect-metadata";

import { enableProdMode } from "@angular/core";
import { platformBrowser } from "@angular/platform-browser";
import { AppModuleNgFactory } from "./app.module.ngfactory";

enableProdMode();

platformBrowser().bootstrapModule(<any> AppModuleNgFactory)

Angular组件有装饰器:

@Component({ ... })
export class MyAngularComponent {
  @Input() myInputParam: MyType;
  @Input() myOtherInputParam: MyOtherType;
  @Output() myOutputParam: MyOtherOutputType;
}

我有一个Angular库,如果我能以编程方式检索@Input()给定组件类(虽然属于库)中的 Angular的装饰器,可以避免很多代码重复(并减少bundle大小).

但我怀疑这种实现的可移植性.我已经读过某个地方,如果Angular应用程序是在启用了AoT的情况下构建的(并且只使用了Angular装饰器),则不需要Reflect polyfill(在运行时读取装饰器所需).所以我认为我不能只使用Reflect.*.Angular如何存储装饰器？是否有可靠,面向未来的方式来阅读它们？

缩小应该不是问题,因为它只用于读取库组件的装饰器,所以我可以控制它.

所以,如果这是可行的方式(或者不是,我仍然感兴趣),我怎么能读取那些装饰器？

我想再次尝试使用Angular 2Ahead-of-Time编译.

这将需要我的重大重构,因为我当前的设置使用需要更改的自定义构建过程.

在开始之前我需要知道:如果我链接到元数据中的外部.scss文件,styleUrlsAoT编译器是否可以工作？

@Component({
    ...
    styleUrls:['./app.component.scss'],
})
export class AppComponent {}

或者我应该首先将所有样式转换.css为CSS样式表并链接到CSS样式表？

自述文件没有讨论这个问题.

提前编译Angular 4.0.2应用程序并将提供程序定义为 useValue

import { OpaqueToken, Provider } from '@angular/core';

export const windowToken = new OpaqueToken('window');
export const windowProvider = { provide: windowToken, useValue: window };

并像

@NgModule({ providers: [windowProvider], ... })
export class AppModule {}

它可以编译，但是当window被undefined注入时

constructor(@Inject(windowToken) window) {
   window.navigator...
}

在引导时抛出错误：

TypeError：无法读取未定义的属性“ navigator”

仔细查看自动生成的app.module.ngfactory.js，看起来确实是这样undefined：

...
import * as import39 from './window';
var AppModuleInjector = (function (_super) {
    ...
    AppModuleInjector.prototype.createInternal = function () {
        ...
        this._windowToken_26 = undefined;
        this._SomeService_27 = new import16.SomeService(this._windowToken_26);
    } …

我刚刚学习AOT，ngc等运行后ngc我看到很多的*.ngsummary.json（在src文件夹旁*.ts的文件）。

它们是为了什么？

我试图在我的Angular应用程序中包含外部模块(托管在git/npm存储库中)作为延迟加载的模块.

我用ngc编译器编译我的外部模块:

node_modules/.bin/ngc -p tsconfig-aot.json

这是我的编译器配置的外观:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": true,
    "outDir": "./release/src"
  },
  "files": [
    "./src/index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "release",
    "skipTemplateCodegen": true,
    "entryModule": "index#ExternalModule",
    "skipMetadataEmit": false,
    "strictMetadataEmit": true
  }
}

在我的主应用程序中,我懒得加载给定模块:

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
      { path: 'external', loadChildren: '@angular-universal-serverless/external-module/release#ExternalModule'}
])

出于编译目的,我使用的是@ ngtools/webpack插件.

JIT编译没有任何问题,但AOT编译给我错误:

ERROR in ./src/ngfactory lazy
Module not found: Error: Can't resolve '/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules/@angular-universal-serverless/external-module/release/src/index.js' in '/Users/mtreder/Documents/private/work/angular-universal-serverless/src/ngfactory'
 @ ./src/ngfactory lazy
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.server.aot.ts

所以我决定检查 …

运行命令npm run ngcc会引发错误'ngcc' is not recognized as an internal or external command。

package.json

{
  "scripts": {
    "ngcc": "ngcc"
    ...
  },
  "dependencies": {
    "@angular-extensions/elements": "^9.3.0",
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/elements": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    ...
  }
}

anuglar-compiler 和其他包的版本是否有任何不匹配？无法找到问题的根本原因。有人可以帮忙吗？

我将 Angular 项目从 Angular 10 更新到 11x。一切正常，除了一个关于运行项目使用的警告ng serve（在 ng serve 中没有任何选项）。警告是：

不推荐使用选项“sourceMap”：改用浏览器构建器中的“sourceMap”选项。

警告未出现在 中ng build。

以下是angular.json项目中浏览器构建器部分的样子：

"builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "sourceMap": true,
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Angular 11 中的某些相关内容发生了变化？如何消除此警告？

我在编译 Angular 11 时缺少百分比进度视图。通常我会这样做：

ng serve

并在编译代码时看到了百分比进度。现在百分比视图已经消失，并且已被progress弃用：

选项“progress”已弃用：请改用浏览器构建器中的“progress”选项。

现在的问题是：这意味着什么，或者我progress=true现在必须在哪里放置选项才能返回百分比视图？

生成浏览器应用程序包时发生错误（阶段：设置）。什么可能导致此错误？

来自控制台的信息：

生成浏览器应用程序包（阶段：设置）... TypeError：无法读取 NodeObject.getText 处未定义的属性“文本”（/opt/app-root/src/node_modules/typescript/lib/typescript.js:152697:31）在 getRequiredModulePath (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/host/umd_host.js:519:99) 在 Object.getImportsOfUmdModule (/opt/app-root/src/node_modules) /@angular/compiler-cli/ngcc/src/host/umd_host.js:510:23) 在 UmdDependencyHost.extractImports (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependencies /umd_dependency_host.js:43:54) 在 UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependency/dependency_host.js:85:32) 在 UmdDependencyHost .DependencyHostBase.collectDependency (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependencies/dependency_host.js:38:22) 在 DependencyResolver.getEntryPointWithDependencies (/opt/app-root/src) /node_modules/@angular/compiler-cli/ngcc/src/dependency/dependency_resolver.js:75:22) 在 EntryPointCollector.walkDirectoryForPackages (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src /entry_point_finder/entry_point_collector.js:47:52) 在 EntryPointCollector.walkDirectoryForPackages (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/entry_point_collector.js:75:103) 在 / opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/program_based_entry_point_finder.js:124:100

来自 angle-errors.log 的信息

构建期间发生错误：错误：NGCC 失败。在 NgccProcessor.process (/opt/app-root/src/node_modules/@ngtools/webpack/src/ngcc_processor.js:139:19) 在 /opt/app-root/src/node_modules/@ngtools/webpack/src/ ivy/plugin.js:129:27 在 Hook.eval [作为调用] (eval at create (/opt/app-root/src/node_modules/tapable/lib/HookCodeFactory.js:19:10), :28:1 ）在 Hook.CALL_DELEGATE [as _call] (/opt/app-root/src/node_modules/tapable/lib/Hook.js:14:14) 在 Compiler.newCompilation (/opt/app-root/src/node_modules/webpack) /lib/Compiler.js:1043:30) 在 /opt/app-root/src/node_modules/webpack/lib/Compiler.js:1088:29 在 Hook.eval [as callAsync] （eval at create (/opt/ app-root/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) 在 Hook.CALL_ASYNC_DELEGATE [as _callAsync] …