[英]AoT compilation module.id error Angular 2?
I want to the AoT compilation for my angular 2 project. 我想为我的angular 2项目进行AoT编译。
I have separated my application into js
directory where all my generated .js
files are and an app
directory where I keep my .ts
, .html
and .css
files together. 我将应用程序分为所有生成的.js
文件所在的js
目录和将.ts
, .html
和.css
文件存放在一起的app
目录。
For the AoT compilation I use the tsconfig.aot.json
对于AoT编译,我使用tsconfig.aot.json
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"declaration": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "es2015", "dom"],
"sourceMap": true,
"pretty": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noFallthroughCasesInSwitch": true,
"outDir": "js",
"typeRoots": [
"./node_modules/@types",
"./node_modules"
],
"types": [
]
},
"files": [
"app/main.ts"
],
"exclude": [
"node_modules",
"js",
"app"
],
"compileOnSave": false
}
and the script: "ngc": "ngc -p tsconfig.aot.json && npm run copy \\"app/*\\" \\"compiled\\" "
和脚本: "ngc": "ngc -p tsconfig.aot.json && npm run copy \\"app/*\\" \\"compiled\\" "
Currently I have my com,ponents like this: 目前我有我的com,这样的组件:
@Component({
selector: 'fs-mainbar',
templateUrl: 'app/mainbar/mainbar.component.html'
})
export class MainbarComponent {
But when I try to run the script it gives me this error: 但是当我尝试运行脚本时,它给了我这个错误:
> angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
> ngc -p tsconfig.aot.json && npm run copy "app/*" "compiled"
Error: Compilation failed. Resource file not found: C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/app/mainbar/mainbar.component.html
at ModuleResolutionHostAdapter.readResource (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler-cli\src\compiler_host.js:291:19)
at CompilerHost.loadResource (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler-cli\src\compiler_host.js:230:85)
at Object.get (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:26374:111)
at DirectiveNormalizer._fetch (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13753:47)
at DirectiveNormalizer.normalizeTemplateAsync (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13799:25)
at DirectiveNormalizer.normalizeTemplate (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13771:48)
at CompileMetadataResolver._loadDirectiveMetadata (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18074:79)
at C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18250:58
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd
.js:18249:45)
Compilation failed
So ok I should use module.id
, but because I have seprated my app into js
and app
folders I have to use it like this: 好吧,我应该使用module.id
,但是因为我已经将应用程序分为js
和app
文件夹,所以我必须像这样使用它:
@Component({
moduleId: module.id.replace("/js/", "/app/"),
selector: 'escl-mainbar',
templateUrl: './mainbar.component.html'
})
export class MainbarComponent {
This how ever gives me this error: 这是怎么给我这个错误的:
> angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
> ngc -p tsconfig.aot.json && npm run copy "app/*" "compiled"
Error encountered resolving symbol values statically. Calling function 'module', function calls are not supported. Consider replacing the function or lambda with a re
ference to an exported function, resolving symbol MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts, resolving symbol
MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts
So I'm pretty much stuck from here on. 因此,从现在开始,我几乎陷入了困境。 How can I fix this? 我怎样才能解决这个问题? Any help is welcomed :) 欢迎任何帮助:)
issue on github: 在github上的问题:
https://github.com/angular/angular/issues/14374 https://github.com/angular/angular/issues/14374
Try this: 尝试这个:
export function moduleId() {
return module.id.replace("/js/", "/app/");
}
@Component({
moduleId: moduleId(),
selector: 'escl-mainbar',
templateUrl: './mainbar.component.html'
})
export class MainbarComponent { }
Similar issue: Angular2 AoT Compiler Errors 相似的问题: Angular2 AoT编译器错误
For more information about AOT compilation, and its advantages over JIT compilation visit: Ahead-of-time (AOT) vs Just-in-time (JIT) 有关AOT编译及其相对于JIT编译的优势的更多信息,请访问: 提前(AOT)与即时(JIT)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.