我有一个Angular(4.3.2)应用程序,我想在其上执行AOT构建.应用程序是使用@angular/cli.我有两个搭建的组件ng generate和一个模块,其中两个都作为声明包含在内:
import {PrivateComponent} from './private.component/private.component';
NgModule({
imports: [
// other imports
PrivateRoutingModule
],
declarations: [
...some other components,
PrivateComponent,
AppTopBarComponent
]
// other stuff
})
export class PrivateModule {}
私有组件也用于模块的路由:
const routes: Routes = [
{path: '', component: PrivateComponent, children: // other components}
]
@NgModule({
imports: [RouterModule.forChild(routes)] // this is the Angular built-in router module
})
export class PrivateRoutingModule {}
注意:路由是如何在另一个模块定义和导入PrivateModule
的AppTopBarComponent内部使用的PrivateComponent's模板.所以两者都被使用和宣布.但是当我使用"node_modules/.bin/ngc" -p tsconfig-aot.json(我在Windows 10上)时,我收到此错误消息:
Cannot determine the …
当我想在AOT中使用以下包版本编译我当前的项目时,我遇到了问题:
我的webpack和tsconfig.json配置可以在这里找到
我面临一些与模板上使用的private/ protectedscope 有关的问题,并且一些提取参数给了一些并不真正需要它的函数(Exemple $ event,它们不用于EventBinding).
现在我有以下列表,我找不到我的问题:
/path/to/app/header/main-header/main-header.component.html(85,7)::指令TableOfContentComponent,期望0参数,但得到1.(1,1)::指令TableOfContentComponent,预期0争论,但得到1.
我的main-header.component.html文件包含:// main-header.component.html
// main-header.component.ts
@ViewChildren('headerItems') public headerItems: QueryList<HeaderItemAbstract>;
mainMenuStates = {
hamburger: false,
bookmarks: false,
search: false,
toc: false,
medias: false,
article: false,
language: false
};
而且我TableOfContentComponent不包含任何@Input财产.
@Component({
selector: 'ps-table-of-content-template',
templateUrl: './table-of-content.component.html',
animations: [slideUpAndDownAnimation]
})
export class TableOfContentComponent extends HeaderItemAbstract implements OnInit {
toc: TableOfContentModel[];
devices: DevicesModel;
tocContentHeight: number;
tocContentMargin: number;
menuHeight: string;
constructor(private …我正在尝试使用webpack 3和angular 5进行构建,但网上有很多教程,没有显示完整的示例没有问题,到目前为止,我有以下配置:(对于那些有疑问的人路径 - 我在java应用程序中使用它)
webpack.config.aot.js:
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ngToolsWebpack = require('@ngtools/webpack');
module.exports = {
context: __dirname + "/src/main/webapp/resources/script/",
entry: {
app: "./core/main.aot.ts",
vendor: "./vendor.ts",
polyfills: "./polyfills.ts"
},
output: {
filename: 'js/[name].js',
chunkFilename: "js/chunks/[id].chunk.js",
publicPath: "resources/compiled/",
path: __dirname + '/src/main/webapp/resources/compiled'
},
resolve: {
alias: {
STYLES: __dirname + "/src/main/webapp/resources/css/",
SCRIPT: __dirname + "/src/main/webapp/script/"
},
extensions: [".js", ".json", ".scss", ".ts"]
},
module: {
rules: [
{
test: /[\/]angular\.js$/,
loader: 'exports-loader?angular'
},
{
test: /\.html$/,
loader: …我正在使用角度编译器:
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
使用这些编译器选项:
"angularCompilerOptions": {
"genDir": "./build/compiled",
"outDir": "./build/compiled",
"skipMetadataEmit": true,
"debug": true},
我的package.json的相关部分是:
"@ngtools/webpack": "^6.0.0",
"@angular/router": "^5.2.0",
"webpack": "4.8.3",
"webpack-cli": "2.1.4",
而我的angularCompilerPlugin配置是:
new AngularCompilerPlugin({
tsConfigPath: 'path-to-tsconfig.webpack.json',
entryModule: 'path-to-app.module#AppModule',
sourceMap: true
}),
通过这些配置,我得到:
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve 'path-/alerts/module.ngfactory.js' in 'path-to-app-folder/$$_lazy_route_resource'
@ ./$$_lazy_route_resource lazy namespace object
@ ./node_modules/@angular/core/esm5/core.js
@ multi core-js/shim classlist.js reflect-metadata zone.js/dist/zone jquery/dist/jquery rxjs/Rx lodash jquery.panzoom moment moment-timezone @angular/common @angular/core @angular/http @angular/router @angular/forms semantic
请任何指示或帮助.
我在没有参数的方法中捕获输出事件,它工作正常.但是当我尝试构建AOT时 - 产生以下错误.
期望0个参数,但得到1
Html code: SaveSortOrder($event)
backend code: SaveSortOrder() {}
在angular5上,我尝试对我的大多数模块/组件进行相同的项目AOT编译......但我有一部分需要进行JIT编译.
对于第二部分,HTML来自Ajax请求并包含一些必须由angular编译的组件标记.要管理这部分,我使用看起来像这样的指令:
export class ArticleLiveDirective implements OnInit, OnChanges, OnDestroy {
// [...]
constructor(
private container: ViewContainerRef,
private compiler: Compiler
) { }
// [...]
private addHtmlComponent(template: string, properties: any = {}) {
this.container.clear();
//Force always rootDomElement.
const divTag = document.createElement('div');
divTag.setAttribute('id',this.currentId);
divTag.innerHTML = template;
template = divTag.outerHTML;
// We create dynamic component with injected template
@Component({ template })
class ArticleLIveComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private articleService: ArticleService
) {}
ngOnInit() {}
ngOnChanges(changes: SimpleChanges) {}
ngOnDestroy() {}
goToPage($event: Event, …import { environment } from '@env/environment';
export const routes: Routes = [
{
path: '',
children: [
{
path: 'organisations',
component: OrganisationListComponent,
data: {
[environment.router.data.resourceName]: 'ORGANISATION' // <- error
}
},
{
path: 'organisations/create',
component: OrganisationCreateComponent,
data: {
[environment.router.data.resourceName]: 'ORGANISATION_LIST' // <- error
},...
}
这是我的路由模块文件之一的一部分。如您所见，我希望路由数据具有我在环境文件中定义的名称的属性。但这在使用--aot标志进行编译时将无法正常工作。这是错误：
ERROR in Error during template compile of 'AdminRoutingModule'
Expression form not supported in 'routes'
'routes' contains the error at app/admin/admin-routing.module.ts(30,11).
我的应用程序中大约有30条路由，并且所有路由都具有带有键“ resourceName”的data属性。而且我不想在我的应用程序中重复此字符串30次。
我不能创建具有resourceName属性的类并在数据中实例化它，因为在路由配置中也不允许使用函数表达式。
有没有解决的办法，还是使用AOT编译器根本无法实现？
编辑：这是environement.ts文件：
export const environment = {
production: true,
version: '1.0.0', …我有一个项目，其中几个前端共享一个公共库。
这些项目的模块依赖性由npm管理。
因此，在每个项目的package.json中，我都有：
"dependencies": {
"mylib": "file:../<...path...>/mylib",
...other deps...
},
我将“ mylib”用于两个目的：
直到现在，我一直在使用npm 3.3.12并在运行之后使用npm installmylib的角度依赖关系，该角度依赖关系在我的顶级项目的node_modules目录下。
所以，例如
node_modules
@angular
core
common
....
mylib
现在，使用npm 5.4.2，我有：
node_modules
mylib
node_modules
@angular
core
common
这会在我的构建过程中引起很多问题，它需要通过添加诸如以下指令来进一步配置打字稿：
"baseUrl": "",
"paths": {
"@angular/common": ["node_modules/mylib/node_modules/@angular/common/"],
"@angular/core": ["node_modules/mylib/node_modules/@angular/core/"],
"@angular/compiler": ["node_modules/mylib/node_modules/@angular/compiler/"],
"@angular/compiler-cli": ["node_modules/mylib/node_modules/@angular/compiler-cli/"],
"@angular/forms": ["node_modules/mylib/node_modules/@angular/forms/"],
"@angular/http": ["node_modules/mylib/node_modules/@angular/http/"],
"@angular/platform-browser": ["node_modules/mylib/node_modules/@angular/platform-browser/"],
"@angular/platform-browser/animations": ["node_modules/mylib/node_modules/@angular/platform-browser/animations/"],
"@angular/platform-browser-dynamic": ["node_modules/mylib/node_modules/@angular/platform-browser-dynamic/"],
"@angular/router": ["node_modules/mylib/node_modules/@angular/router/"],
"primeng/primeng": ["node_modules/mylib/node_modules/primeng/primeng"],
"rxjs/Rx": ["node_modules/mylib/node_modules/rxjs/Rx"]
}
在tsconfig.json中
当您必须对AOT，汇总等进行类似的配置时，这真的很烦人。
我尝试使用npm重复数据删除来简化此操作。由于项目有很多依赖项，因此其中一个项目需要超过1000万个依赖项：
npm dedupe
...
...
removed 824 packages and moved 1020 packages in 623.196s …我刚刚将我的 Angular 应用程序升级到版本 5，效果很好。然而，一旦我升级了其他一些东西（比如@angular/cdk、@angular/material、typescript），我就不得不修复升级带来的一堆错误。当我运行ng serve或ng build --prod（JIT 和 AOT 构建）时，一切看起来都很棒——终端中没有任何错误，应用程序构建成功。然后应用程序localhost:4200按预期运行，但应用程序似乎没有启动，浏览器控制台中根本没有打印任何内容。
我可以做些什么来解决问题？我没有任何错误可以查看，我觉得我只需要猜测出了什么问题。
有什么建议？
在Angular v6中，当尝试构建我的库时，我遇到了一个极端的非描述性问题 BUILD ERROR Cannot read property 'type' of null
BUILD ERROR
Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15378:27
at Array.forEach (<anonymous>)
at removeSummaryDuplicates (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15377:11)
at TemplateParser.tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14806:34)
at TemplateParser.tryParse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14799:21)
at TemplateParser.parse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14780:27)
at AotCompiler._parseTemplate (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20483:43)
at AotCompiler._createTypeCheckBlock (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20250:23)
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20220:27
at Array.forEach (<anonymous>)
已经解决了这个问题，我正在发布这篇文章，以帮助遇到此问题的其他任何人。
angular-aot ×10
angular ×9
angular5 ×3
typescript ×3
angular-cli ×2
aot ×2
webpack ×2
javascript ×1
jit ×1
ngtools ×1
npm ×1
webpack-4 ×1